Reduce PWA storage space

Author: cotes2020

assets/js/data/cache-list.js assets/js/data/swcache.jsassets/js/data/cache-list.js renamed to assets/js/data/swcache.js

@@ -4,17 +4,18 @@ layout: compress
 # The list to be cached by PWA
 ---
 
-const include = [
-  /* --- CSS --- */
+const resource = [
 
+  /* --- CSS --- */
   '{{ "/assets/css/style.css" | relative_url }}',
 
-  /* --- Javascripts --- */
-  '{{ "/assets/js/dist/home.min.js" | relative_url }}',
-  '{{ "/assets/js/dist/page.min.js" | relative_url }}',
-  '{{ "/assets/js/dist/post.min.js" | relative_url }}',
-  '{{ "/assets/js/dist/categories.min.js" | relative_url }}',
-  '{{ "/assets/js/data/search.json" | relative_url }}',
+  /* --- JavaScripts --- */
+  {% assign js_path = "/assets/js" | relative_url %}
+  '{{ js_path }}/dist/home.min.js',
+  '{{ js_path }}/dist/page.min.js',
+  '{{ js_path }}/dist/post.min.js',
+  '{{ js_path }}/dist/categories.min.js',
+  '{{ js_path }}/data/search.json',
   '{{ "/app.js" | relative_url }}',
   '{{ "/sw.js" | relative_url }}',
 
@@ -25,12 +26,8 @@ const include = [
     '{{ tab.url }}',
   {% endfor %}
 
-
   /* --- Icons --- */
-
-  {%- capture icon_url -%}
-    {{ "/assets/img/favicons" | relative_url }}
-  {%- endcapture -%}
+  {% assign icon_url = "/assets/img/favicons" | relative_url %}
   '{{ icon_url }}/favicon.ico',
   '{{ icon_url }}/apple-icon.png',
   '{{ icon_url }}/apple-icon-precomposed.png',
@@ -52,10 +49,24 @@ const include = [
   '{{ icon_url }}/browserconfig.xml'
 ];
 
-const exclude = [
-  {%- if site.google_analytics.pv.proxy_endpoint -%}
-    'https://{{ site.google_analytics.pv.proxy_endpoint | replace: "https://", "" | split: "/" | first }}',
-  {%- endif -%}
-  'https://img.shields.io',
-  '/assets/js/data/pageviews.json'
+/* The request url with below domain will be cached */
+const allowedDomains = [
+  {% if site.google_analytics.id != '' %}
+    'www.googletagmanager.com',
+    'www.google-analytics.com',
+  {% endif %}
+
+  '{{ site.url | split: "//" | last }}',
+
+  'fonts.gstatic.com',
+  'fonts.googleapis.com',
+  'cdn.jsdelivr.net',
+  'polyfill.io'
+];
+
+/* Requests that include the following path will be banned */
+const denyUrls = [
+  {% if site.google_analytics.pv.cache_path %}
+    '{{ site.google_analytics.pv.cache_path | absolute_url }}'
+  {% endif %}
 ];

sw.js

@@ -3,42 +3,55 @@ layout: compress
 # PWA service worker
 ---
 
-self.importScripts('{{ "/assets/js/data/cache-list.js" | relative_url }}');
+self.importScripts('{{ "/assets/js/data/swcache.js" | relative_url }}');
 
-var cacheName = 'chirpy-{{ "now" | date: "%Y%m%d.%H%M" }}';
+const cacheName = 'chirpy-{{ "now" | date: "%Y%m%d.%H%M" }}';
+
+function verifyDomain(url) {
+  for (const domain of allowedDomains) {
+    const regex = RegExp(`^http(s)?:\/\/${domain}\/`);
+    if (regex.test(url)) {
+      return true;
+    }
+  }
+
+  return false;
+}
 
 function isExcluded(url) {
-  const regex = /(^http(s)?|^\/)/; /* the regex for CORS url or relative url */
-  for (const rule of exclude) {
-    if (!regex.test(url) ||
-      url.indexOf(rule) != -1) {
+  for (const item of denyUrls) {
+    if (url === item) {
       return true;
     }
   }
   return false;
 }
 
-self.addEventListener('install', (e) => {
+self.addEventListener('install', e => {
   self.skipWaiting();
   e.waitUntil(
-    caches.open(cacheName).then((cache) => {
-      return cache.addAll(include);
+    caches.open(cacheName).then(cache => {
+      return cache.addAll(resource);
     })
   );
 });
 
-self.addEventListener('fetch', (e) => {
+self.addEventListener('fetch', e => {
   e.respondWith(
-    caches.match(e.request).then((r) => {
+    caches.match(e.request).then(r => {
       /* console.log(`[sw] method: ${e.request.method}, fetching: ${e.request.url}`); */
-      return r || fetch(e.request).then((response) => {
-        return caches.open(cacheName).then((cache) => {
-          if (!isExcluded(e.request.url)) {
-            if (e.request.method === "GET") {
-              /* console.log('[sw] Caching new resource: ' + e.request.url); */
-              cache.put(e.request, response.clone());
-            }
-          }
+      return r || fetch(e.request).then(response => {
+        const url = e.request.url;
+
+        if (e.request.method !== 'GET'
+          || !verifyDomain(url)
+          || isExcluded(url)) {
+          return response;
+        }
+
+        return caches.open(cacheName).then(cache => {
+          /* console.log('[sw] Caching new resource: ' + e.request.url); */
+          cache.put(e.request, response.clone());
           return response;
         });
 
@@ -47,14 +60,16 @@ self.addEventListener('fetch', (e) => {
   );
 });
 
-self.addEventListener('activate', (e) => {
+self.addEventListener('activate', e => {
   e.waitUntil(
-    caches.keys().then((keyList) => {
-          return Promise.all(keyList.map((key) => {
-        if(key !== cacheName) {
-          return caches.delete(key);
-        }
-      }));
+    caches.keys().then(keyList => {
+          return Promise.all(
+            keyList.map(key => {
+              if(key !== cacheName) {
+                return caches.delete(key);
+              }
+            })
+          );
     })
   );
 });