PWA GUIDE

PWA.md

tambahkan script berikut di head
dan sesuaikan lokasi asset untuk iconnya
(pastikan ditampilkan disemua halaman yang ada)

<!-- favicon -->
<link rel="shortcut icon" href="https://ad.ready.my.id/assets/fav/favicon.ico" type="image/x-icon">
<link rel="icon" href="https://ad.ready.my.id/assets/fav/favicon.ico" type="image/x-icon">

<!-- PWA Start -->
<meta name="theme-color" content="#6366F1" />
<meta name="Description" content="Deskripsi Singkat" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="App Title" />

<meta name="msapplication-TileImage" content="/assets/fav/android-chrome-512x512.png" />
<meta name="msapplication-TileColor" content="#FFFFFF" />

<link rel="apple-touch-icon" href="/assets/fav/apple-touch-icon.png" />

<!-- manifest -->
<link rel="manifest" href="/manifest.json" />
<!-- PWA End -->

<script>
    if (navigator.serviceWorker) {
        navigator.serviceWorker.register('/sw.js').then(function(registration) {
            console.log('ServiceWorker registration successful with scope:', registration.scope);
        }).catch(function(error) {
            console.log('ServiceWorker registration failed:', errror);
        });
    }
</script>

---

buat file manifest.json
letakan di root direktory (misal dalam CI4 piblik folder)

{
  "name": "My Pwa",
  "short_name": "My Pwa",
  "description": "Deskripsi Singkat",
  "background_color": "#6366F1",
  "theme_color": "#6366F1",
  "display": "standalone",
  "start_url": "/",
  "icons": [
    {
      "src": "/assets/fav/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/assets/fav/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/assets/fav/favicon-16x16.png",
      "sizes": "16x16",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/assets/fav/favicon-32x32.png",
      "sizes": "32x32",
      "type": "image/png",
      "purpose": "any"
    }
  ]
}

---

buat file sw.js
letakan di root direktory (misal dalam CI4 piblik folder)
diletakan di folder yang sama dengan file manifest.json

self.addEventListener('install', function (event) {
    console.log('Service worker installed');
});

self.addEventListener('activate', function (event) {
    console.log('Service worker activated');
});

self.addEventListener('fetch', function (event) {
    console.log('Service worker fetching:', event.request.url);
    event.respondWith(fetch(event.request));
});