Cara Bikin PWA Progressive Web App dengan Next.js

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",
};