@cocreate/pwa 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [1.1.0](https://github.com/CoCreate-app/CoCreate-pwa/compare/v1.0.0...v1.1.0) (2022-09-16)
+
+
+### Features
+
+* dynamically cache files for offline support and keep them current when online ([0ff4e22](https://github.com/CoCreate-app/CoCreate-pwa/commit/0ff4e222a766c1f1c5bc78d61b18420bf46d6e32))
+
 # 1.0.0 (2021-11-01)
 
 

package/{src → demo}/css/style.css

@@ -25,7 +25,7 @@ h1 {
     width: 100%;
 }
 
-#butCache,
+#cacheBtn,
 #installContainer button {
     background-color: inherit;
     border: 1px solid white;

package/{src/test2.html → demo/index.html}

@@ -8,29 +8,27 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <!-- import the webpage's stylesheet -->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
-    <link rel="stylesheet" href="css/style.css" />
-    <link rel="stylesheet" href="css/test2.css" />
+    <link rel="stylesheet" href="./css/style.css" />
     <!-- Manifest -->
-    <link rel="manifest" href="manifest.json" />
-    <!--<link rel="manifest" href="./manifest.webmanifest">  -->
+    <!-- <link rel="manifest" href="./manifest.json" /> -->
+    <!--<meta name="theme-color" content="red">-->
 </head>
 
-<body class="test2-bg-color">
-    <h1>InstallableR - TEST 2</h1>
+<body>
     <nav class="navbar navbar-expand-sm bg-dark">
         <!-- Links -->
         <ul class="navbar-nav">
             <li class="nav-item active">
-                <a class="nav-link" href="./index.html">Home</a>
+                <a class="nav-link" href="#">Home</a>
             </li>
             <li class="nav-item">
-                <a class="nav-link" href="./test1.html">Test1</a>
+                <a class="nav-link" href="./pages/test1.html">Test1</a>
             </li>
             <li class="nav-item">
-                <a class="nav-link" href="#">Test 2</a>
+                <a class="nav-link" href="./pages/test2.html">Test 2</a>
             </li>
             <li class="nav-item">
-                <a class="nav-link" href="./test3.html">Test 3</a>
+                <a class="nav-link" href="./pages/test3.html">Test 3</a>
             </li>
         </ul>
     </nav>
@@ -40,21 +38,21 @@
     </p>
 
     <p>
-        Make me installable, follow the
+        To Make me installable, follow the
         <a href="https://web.dev/codelab-make-installable/">instructions</a> here.
     </p>
 
+    <button id="cacheBtn">Uncache</button>
+
     <!-- Install button, hidden by default -->
     <div id="installContainer" class="hidden">
-        <button id="butInstall" type="button">Install</button>
+        <button id="installBtn" type="button">Install</button>
     </div>
 
-    <!-- include the Glitch button to show what the webpage is about and
-          to make it easier for folks to view source and remix -->
-    <div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
-    <script src="https://button.glitch.me/button.js"></script>
-    <!-- import the webpage's javascript file -->
-    <script src="js/app.js" defer></script>
+
+    <!-- <script src="../src/index.js" defer></script> -->
+    <script src="../dist/CoCreate-pwa.js" defer></script>
+
 </body>
 
 </html>

package/{src → demo}/pages/test1.html

@@ -9,15 +9,11 @@
     <!-- import the webpage's stylesheet -->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
     <link rel="stylesheet" href="../css/style.css" />
-    <link rel="stylesheet" href="../css/test1.css" />
     <!-- Manifest -->
     <link rel="manifest" href="../manifest.json" />
-    <!--<link rel="manifest" href="./manifest.webmanifest">  -->
 </head>
 
 <body class="test1-bg-color">
-
-    <h1>InstallableR - TEST 1</h1>
     <nav class="navbar navbar-expand-sm bg-dark">
         <!-- Links -->
         <ul class="navbar-nav">
@@ -48,15 +44,10 @@
 
     <!-- Install button, hidden by default -->
     <div id="installContainer" class="hidden">
-        <button id="butInstall" type="button">Install</button>
+        <button id="installBtn" type="button">Install</button>
     </div>
 
-    <!-- include the Glitch button to show what the webpage is about and
-          to make it easier for folks to view source and remix -->
-    <div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
-    <script src="https://button.glitch.me/button.js"></script>
-    <!-- import the webpage's javascript file -->
-    <script src="../js/app.js" defer></script>
+    <script src="../../dist/CoCreate-pwa.js" defer></script>
 </body>
 
 </html>

package/{src → demo}/pages/test2.html

@@ -12,11 +12,9 @@
     <link rel="stylesheet" href="../css/test2.css" />
     <!-- Manifest -->
     <link rel="manifest" href="../manifest.json" />
-    <!--<link rel="manifest" href="./manifest.webmanifest">  -->
 </head>
 
 <body class="test2-bg-color">
-    <h1>InstallableR - TEST 2</h1>
     <nav class="navbar navbar-expand-sm bg-dark">
         <!-- Links -->
         <ul class="navbar-nav">
@@ -46,15 +44,10 @@
 
     <!-- Install button, hidden by default -->
     <div id="installContainer" class="hidden">
-        <button id="butInstall" type="button">Install</button>
+        <button id="installBtn" type="button">Install</button>
     </div>
 
-    <!-- include the Glitch button to show what the webpage is about and
-          to make it easier for folks to view source and remix -->
-    <div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
-    <script src="https://button.glitch.me/button.js"></script>
-    <!-- import the webpage's javascript file -->
-    <script src="../js/app.js" defer></script>
+    <script src="../../dist/CoCreate-pwa.js" defer></script>
 </body>
 
 </html>

package/{src → demo}/pages/test3.html

@@ -16,7 +16,6 @@
 </head>
 
 <body class="test3-bg-color">
-    <h1>InstallableR - TEST 3</h1>
     <nav class="navbar navbar-expand-sm bg-dark">
         <!-- Links -->
         <ul class="navbar-nav">
@@ -46,15 +45,11 @@
 
     <!-- Install button, hidden by default -->
     <div id="installContainer" class="hidden">
-        <button id="butInstall" type="button">Install</button>
+        <button id="installBtn" type="button">Install</button>
     </div>
 
-    <!-- include the Glitch button to show what the webpage is about and
-          to make it easier for folks to view source and remix -->
-    <div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
-    <script src="https://button.glitch.me/button.js"></script>
-    <!-- import the webpage's javascript file -->
-    <script src="../js/app.js" defer></script>
+    <script src="../../dist/CoCreate-pwa.js" defer></script>
+    
 </body>
 
 </html>

package/demo/sw.js

@@ -0,0 +1,99 @@
+const CACHE_STATIC_NAME = "static-v1";
+const CACHE_DYNAMIC_NAME = "dynamic-v2";
+const CACHE_INMUTABLE_NAME = "inmutable-v1";
+const CACHE_TEMP = 'temp-cache';
+const CACHE_DYNAMIC_LIMIT = 50;
+const fetchedMap = []
+
+
+function deleteCache(key) {
+    return caches.delete(key);
+}
+
+self.addEventListener("install", (e) => {
+    console.log('Service Worker Installing')
+
+    self.skipWaiting();
+    // caches.open(CACHE_DYNAMIC_NAME).then((cache) => {
+    //     cache.keys().then((keys) => {
+    //         keys.forEach(key => {
+    //             fetchedMap.push(key.url)
+    //         })
+    //         deleteCache()
+    //     })
+    // })
+});
+
+self.addEventListener("activate", async (e) => {
+    // console.log('sw activate Event!')
+    // const bgFetch = await self.registration.backgroundFetch.fetch(new Date().toISOString(), fetchedMap);
+    // console.log('backgfetch', bgFetch)
+
+    // e.waitUntil(updateCache())
+        // updateCache() 
+
+});
+
+self.addEventListener("fetch", (e) => {
+    if (!(e.request.url.indexOf('http') === 0)) return;
+    e.respondWith(
+        caches
+        .match(e.request)
+        .then((cachesObj) => {
+            if (!navigator.onLine && !!cachesObj) {
+                return cachesObj;
+            }
+            return fetch(e.request)
+                .then((newResp) => {
+                    caches
+                        .open(CACHE_DYNAMIC_NAME)
+                        .then((cache) => {
+                            cache.put(e.request, newResp);
+                            // cleanCache(CACHE_DYNAMIC_NAME, CACHE_DYNAMIC_LIMIT);
+                        })
+                        .catch(() => {});
+                    return newResp.clone();
+                })
+                .catch(() => {
+                    return caches.match('./offline.html');
+                })
+        })
+        .catch(function() {
+            console.log('Fetch failed retuned offline page! ')
+            return caches.match('./offline.html');
+        })
+    );
+});
+
+async function updateCache(){
+    console.log('updateCache!')
+    caches.open(CACHE_DYNAMIC_NAME)
+        .then((cache) => {
+            console.log('added', fetchedMap)
+            cache.addAll(fetchedMap)
+        }
+    )
+}
+
+self.addEventListener('backgroundfetchsuccess', (event) => {
+    const bgFetch = event.registration;
+  
+    event.waitUntil(async function() {
+      // Create/open a cache.
+      const cache = await caches.open(CACHE_DYNAMIC_NAME);
+      // Get all the records.
+      const records = await bgFetch.matchAll();
+      // Copy each request/response across.
+      const promises = records.map(async (record) => {
+        const response = await record.responseReady;
+        console.log('putting ')
+        await cache.put(record.request, response);
+      });
+  
+      // Wait for the copying to complete
+      await Promise.all(promises);
+  
+      // Update the progress notification.
+    //   event.updateUI({ title: 'Episode 5 ready to listen!' });
+    }());
+  });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/pwa",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A simple pwa component in vanilla javascript. Easily configured using HTML5 data-attributes and/or JavaScript API.",
   "keywords": [
     "pwa",
@@ -40,14 +40,18 @@
   },
   "homepage": "https://cocreate.app/docs/pwa",
   "devDependencies": {
-    "@babel/core": "^7.12.10",
-    "@babel/preset-env": "^7.12.11",
-    "babel-loader": "^8.2.2",
+    "@babel/core": "^7.9.6",
+    "@babel/preset-env": "^7.9.6",
+    "babel-loader": "^8.1.0",
     "clean-webpack-plugin": "^3.0.0",
+    "file-loader": "^6.2.0",
     "html-webpack-plugin": "^4.5.0",
+    "mini-css-extract-plugin": "^1.5.0",
+    "style-loader": "^2.0.0",
+    "terser-webpack-plugin": "^5.1.1",
     "uglifyjs-webpack-plugin": "^2.2.0",
-    "webpack": "^5.14.0",
-    "webpack-cli": "^4.3.1",
+    "webpack": "^5.24.4",
+    "webpack-cli": "^4.5.0",
     "webpack-log": "^3.0.1"
   },
   "dependencies": {

package/src/cache.js

@@ -0,0 +1,44 @@
+const cacheBtn = document.getElementById('cacheBtn');
+
+function deleteCache(cache) {
+    if ('serviceWorker' in navigator) {
+        return caches.delete(key);
+        
+        // caches.keys().then(function(cacheNames) {
+        //     cacheNames.forEach(function(cacheName) {
+        //         if (cacheName == cache)
+        //             caches.delete(cacheName);
+        //     });
+        // });
+    }
+}
+
+// function cleanCache(cacheName, numeroItems) {
+//     caches.open(cacheName).then((cache) => {
+//         return cache.keys().then((keys) => {
+//             if (keys.length > numeroItems) {
+//                 cache.delete(keys[0]).then(cleanCache(cacheName, numeroItems));
+//             }
+//         });
+//     });
+// }
+
+function deleteFile(cacheName, fileName) {
+    if ('serviceWorker' in navigator) {
+        caches.open(cacheName).then(function(cache) {
+            cache.delete(fileName).then(function(response) {
+                return response
+                // console.log(cacheName, fileName, response)
+            });
+        })
+    }
+}
+
+
+if (cacheBtn) {
+    cacheBtn.addEventListener('click', function() {
+        deleteFile('dynamic-v2', '/CoCreate-components/CoCreate-pwa/src/index.js');
+    });
+}
+
+export {deleteCache, deleteFile}

package/src/{js/app.js → index.js}

@@ -1,18 +1,8 @@
-const divInstall = document.getElementById('installContainer');
-const butInstall = document.getElementById('butInstall');
-const butCache = document.getElementById('butCache');
+import cache from './cache.js'
 
-/* Only register a service worker if it's supported */
-// if ('serviceWorker' in navigator) {
-//     //navigator.serviceWorker.register('service-worker.js').then(console.log('success')).catch(console.log('fail'));
-//     window.addEventListener("load", function() {
-//         navigator.serviceWorker
-//             .register("sw.js")
-//             .then(res => console.log("service worker registered"))
-//             .catch(err => console.log("service worker not registered", err))
-//     })
-// }
 
+const installContainer = document.getElementById('installContainer');
+const installBtn = document.getElementById('installBtn');
 
 /**
  * Warn the page must be served over HTTPS
@@ -32,11 +22,11 @@ window.addEventListener('beforeinstallprompt', (event) => {
     // Stash the event so it can be triggered later.
     window.deferredPrompt = event;
     // Remove the 'hidden' class from the install button container
-    divInstall.classList.toggle('hidden', false);
+    installContainer.classList.toggle('hidden', false);
 });
 
-butInstall.addEventListener('click', async() => {
-    console.log('👍', 'butInstall-clicked');
+installBtn.addEventListener('click', async() => {
+    console.log('👍', 'installBtn-clicked');
     const promptEvent = window.deferredPrompt;
     if (!promptEvent) {
         // The deferred prompt isn't available.
@@ -51,7 +41,7 @@ butInstall.addEventListener('click', async() => {
     // prompt() can only be called once.
     window.deferredPrompt = null;
     // Hide the install button.
-    divInstall.classList.toggle('hidden', true);
+    installContainer.classList.toggle('hidden', true);
 });
 
 window.addEventListener('appinstalled', (event) => {
@@ -60,27 +50,31 @@ window.addEventListener('appinstalled', (event) => {
     window.deferredPrompt = null;
 });
 
-function uncacheFileInCache(cacheName, fileName) {
-    if ('serviceWorker' in navigator) {
-        caches.open(cacheName).then(function(cache) {
-            cache.delete(fileName).then(function(response) {
-
-            });
-        })
-    }
-}
+let workerPath = 'sw.js'
+// if (config && config.serviceWorker)
+//     workerPath = config.serviceWorker
 
-function clearCache(cache) {
+window.addEventListener("load", function(event) {
     if ('serviceWorker' in navigator) {
-        caches.keys().then(function(cacheNames) {
-            cacheNames.forEach(function(cacheName) {
-                if (cacheName == cache)
-                    caches.delete(cacheName);
-            });
+        navigator.serviceWorker.getRegistration(workerPath).then(registration => {
+            if(registration && registration.active) { 
+                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));
+
+            }
         });
     }
-}
+});
+
 
-butCache.addEventListener('click', async() => {
-    uncacheFileInCache('dynamic-v2', './src/css/style.css');
-});
+export default {cache}

package/webpack.config.js

@@ -3,15 +3,14 @@ const TerserPlugin = require("terser-webpack-plugin")
 const MiniCssExtractPlugin = require("mini-css-extract-plugin")
 let isProduction = process.env.NODE_ENV === "production"
 const { CleanWebpackPlugin } = require("clean-webpack-plugin")
-const HtmlWebpackPlugin = require("html-webpack-plugin")
 
 module.exports = {
   entry: {
-    "CoCreate-pwa": "./src/CoCreate-pwa.js",
+    "CoCreate-pwa": "./src/index.js",
   },
   output: {
     path: path.resolve(__dirname, "dist"),
-    filename: isProduction ? "[name].min.js" : "[name][hash].js",
+    filename: isProduction ? "[name].min.js" : "[name].js",
     libraryTarget: "umd",
     libraryExport: "default",
     library: ["CoCreate", "pwa"],
@@ -24,10 +23,6 @@ module.exports = {
     new MiniCssExtractPlugin({
       filename: "[name].css",
     }),
-
-    new HtmlWebpackPlugin({
-      template: "./src/index.html",
-    }),
   ],
   // Default mode for Webpack is production.
   // Depending on mode Webpack will apply different things
@@ -81,6 +76,10 @@ module.exports = {
       minSize: 200,
       // maxSize: 99999,
       //minChunks: 1,
+
+      cacheGroups: {
+        defaultVendors: false,
+      },
     },
   },
 }

package/.vscode/settings.json

@@ -1,2 +0,0 @@
-{
-}

package/src/.jshintrc

@@ -1,75 +0,0 @@
-{
-    "maxerr"        : 50,
-    "bitwise"       : true,
-    "camelcase"     : false,
-    "curly"         : false,
-    "eqeqeq"        : true,
-    "forin"         : true,
-    "freeze"        : true,
-    "immed"         : false,
-    "latedef"       : false,
-    "newcap"        : false,
-    "noarg"         : true,
-    "noempty"       : true,
-    "nonbsp"        : true,
-    "nonew"         : false,
-    "plusplus"      : false,
-    "quotmark"      : false,
-    "undef"         : true,
-    "unused"        : true,
-    "strict"        : false,
-    "maxparams"     : false,
-    "maxdepth"      : false,
-    "maxstatements" : false,
-    "maxcomplexity" : false,
-    "maxlen"        : false,
-    "varstmt"       : false,
-    "asi"           : false,
-    "boss"          : false,
-    "debug"         : false,
-    "eqnull"        : false,
-    "esversion"     : 6,
-    "moz"           : false,
-    "evil"          : false,
-    "expr"          : false,
-    "funcscope"     : false,
-    "globalstrict"  : false,
-    "iterator"      : false,
-    "lastsemic"     : false,
-    "laxbreak"      : false,
-    "laxcomma"      : false,
-    "loopfunc"      : false,
-    "multistr"      : false,
-    "noyield"       : false,
-    "notypeof"      : false,
-    "proto"         : false,
-    "scripturl"     : false,
-    "shadow"        : false,
-    "sub"           : false,
-    "supernew"      : false,
-    "validthis"     : false,
-    "browser"       : true,
-    "browserify"    : false,
-    "couch"         : false,
-    "devel"         : true,
-    "dojo"          : false,
-    "jasmine"       : false,
-    "jquery"        : false,
-    "mocha"         : true,
-    "mootools"      : false,
-    "node"          : false,
-    "nonstandard"   : false,
-    "phantom"       : false,
-    "prototypejs"   : false,
-    "qunit"         : false,
-    "rhino"         : false,
-    "shelljs"       : false,
-    "typed"         : false,
-    "worker"        : false,
-    "wsh"           : false,
-    "yui"           : false,
-    "globals"       : {
-        "self"   : true,
-        "caches" : true
-    }
-}