Merge pull request #16 from FANMixco/service-worker-changes

Updated service worker

Author: FANMixco

index.html

@@ -490,35 +490,26 @@ <h4 class="hCustom" data-tag="timeMaximum"></h4>
     <script src="js/functions/genericActions.min.js"></script>
     <script src="js/lib/ua-parser.min.js"></script>
     <script src="js/timer.min.js"></script>
+
     <script>
+        //Translator
         load();
 
-        // This is the "Offline page" service worker
-
-        // Add this below content to your HTML page, or add the js file to your page at the very top to register service worker
-
-        // Check compatibility for the browser we're running this in
-        if ("serviceWorker" in navigator) {
-            if (navigator.serviceWorker.controller) {
-                console.log("[PWA Builder] active service worker found, no need to register");
-            } else {
-                // Register the service worker
-                navigator.serviceWorker
-                .register("pwabuilder-sw.js", {
-                    scope: "./"
-                })
-                .then(function (reg) {
-                    console.log("[PWA Builder] Service worker has been registered for scope: " + reg.scope);
-                });
-            }
-        }
-     </script>
-     <script>
-		window.dataLayer = window.dataLayer || [];
+        //Analytics
+        window.dataLayer = window.dataLayer || [];
 		function gtag(){dataLayer.push(arguments);}
 		gtag('js', new Date());
 
 		gtag('config', 'UA-139701351-1');
-     </script>
+    </script>
+
+    <script type="module">
+        //PWA
+        import 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate';
+        if ("serviceWorker" in navigator) {
+            const el = document.createElement('pwa-update');
+            document.body.appendChild(el);
+        }
+    </script>
 </body>
 </html>

manifest.json

@@ -440,7 +440,7 @@
 		  "sizes": "16x16"
 		}
 	],
-	"categories": ["timer", "tools", "alarms"],
+	"categories": ["timer", "tools", "alarms", "productivity", "utilities"],
 	"screenshots" : [
 		{
 		  "src": "img/previews/preview1.webp",

pwabuilder-sw.js

@@ -1,141 +1,75 @@
-/*
- Copyright 2015 Google Inc. All Rights Reserved.
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
-*/
+//This is the service worker with the Advanced caching
 
-'use strict';
+importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');
 
-// Incrementing CACHE_VERSION will kick off the install event and force previously cached
-// resources to be cached again.
-const CACHE_VERSION = 1;
-let CURRENT_CACHES = {
-  offline: 'offline-v' + CACHE_VERSION
-};
-const OFFLINE_URL = 'offline.html';
+const HTML_CACHE = "html";
+const JS_CACHE = "javascript";
+const STYLE_CACHE = "stylesheets";
+const IMAGE_CACHE = "images";
+const FONT_CACHE = "fonts";
 
-function createCacheBustedRequest(url) {
-  let request = new Request(url, {cache: 'reload'});
-  // See https://fetch.spec.whatwg.org/#concept-request-mode
-  // This is not yet supported in Chrome as of M48, so we need to explicitly check to see
-  // if the cache: 'reload' option had any effect.
-  if ('cache' in request) {
-    return request;
+self.addEventListener("message", (event) => {
+  if (event.data && event.data.type === "SKIP_WAITING") {
+    self.skipWaiting();
   }
-
-  // If {cache: 'reload'} didn't have any effect, append a cache-busting URL parameter instead.
-  let bustedUrl = new URL(url, self.location.href);
-  bustedUrl.search += (bustedUrl.search ? '&' : '') + 'cachebust=' + Date.now();
-  return new Request(bustedUrl);
-}
-
-self.addEventListener('install', event => {
-  event.waitUntil(
-    // We can't use cache.add() here, since we want OFFLINE_URL to be the cache key, but
-    // the actual URL we end up requesting might include a cache-busting parameter.
-    fetch(createCacheBustedRequest(OFFLINE_URL)).then(function(response) {
-      return caches.open(CURRENT_CACHES.offline).then(function(cache) {
-          var tmpLng;
-          try {
-              if (!lang)
-                  tmpLng = "en";
-          }
-          catch(e){
-              tmpLng = "en";
-          }
-		  return cache.addAll([
-          "index.html",
-          "css/loading.min.css",
-          "css/materialdesignicons.min.css",
-          "css/timer.css",
-          "css/material.indigo-pink.min.css",
-          "css/getmdl-select.min.css",
-          "browserSpecific/css/dialog-polyfill.css",
-          "js/lib/material.min.js",
-          "js/lib/translate.min.js",
-          "js/lib/darkModeHandler.min.js",
-          "js/lib/devicedetector-min.js",
-          "js/components/getmdl-select.min.js",
-          "browserSpecific/js/dialog-polyfill.js",
-          "browserSpecific/js/jspdf.min.js",
-          "browserSpecific/js/getOS.min.js",
-          "browserSpecific/js/actions.min.js",
-          "js/components/setTimeDialog.min.js",
-          "js/lib/moment.min.js",
-          "js/lib/ua-parser.min.js",
-          "js/db/customDBActions.min.js",
-          "js/db/dbHandler.min.js",
-          "js/functions/genericActions.min.js",
-          "js/timer.min.js",
-          `js/lang/${tmpLng}.json`,
-          "img/supernova.png",
-          "img/amazon.png",
-          "img/playStore.png",
-          "img/microsoft.png",
-          "img/clapping-hands.svg",
-          "img/clapping-off.svg"
-        ]);
-      });
-    })
-  );
 });
 
-self.addEventListener('activate', event => {
-  // Delete all caches that aren't named in CURRENT_CACHES.
-  // While there is only one cache in this example, the same logic will handle the case where
-  // there are multiple versioned caches.
-  let expectedCacheNames = Object.keys(CURRENT_CACHES).map(function(key) {
-    return CURRENT_CACHES[key];
-  });
+workbox.routing.registerRoute(
+  ({event}) => event.request.destination === 'document',
+  new workbox.strategies.NetworkFirst({
+    cacheName: HTML_CACHE,
+    plugins: [
+      new workbox.expiration.ExpirationPlugin({
+        maxEntries: 10,
+      }),
+    ],
+  })
+);
 
-  event.waitUntil(
-    caches.keys().then(cacheNames => {
-      return Promise.all(
-        cacheNames.map(cacheName => {
-          if (expectedCacheNames.indexOf(cacheName) === -1) {
-            // If this cache name isn't present in the array of "expected" cache names,
-            // then delete it.
-            console.log('Deleting out of date cache:', cacheName);
-            return caches.delete(cacheName);
-          }
-        })
-      );
-    })
-  );
-});
+workbox.routing.registerRoute(
+  ({event}) => event.request.destination === 'script',
+  new workbox.strategies.StaleWhileRevalidate({
+    cacheName: JS_CACHE,
+    plugins: [
+      new workbox.expiration.ExpirationPlugin({
+        maxEntries: 15,
+      }),
+    ],
+  })
+);
 
-self.addEventListener('fetch', event => {
-  // We only want to call event.respondWith() if this is a navigation request
-  // for an HTML page.
-  // request.mode of 'navigate' is unfortunately not supported in Chrome
-  // versions older than 49, so we need to include a less precise fallback,
-  // which checks for a GET request with an Accept: text/html header.
-  if (event.request.mode === 'navigate' ||
-      (event.request.method === 'GET' &&
-       event.request.headers.get('accept').includes('text/html'))) {
-    console.log('Handling fetch event for', event.request.url);
-    event.respondWith(
-      fetch(event.request).catch(error => {
-        // The catch is only triggered if fetch() throws an exception, which will most likely
-        // happen due to the server being unreachable.
-        // If fetch() returns a valid HTTP response with an response code in the 4xx or 5xx
-        // range, the catch() will NOT be called. If you need custom handling for 4xx or 5xx
-        // errors, see https://github.com/GoogleChrome/samples/tree/gh-pages/service-worker/fallback-response
-        console.log('Fetch failed; returning offline page instead.', error);
-        return caches.match(OFFLINE_URL);
-      })
-    );
-  }
+workbox.routing.registerRoute(
+  ({event}) => event.request.destination === 'style',
+  new workbox.strategies.StaleWhileRevalidate({
+    cacheName: STYLE_CACHE,
+    plugins: [
+      new workbox.expiration.ExpirationPlugin({
+        maxEntries: 15,
+      }),
+    ],
+  })
+);
 
-  // If our if() condition is false, then this fetch handler won't intercept the request.
-  // If there are any other fetch handlers registered, they will get a chance to call
-  // event.respondWith(). If no fetch handlers call event.respondWith(), the request will be
-  // handled by the browser as if there were no service worker involvement.
-});
+workbox.routing.registerRoute(
+  ({event}) => event.request.destination === 'image',
+  new workbox.strategies.StaleWhileRevalidate({
+    cacheName: IMAGE_CACHE,
+    plugins: [
+      new workbox.expiration.ExpirationPlugin({
+        maxEntries: 15,
+      }),
+    ],
+  })
+);
+
+workbox.routing.registerRoute(
+  ({event}) => event.request.destination === 'font',
+  new workbox.strategies.StaleWhileRevalidate({
+    cacheName: FONT_CACHE,
+    plugins: [
+      new workbox.expiration.ExpirationPlugin({
+        maxEntries: 15,
+      }),
+    ],
+  })
+);