@cocreate/pwa 1.13.7 → 1.15.0

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+# [1.15.0](https://github.com/CoCreate-app/CoCreate-pwa/compare/v1.14.0...v1.15.0) (2023-11-12)
+
+
+### Bug Fixes
+
+* bump dependencies for latest features ([f786f81](https://github.com/CoCreate-app/CoCreate-pwa/commit/f786f812e921d612b932ddaa7b8d3088ac98a410))
+* relocated persit function out of init ([7725508](https://github.com/CoCreate-app/CoCreate-pwa/commit/7725508a023ece5b231387556849893b845ece73))
+
+
+### Features
+
+* observe actions=install ([d1f7aea](https://github.com/CoCreate-app/CoCreate-pwa/commit/d1f7aeae233cc8c3d531f66f982ef47e56280d92))
+
+# [1.14.0](https://github.com/CoCreate-app/CoCreate-pwa/compare/v1.13.7...v1.14.0) (2023-11-09)
+
+
+### Bug Fixes
+
+* meta name typo ([3c58a5e](https://github.com/CoCreate-app/CoCreate-pwa/commit/3c58a5ead6d509fb6cf63e57c0c3bc58e21a1e1d))
+* update crud methods ([1b5236c](https://github.com/CoCreate-app/CoCreate-pwa/commit/1b5236c3c91610d9420f96584fbd195eb9c90078))
+
+
+### Features
+
+* debounce an array of files served from cache and send to client ([4daa134](https://github.com/CoCreate-app/CoCreate-pwa/commit/4daa1344a06049667c22fa6dab8aa229678d726e))
+
 ## [1.13.7](https://github.com/CoCreate-app/CoCreate-pwa/compare/v1.13.6...v1.13.7) (2023-11-03)
 
 

package/demo/index.html

@@ -5,7 +5,7 @@
         <meta charset="utf-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta
-            key="viewport"
+            name="viewport"
             content="width=device-width; initial-scale=1; viewport-fit=cover" />
         <!-- import the webpage's stylesheet -->
         <link
@@ -23,7 +23,7 @@
         <meta name="apple-mobile-web-app-capable" content="yes" />
         <!--<hides status bar for a full screen experience omn ios only>-->
         <meta
-            key="apple-mobile-web-app-status-bar-style"
+            name="apple-mobile-web-app-status-bar-style"
             content="black-translucent" />
 
         <link rel="apple-touch-startup-image" href="ios-startup.png" />

package/docs/index.html

@@ -11,10 +11,10 @@
             sizes="32x32"
             href="https://cocreate.app/images/favicon.ico" />
         <meta
-            key="description"
+            name="description"
             content="A simple HTML5 and pure javascript component. Easy configuration using data-attributes and highly styleable." />
         <meta
-            key="keywords"
+            name="keywords"
             content="helper classes, utility classes, css framework, css library, inline style classes" />
         <meta name="robots" content="index,follow" />
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/pwa",
-  "version": "1.13.7",
+  "version": "1.15.0",
   "description": "A simple pwa component in vanilla javascript. Easily configured using HTML5 data-attributes and/or JavaScript API.",
   "keywords": [
     "pwa",
@@ -59,6 +59,6 @@
     "webpack-log": "^3.0.1"
   },
   "dependencies": {
-    "@cocreate/local-storage": "^1.10.8"
+    "@cocreate/local-storage": "^1.10.10"
   }
 }

package/src/index.js

@@ -15,14 +15,16 @@
  * along with this program. If not, see <https://www.gnu.org/licenses/>.
  ********************************************************************************/
 
-// Commercial Licensing Information:
-// For commercial use of this software without the copyleft provisions of the AGPLv3,
-// you must obtain a commercial license from CoCreate LLC.
-// For details, visit <https://cocreate.app/licenses/> or contact us at sales@cocreate.app.
+/**
+ * Commercial Licensing Information:
+ * For commercial use of this software without the copyleft provisions of the AGPLv3,
+ * you must obtain a commercial license from CoCreate LLC.
+ * For details, visit <https://cocreate.app/licenses/> or contact us at sales@cocreate.app.
+ */
 
+import observer from '@cocreate/observer'
 import localStorage from '@cocreate/local-storage'
 
-const button = document.querySelector('[actions*="install"]');
 
 /**
  * Warn the page must be served over HTTPS
@@ -37,41 +39,87 @@ const button = document.querySelector('[actions*="install"]');
 //     requireHTTPS.classList.remove('hidden');
 // }
 
-window.addEventListener('beforeinstallprompt', (event) => {
-    // console.log('👍', 'beforeinstallprompt', event);
-    // Stash the event so it can be triggered later.
-    window.deferredPrompt = event;
-    // Remove the 'hidden' class from the install button container
-    if (button)
-        button.removeAttribute('hidden');
-});
+function init() {
+    const button = document.querySelector('[actions*="install"]');
 
-if (button) {
-    button.addEventListener('click', async () => {
-        // console.log('👍', 'installBtn-clicked');
-        const promptEvent = window.deferredPrompt;
-        if (!promptEvent) {
-            // The deferred prompt isn't available.
-            return;
-        }
-        // Show the install prompt.
-        promptEvent.prompt();
-        // Log the result
-        const result = await promptEvent.userChoice;
-        console.log('👍', 'userChoice', result);
-        // Reset the deferred prompt variable, since
-        // prompt() can only be called once.
+    window.addEventListener('beforeinstallprompt', (event) => {
+        window.deferredPrompt = event;
+        if (button)
+            button.removeAttribute('hidden');
+    });
+
+    if (button) {
+        button.addEventListener('click', async () => {
+            // console.log('👍', 'installBtn-clicked');
+            const promptEvent = window.deferredPrompt;
+            if (!promptEvent) {
+                // The deferred prompt isn't available.
+                return;
+            }
+            // Show the install prompt.
+            promptEvent.prompt();
+            // Log the result
+            const result = await promptEvent.userChoice;
+            console.log('👍', 'userChoice', result);
+            // Reset the deferred prompt variable, since
+            // prompt() can only be called once.
+            window.deferredPrompt = null;
+            // Hide the install button.
+            button.setAttribute('hidden', '');
+        });
+    }
+
+    window.addEventListener('appinstalled', (event) => {
+        // console.log('👍', 'appinstalled', event);
+        // Clear the deferredPrompt so it can be garbage collected
         window.deferredPrompt = null;
-        // Hide the install button.
-        button.addAttribute('hidden', '');
     });
-}
 
-window.addEventListener('appinstalled', (event) => {
-    // console.log('👍', 'appinstalled', event);
-    // Clear the deferredPrompt so it can be garbage collected
-    window.deferredPrompt = null;
-});
+    if ('serviceWorker' in navigator) {
+        let workerPath
+        if (window.CoCreateConfig && window.CoCreateConfig.serviceWorker)
+            workerPath = window.CoCreateConfig.serviceWorker
+        else
+            workerPath = localStorage.getItem("serviceWorker") || '/service-worker.js'
+
+        localStorage.setItem("serviceWorker", workerPath);
+
+        let cache
+        if (window.CoCreateConfig && window.CoCreateConfig.cache)
+            cache = window.CoCreateConfig.cache
+        else
+            cache = localStorage.getItem("cache") || 'true'
+
+        localStorage.setItem("cache", cache);
+        workerPath += `?cache=${cache}`
+
+        let isPwa = true
+        if (workerPath) {
+            navigator.serviceWorker.getRegistrations().then(registrations => {
+                if (registrations.length === 0 || isPwa == true)
+                    window.addEventListener("load", function () {
+                        navigator.serviceWorker.getRegistration(workerPath).then(registration => {
+                            if (registration && registration.active && registration.active.scriptURL.includes(workerPath)) {
+                                console.log('Service Worker Active')
+                            } else {
+                                navigator.serviceWorker.register(workerPath)
+                                    .then(reg => {
+                                        reg.onupdatefound = () => {
+                                            const installingWorker = reg.installing;
+                                            installingWorker.onstatechange = () => {
+                                                // console.log('Service Worker', installingWorker.state);
+                                            }
+                                        }
+                                    })
+                                    .catch(err => console.log('SW ERROR', err));
+                            }
+                        });
+                    });
+            });
+
+        }
+    }
+}
 
 async function persistData() {
     if (navigator.storage && navigator.storage.persist) {
@@ -80,49 +128,14 @@ async function persistData() {
     }
 }
 
-if ('serviceWorker' in navigator) {
-    let workerPath
-    if (window.CoCreateConfig && window.CoCreateConfig.serviceWorker)
-        workerPath = window.CoCreateConfig.serviceWorker
-    else
-        workerPath = localStorage.getItem("serviceWorker") || '/service-worker.js'
-
-    localStorage.setItem("serviceWorker", workerPath);
-
-    let cache
-    if (window.CoCreateConfig && window.CoCreateConfig.cache)
-        cache = window.CoCreateConfig.cache
-    else
-        cache = localStorage.getItem("cache") || 'true'
-
-    localStorage.setItem("cache", cache);
-    workerPath += `?cache=${cache}`
-
-    let isPwa = true
-    if (workerPath) {
-        navigator.serviceWorker.getRegistrations().then(registrations => {
-            if (registrations.length === 0 || isPwa == true)
-                window.addEventListener("load", function () {
-                    navigator.serviceWorker.getRegistration(workerPath).then(registration => {
-                        if (registration && registration.active && registration.active.scriptURL.includes(workerPath)) {
-                            console.log('Service Worker Active')
-                        } else {
-                            navigator.serviceWorker.register(workerPath)
-                                .then(reg => {
-                                    reg.onupdatefound = () => {
-                                        const installingWorker = reg.installing;
-                                        installingWorker.onstatechange = () => {
-                                            // console.log('Service Worker', installingWorker.state);
-                                        }
-                                    }
-                                })
-                                .catch(err => console.log('SW ERROR', err));
-                        }
-                    });
-                });
-        });
-
+observer.init({
+    name: 'initPwa',
+    observe: ['addedNodes'],
+    target: '[actions="install"]',
+    callback: (mutation) => {
+        init()
     }
-}
+});
+
 
 export default { persistData }

package/src/service-worker.js

@@ -25,7 +25,6 @@
 const cacheName = "dynamic-v2";
 let organization_id = ""
 let storage = true
-let returnedFromCache = {};
 
 const queryString = self.location.search;
 const queryParams = new URLSearchParams(queryString);
@@ -42,7 +41,7 @@ self.addEventListener("activate", async (e) => {
 
 self.addEventListener("fetch", async (e) => {
     if (!(e.request.url.indexOf('http') === 0) || e.request.method === 'POST') return;
-    // TODO: check file header for cache policies and cache accorddingly
+
     e.respondWith(
         caches
             .match(e.request)
@@ -51,7 +50,8 @@ self.addEventListener("fetch", async (e) => {
                     const organization = cacheResponse.headers.get('organization')
                     const lastModified = cacheResponse.headers.get('last-modified')
 
-                    returnedFromCache[e.request.url] = { organization, lastModified }
+                    // returnedFromCache[e.request.url] = { organization, lastModified }
+                    sendCacheUpdate(e.request.url, organization, lastModified);
                     return cacheResponse;
                 } else {
                     const networkResponse = await fetch(e.request);
@@ -129,7 +129,7 @@ self.addEventListener('push', (event) => {
     // Handle WebSocket events
     socket.addEventListener('open', () => {
         // The WebSocket connection is open, send the message to the server
-        socket.send(JSON.stringify({ method: 'read.object', array: 'files', object: { _id }, uid: '' }));
+        socket.send(JSON.stringify({ method: 'object.read', array: 'files', object: { _id }, uid: '' }));
     });
 
     socket.addEventListener('message', (event) => {
@@ -160,6 +160,28 @@ self.addEventListener('push', (event) => {
     );
 });
 
+let returnedFromCache = {};
+let fetchTimeout = null;
+const sendCacheUpdate = (url, organization, lastModified) => {
+
+    returnedFromCache[url] = { organization, lastModified };
+
+    if (fetchTimeout) {
+        clearTimeout(fetchTimeout);
+    }
+    const self = this
+    fetchTimeout = setTimeout(() => {
+        self.clients.matchAll().then(clients => {
+            if (clients.length > 0) {
+                clients[0].postMessage({ action: 'checkCache', returnedFromCache });
+            }
+        });
+
+        fetchTimeout = null;
+        returnedFromCache = {};
+    }, 500);
+};
+
 // self.addEventListener('backgroundfetchsuccess', (event) => {
 //     const bgFetch = event.registration;