fix pwa

static/manifest.json

@@ -2,14 +2,16 @@
   "name": "Skripsi JTIK",
   "short_name": "SkripsiJTIK",
   "start_url": "/",
-  "display": "standalone",
   "background_color": "#ffffff",
+  "description": "Web App for Skripsi JTIK PNJ",
+  "display": "fullscreen",
   "theme_color": "#0f8a9a",
   "icons": [
     {
       "src": "/static/images/favicon.png",
+      "sizes": "512x512",
       "type": "image/png",
-      "sizes": "192x192"
+      "purpose": "any maskable"
     }
   ]
 }

static/service-worker.js

@@ -1,32 +1,53 @@
-const CACHE_NAME = "my-cache";
-const OFFLINE_URL = "/static/offline.html";
+const preLoad = async function () {
+  const cache = await caches.open("offline");
+  return await cache.addAll(filesToCache);
+};
 
-self.addEventListener("install", (event) => {
-  event.waitUntil(
-    caches.open(CACHE_NAME).then((cache) => {
-      return cache.addAll([
-        "/",
-        "/static/css/portal.css",
-        "/static/js/app.js",
-        "/static/images/favicon.png",
-        OFFLINE_URL,
-      ]);
-    })
-  );
+self.addEventListener("install", function (event) {
+  event.waitUntil(preLoad());
 });
 
-self.addEventListener("fetch", (event) => {
-  if (event.request.mode === "navigate") {
-    event.respondWith(
-      fetch(event.request).catch(() => {
-        return caches.match(OFFLINE_URL);
-      })
-    );
+const filesToCache = ["/", "/static/offline.html"];
+
+const checkResponse = function (request) {
+  return new Promise(function (fulfill, reject) {
+    fetch(request).then(function (response) {
+      if (response.status !== 404) {
+        fulfill(response);
+      } else {
+        reject();
+      }
+    }, reject);
+  });
+};
+
+const addToCache = async function (request) {
+  if (request.url.startsWith("chrome-extension://")) {
+    return Promise.resolve();
+  }
+
+  const cache = await caches.open("offline");
+  const response = await fetch(request);
+  return await cache.put(request, response);
+};
+
+const returnFromCache = async function (request) {
+  const cache = await caches.open("offline");
+  const matching = await cache.match(request);
+  if (!matching || matching.status === 404) {
+    return cache.match("offline.html");
   } else {
-    event.respondWith(
-      caches.match(event.request).then((response) => {
-        return response || fetch(event.request);
-      })
-    );
+    return matching;
+  }
+};
+
+self.addEventListener("fetch", function (event) {
+  event.respondWith(
+    checkResponse(event.request).catch(function () {
+      return returnFromCache(event.request);
+    })
+  );
+  if (!event.request.url.startsWith("http")) {
+    event.waitUntil(addToCache(event.request));
   }
 });