- Service Worker: Save on IndexDb and Sync to send after to the DB.

- Insert record on MongoDb, POST, GET.

src-pwa/custom-service-worker.js

@@ -6,15 +6,24 @@
 
 // Questo è il swSrc
 
-console.log('___________________________  PAO: this is my custom service worker');
+console.log('05 ___________________________  PAO: this is my custom service worker');
+
+importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.0.0/workbox-sw.js'); //++Todo: Replace with local workbox.js
+importScripts('js/idb.js');
+importScripts('js/utility.js');
 
-importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.0.0/workbox-sw.js');
 
 if (!workbox) {
-  workbox = new self.WorkboxSW();
+  let workbox = new self.WorkboxSW();
+
 }
 
 if (workbox) {
+  // const url = new URL(location.href);
+  // const debug = url.searchParams.has('debug');
+  const debug = false;
+  workbox.setConfig({ debug: debug });
+
   workbox.core.setCacheNameDetails({ prefix: "freeplanet" });
 
   /**
@@ -28,18 +37,49 @@ if (workbox) {
 
   // workbox.routing.registerRoute(/^http/, workbox.strategies.networkFirst(), 'GET');
 
+  workbox.routing.registerRoute(
+    /\.(?:png|gif|jpg|jpeg|svg)$/,
+    workbox.strategies.staleWhileRevalidate({
+      cacheName: 'images',
+      plugins: [
+        new workbox.expiration.Plugin({
+          maxEntries: 60,
+          maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
+        }),
+      ],
+    }),
+  );
+
   workbox.routing.registerRoute(
     new RegExp(/.*(?:googleapis|gstatic)\.com.*$/),
     workbox.strategies.staleWhileRevalidate({
       cacheName: 'google-fonts',
       plugins: [
         new workbox.expiration.Plugin({
-          maxAgeSeconds: 30 * 24 * 60 * 60,
+          maxEntries: 30,
         }),
       ]
     })
   );
 
+  workbox.routing.registerRoute('http://localhost:3000/todos', function (args) {
+    return fetch(args.event.request)
+      .then(function (res) {
+        var clonedRes = res.clone();
+        clearAllData('todos')
+          .then(function () {
+            return clonedRes.json();
+          })
+          .then(function (data) {
+            for (let key in data) {
+              writeData('todos', data[key])
+            }
+          });
+        return res;
+      });
+  });
+
+
   workbox.routing.registerRoute(
     new RegExp(/.*\/(?:statics\/icons).*$/),
     workbox.strategies.cacheFirst({
@@ -118,12 +158,37 @@ if (workbox) {
     })
   );
 
+  // workbox.core.setLogLevel(workbox.core.LOG_LEVELS.debug);
+
+  workbox.routing.registerRoute(
+    new RegExp('http://localhost:8080/todos'),
+    function (args) {
+      return fetch(args.event.request)
+        .then(function (res) {
+          console.log('*******  fetch: ', args.event)
+          var clonedRes = res.clone();
+          clearAllData('todos')
+            .then(function () {
+              return clonedRes.json();
+            })
+            .then(function (data) {
+              for (let key in data) {
+                writeData('todos', data[key])
+              }
+            });
+          return res
+        })
+    }
+  );
+
 }
 
 if ('serviceWorker' in navigator) {
 
   console.log('*****************      Entering in custom-service-worker.js:')
 
+}
+
   // self.addEventListener('fetch', function (event) {
   //   console.log('[Service Worker] Fetching something ....', event);
   //   console.log('event.request.cache=', event.request.cache)
@@ -131,8 +196,61 @@ if ('serviceWorker' in navigator) {
   //     console.log('SAME ORIGIN!', event);
   //     return;
   //   }
-  //   event.respondWith(fetch(event.request));
+  //   event.respondWith(caches.match(event.request));
   // });
 
-}
+
+  self.addEventListener('sync', function (event) {
+    console.log('[Service Worker] Background syncing', event);
+
+    if (event.tag === 'sync-new-todos') {
+      console.log('[Service Worker] Syncing new Todos');
+
+      let authHeader = []
+      authHeader['content-type'] = 'application/json';
+      authHeader['accept-language'] = 'en';
+      // authHeader.append('x-auth', mytok)
+
+      event.waitUntil(
+        readAllData('sync_todos')
+          .then(function (data) {
+            for (var dt of data) {
+              // var postData = new FormData();
+              // postData.append('_id', dt._id);
+              // postData.append('title', dt.title);
+              // postData.append('location', dt.location);
+              // postData.append('rawLocationLat', dt.rawLocation.lat);
+              // postData.append('rawLocationLng', dt.rawLocation.lng);
+              // postData.append('file', dt.picture, dt._id + '.png');
+
+              console.log('Data to Send 6: ', JSON.stringify(dt))
+
+              // Update myTodo to the server
+              fetch('http://localhost:3000/todos', {
+                method: 'POST',
+                headers: {
+                  'Content-Type': 'application/json',
+                  'Accept': 'application/json'
+                },
+                // mode: 'no-cors',
+                mode: 'cors',
+                body: JSON.stringify(dt)
+              })
+                .then(function (resData) {
+                  console.log('Sent data Todo:', resData);
+                  if (resData.ok) {
+                      deleteItemFromData('sync_todos', dt.id);
+                  }
+                })
+                .catch(function (err) {
+                  console.log('Error while sending data', err);
+                });
+            }
+
+          })
+      );
+    }
+  });
+
+// }