feat: add pwa.cache.* option to precisely control caching (#1501)

_javascript/pwa/app.js

@@ -0,0 +1,58 @@
+/* PWA loader */
+
+if ('serviceWorker' in navigator) {
+  const meta = document.querySelector('meta[name="pwa-cache"]');
+  const isEnabled = meta.content === 'true';
+
+  if (isEnabled) {
+    let swUrl = '/sw.min.js';
+    const baseUrl = meta.getAttribute('data-baseurl');
+
+    if (baseUrl !== null) {
+      swUrl = `${baseUrl}${swUrl}?baseurl=${encodeURIComponent(baseUrl)}`;
+    }
+
+    const $notification = $('#notification');
+    const $btnRefresh = $('#notification .toast-body>button');
+
+    navigator.serviceWorker.register(swUrl).then((registration) => {
+      // In case the user ignores the notification
+      if (registration.waiting) {
+        $notification.toast('show');
+      }
+
+      registration.addEventListener('updatefound', () => {
+        registration.installing.addEventListener('statechange', () => {
+          if (registration.waiting) {
+            if (navigator.serviceWorker.controller) {
+              $notification.toast('show');
+            }
+          }
+        });
+      });
+
+      $btnRefresh.on('click', () => {
+        if (registration.waiting) {
+          registration.waiting.postMessage('SKIP_WAITING');
+        }
+        $notification.toast('hide');
+      });
+    });
+
+    let refreshing = false;
+
+    // Detect controller change and refresh all the opened tabs
+    navigator.serviceWorker.addEventListener('controllerchange', () => {
+      if (!refreshing) {
+        window.location.reload();
+        refreshing = true;
+      }
+    });
+  } else {
+    navigator.serviceWorker.getRegistrations().then(function (registrations) {
+      for (let registration of registrations) {
+        registration.unregister();
+      }
+    });
+  }
+}

_javascript/pwa/sw.js

@@ -0,0 +1,101 @@
+/* PWA service worker */
+
+const swconfPath = '/assets/js/data/swconf.js';
+const params = new URL(location).searchParams;
+const swconfUrl = params.has('baseurl')
+  ? `${params.get('baseurl')}${swconfPath}`
+  : swconfPath;
+
+importScripts(swconfUrl);
+const purge = swconf.purge;
+
+function verifyHost(url) {
+  for (const host of swconf.allowHosts) {
+    const regex = RegExp(`^http(s)?://${host}/`);
+    if (regex.test(url)) {
+      return true;
+    }
+  }
+  return false;
+}
+
+function verifyUrl(url) {
+  if (!verifyHost(url)) {
+    return false;
+  }
+
+  const requestPath = new URL(url).pathname;
+
+  for (const path of swconf.denyPaths) {
+    if (requestPath.startsWith(path)) {
+      return false;
+    }
+  }
+  return true;
+}
+
+if (!purge) {
+  swconf.allowHosts.push(location.host);
+}
+
+self.addEventListener('install', (event) => {
+  if (purge) {
+    return;
+  }
+
+  event.waitUntil(
+    caches.open(swconf.cacheName).then((cache) => {
+      return cache.addAll(swconf.resources);
+    })
+  );
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys().then((keyList) => {
+      return Promise.all(
+        keyList.map((key) => {
+          if (purge) {
+            return caches.delete(key);
+          } else {
+            if (key !== swconf.cacheName) {
+              return caches.delete(key);
+            }
+          }
+        })
+      );
+    })
+  );
+});
+
+self.addEventListener('message', (event) => {
+  if (event.data === 'SKIP_WAITING') {
+    self.skipWaiting();
+  }
+});
+
+self.addEventListener('fetch', (event) => {
+  event.respondWith(
+    caches.match(event.request).then((response) => {
+      if (response) {
+        return response;
+      }
+
+      return fetch(event.request).then((response) => {
+        const url = event.request.url;
+
+        if (purge || event.request.method !== 'GET' || !verifyUrl(url)) {
+          return response;
+        }
+
+        // See : <https://developers.google.com/web/fundamentals/primers/service-workers#cache_and_return_requests>
+        let responseToCache = response.clone();
+
+        caches.open(swconf.cacheName).then((cache) => {
+          cache.put(event.request, responseToCache);
+        });
+        return response;
+      });
+    })
+  );
+});