Progressive Web App (PWA) memungkinkan web app kamu bisa di-install seperti native app di smartphone. User bisa mengaksesnya dari home screen tanpa harus download dari Play Store.
Apa itu PWA?
PWA adalah web app yang punya kemampuan:
- Bisa di-install di home screen
- Bekerja offline (dengan service worker)
- Push notification
- Terasa seperti native app
Step 1: Manifest
Buat file public/manifest.json:
{
"name": "My App",
"short_name": "MyApp",
"description": "Deskripsi aplikasi kamu",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#000000",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
Step 2: Service Worker
Buat public/sw.js:
const CACHE_NAME = "my-app-v1";
const urlsToCache = ["/", "/offline"];
self.addEventListener("install", (event) => {
event.waitUntil(
caches.open(CACHE_NAME).then((cache) => cache.addAll(urlsToCache))
);
});
self.addEventListener("fetch", (event) => {
event.respondWith(
caches.match(event.request).then((response) => {
return response || fetch(event.request);
})
);
});
Step 3: Register Service Worker
Buat component untuk register SW di Next.js:
"use client";
import { useEffect } from "react";
export function SwRegister() {
useEffect(() => {
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js");
}
}, []);
return null;
}
Step 4: Metadata di Layout
export const metadata = {
manifest: "/manifest.json",
};