- regular expression for precache

new RegExp(/.*\/(?:css|font).*/),

src-pwa/custom-service-worker.js

@@ -26,7 +26,97 @@ if (workbox) {
   workbox.precaching.suppressWarnings();
   workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
 
-  workbox.routing.registerRoute(/^http/, workbox.strategies.networkFirst(), 'GET');
+  // workbox.routing.registerRoute(/^http/, workbox.strategies.networkFirst(), 'GET');
+
+  workbox.routing.registerRoute(
+    new RegExp(/.*(?:googleapis|gstatic)\.com.*$/),
+    workbox.strategies.staleWhileRevalidate({
+      cacheName: 'google-fonts',
+      plugins: [
+        new workbox.expiration.Plugin({
+          maxAgeSeconds: 30 * 24 * 60 * 60,
+        }),
+      ]
+    })
+  );
+
+  workbox.routing.registerRoute(
+    new RegExp(/.*\/(?:statics\/icons).*$/),
+    workbox.strategies.cacheFirst({
+      cacheName: 'image-cache',
+      plugins: [
+        new workbox.expiration.Plugin({
+          maxAgeSeconds: 30 * 24 * 60 * 60,
+        }),
+      ]
+    })
+  );
+
+  workbox.routing.registerRoute(
+    new RegExp(/.*\/(?:css|font).*/),
+    workbox.strategies.cacheFirst({
+      cacheName: 'css-fonts',
+      plugins: [
+        new workbox.expiration.Plugin({
+          maxAgeSeconds: 30 * 24 * 60 * 60,
+        }),
+      ]
+    })
+  );
+
+
+  workbox.routing.registerRoute(
+    new RegExp('https://cdnjs.coudflare.com/ajax/libs/material-design-lite/1.3.0/material.indigo-pink.min.css'),
+    workbox.strategies.staleWhileRevalidate({
+      cacheName: 'material-css',
+      plugins: [
+        new workbox.expiration.Plugin({
+          maxAgeSeconds: 30 * 24 * 60 * 60,
+        }),
+      ]
+    })
+  );
+
+// Storage
+  workbox.routing.registerRoute(
+    new RegExp(/.*(?:storage\.freeplanet)\.app.*$/),
+    workbox.strategies.staleWhileRevalidate({
+      cacheName: 'storage',
+      plugins: [
+        new workbox.expiration.Plugin({
+          maxAgeSeconds: 30 * 24 * 60 * 60,
+          // Only cache 10 requests.
+          maxEntries: 200,
+        }),
+      ]
+    })
+  );
+
+  workbox.routing.registerRoute(
+    new RegExp(/.*\/(?:statics).*$/),
+    workbox.strategies.cacheFirst({
+      cacheName: 'statics',
+      plugins: [
+        new workbox.expiration.Plugin({
+          maxAgeSeconds: 10 * 24 * 60 * 60,
+          // Only cache 10 requests.
+        }),
+      ]
+    })
+  );
+
+  workbox.routing.registerRoute(
+    new RegExp(/^http/),
+    workbox.strategies.networkFirst({
+      cacheName: 'all-stuff',
+      plugins: [
+        new workbox.expiration.Plugin({
+          maxAgeSeconds: 10 * 24 * 60 * 60,
+          // Only cache 10 requests.
+        }),
+      ]
+    })
+  );
 
 }
 
@@ -34,15 +124,15 @@ if ('serviceWorker' in navigator) {
 
   console.log('*****************      Entering in custom-service-worker.js:')
 
-  self.addEventListener('fetch', function (event) {
+  // self.addEventListener('fetch', function (event) {
-    console.log('[Service Worker] Fetching something ....', event);
+  //   console.log('[Service Worker] Fetching something ....', event);
-    console.log('event.request.cache=', event.request.cache)
+  //   console.log('event.request.cache=', event.request.cache)
-    if (event.request.cache === 'only-if-cached' && event.request.mode !== 'same-origin') {
+  //   if (event.request.cache === 'only-if-cached' && event.request.mode !== 'same-origin') {
-      console.log('SAME ORIGIN!', event);
+  //     console.log('SAME ORIGIN!', event);
-      return;
+  //     return;
-    }
+  //   }
-    event.respondWith(fetch(event.request));
+  //   event.respondWith(fetch(event.request));
-  });
+  // });
 
 }
 

src/index.template.html

@@ -10,7 +10,7 @@
     <meta name="viewport"
           content="user-scalable=no, initial-scale=1, minimum-scale=1, width=device-width<% if (htmlWebpackPlugin.options.ctx.mode.cordova) { %>, viewport-fit=cover<% } %>">
 
-    <link rel="icon" href="/statics/freeplanet-logo.png" type="image/x-icon">
+    <link rel="icon" href="/statics/icons/favicon.ico" type="image/x-icon">
     <link rel="icon" type="image/png" sizes="32x32" href="/statics/icons/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/statics/icons/favicon-16x16.png">
     <script defer src="/statics/js/material.min.js"></script>