@cocreate/pwa 1.6.27 → 1.7.0

package/src/service-worker.js

@@ -0,0 +1,197 @@
+/********************************************************************************
+ * Copyright (C) 2023 CoCreate and Contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published
+ * by the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * 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.
+
+const cacheName = "dynamic-v2";
+let organization_id = ""
+let storage = true
+
+const queryString = self.location.search;
+const queryParams = new URLSearchParams(queryString);
+let cacheType = queryParams.get('cache');
+
+self.addEventListener("install", (e) => {
+    console.log('Service Worker Installing')
+    self.skipWaiting();
+});
+
+self.addEventListener("activate", async (e) => {
+    e.waitUntil(clients.claim());
+});
+
+self.addEventListener("fetch", async (e) => {
+    e.respondWith(
+        caches
+            .match(e.request)
+            .then(async (cacheResponse) => {
+                if (!(e.request.url.indexOf('http') === 0) || e.request.method === 'POST') return;
+
+                if (!storage) {
+                    const url = new URL(e.request.url);
+                    const hostname = url.host;
+                    const pathname = url.pathname;
+
+                    let file = await readFile({
+                        database: '5ff747727005da1c272740ab',
+                        array: 'files',
+                        filter: {
+                            path: hostname,
+                            host: '*'
+                        }
+                    });
+
+                    if (file) {
+                        // console.log('Host:', hostname);
+                        console.log('Pathname:', pathname);
+                        console.log('file', file)
+                    }
+
+                    if (file && file.object && file.object[0]) {
+                        file = file.object[0]
+
+                        const modifiedRequest = new Request(e.request, {
+                            headers: new Headers({
+                                'File-Content': file.src,
+                                'Content-Type': file['content-type']
+                            })
+                        });
+                        e.request = modifiedRequest
+                    }
+                }
+
+                if (!navigator.onLine && !!cacheResponse && cacheType !== 'false')
+                    return cacheResponse;
+                else {
+                    fetch(e.request).then((networkResponse) => {
+                        if (!organization_id)
+                            organization_id = networkResponse.headers.get('organization')
+
+                        storage = networkResponse.headers.get('storage')
+                        if (cacheType && cacheType !== 'false') {
+                            caches.open(cacheName).then((cache) => {
+                                if (networkResponse.status !== 206 && networkResponse.status !== 502) {
+                                    cache.put(e.request, networkResponse);
+                                    if (cacheType === 'reload' || cacheType === 'prompt') {
+                                        const networkModified = networkResponse.headers.get('last-modified');
+                                        const cacheModified = cacheResponse.headers.get('last-modified');
+                                        if (networkModified !== cacheModified) {
+                                            self.clients.matchAll().then((clients) => {
+                                                clients.forEach((client) => {
+                                                    client.postMessage({ action: 'cacheType', cacheType }); // Send a custom message
+                                                    console.log(`file ${cacheType} has been triggered`)
+                                                });
+                                            });
+                                        }
+                                    }
+                                }
+                            }).catch(() => {
+
+                            });
+                            if (!cacheResponse || cacheType === 'false' || cacheType === 'offline')
+                                return networkResponse.clone();
+                        }
+                    }).catch(() => {
+                        return caches.match('./offline.html');
+                    })
+                    if (!!cacheResponse && cacheType !== 'false' && cacheType !== 'offline')
+                        return cacheResponse;
+                }
+            })
+            .catch(function () {
+                console.log('Fetch failed retuned offline page! ')
+                return caches.match('./offline.html');
+            })
+    );
+});
+
+
+function readFile(data) {
+    return new Promise((resolve) => {
+        const request = indexedDB.open(data.database);
+
+        request.onsuccess = function () {
+            const db = request.result
+
+            const transaction = db.transaction(data.array, "readonly");
+            const objectStore = transaction.objectStore(data.array);
+            const cursorRequest = objectStore.openCursor();
+
+            cursorRequest.onsuccess = function () {
+                const cursor = cursorRequest.result;
+                if (cursor) {
+                    const file = cursor.value;
+                    if (!file || !file.src || !file.path || !file.host)
+                        cursor.continue();
+                    else if (file.path !== data.filter.path || !file.host.includes(data.filter.host))
+                        cursor.continue();
+                    else {
+                        db.close()
+                        return resolve(file);
+                    }
+                } else {
+                    // Resolve the Promise when cursor is finished
+                    db.close()
+                    resolve();
+                }
+            };
+
+            cursorRequest.onerror = function () {
+                console.error("Cursor error:", cursorRequest.error);
+                db.close()
+                resolve();
+            };
+
+        };
+
+        request.onerror = function (event) {
+            reject(event.target.error);
+        };
+
+    })
+}
+
+self.addEventListener('message', function (event) {
+    if (event.data === 'getOrganization')
+        event.source.postMessage(organization_id);
+});
+
+// self.addEventListener('backgroundfetchsuccess', (event) => {
+//     const bgFetch = event.registration;
+
+//     event.waitUntil(async function() {
+//       // Create/open a cache.
+//       const cache = await caches.open(cacheName);
+//       // 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/webpack.config.js

@@ -1,84 +1,91 @@
 const path = require("path")
 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")
 
-module.exports = {
-  entry: {
-    "CoCreate-pwa": "./src/index.js",
-  },
-  output: {
-    path: path.resolve(__dirname, "dist"),
-    filename: isProduction ? "[name].min.js" : "[name].js",
-    libraryTarget: "umd",
-    libraryExport: "default",
-    library: ["CoCreate", "pwa"],
-    globalObject: "this",
-  },
+module.exports = (env, argv) => {
+    let isProduction = false
+    if (argv.mode === 'production')
+        isProduction = true
 
-  plugins: [
-    new CleanWebpackPlugin(),
-    new MiniCssExtractPlugin({
-      filename: "[name].css",
-    }),
-  ],
-  // Default mode for Webpack is production.
-  // Depending on mode Webpack will apply different things
-  // on final bundle. For now we don't need production's JavaScript
-  // minifying and other thing so let's set mode to development
-  mode: isProduction ? "production" : "development",
-  module: {
-    rules: [
-      {
-        test: /.js$/,
-        exclude: /(node_modules)/,
-        use: {
-          loader: "babel-loader",
-          options: {
-            plugins: ["@babel/plugin-transform-modules-commonjs"],
-          },
+    const config = {
+        entry: {
+            "CoCreate-pwa": "./src/index.js",
+            "service-worker": "./src/service-worker.js",
         },
-      },
-      {
-        test: /.css$/i,
-        use: [
-          { loader: "style-loader", options: { injectType: "linkTag" } },
-          "file-loader",
+        output: {
+            path: path.resolve(__dirname, "dist"),
+            filename: isProduction ? "[name].min.js" : "[name].js",
+            libraryTarget: "umd",
+            libraryExport: "default",
+            library: ["CoCreate", "pwa"],
+            globalObject: "this",
+        },
+
+        plugins: [
+            new CleanWebpackPlugin(),
+            new MiniCssExtractPlugin({
+                filename: "[name].css",
+            }),
         ],
-      },
-    ],
-  },
+        // Default mode for Webpack is production.
+        // Depending on mode Webpack will apply different things
+        // on final bundle. For now we don't need production's JavaScript
+        // minifying and other thing so let's set mode to development
+        mode: isProduction ? "production" : "development",
+        module: {
+            rules: [
+                {
+                    test: /.js$/,
+                    exclude: /(node_modules)/,
+                    use: {
+                        loader: "babel-loader",
+                        options: {
+                            plugins: ["@babel/plugin-transform-modules-commonjs"],
+                        },
+                    },
+                },
+                {
+                    test: /.css$/i,
+                    use: [
+                        { loader: "style-loader", options: { injectType: "linkTag" } },
+                        "file-loader",
+                    ],
+                },
+            ],
+        },
 
-  // add source map
-  ...(isProduction ? {} : { devtool: "eval-source-map" }),
+        // add source map
+        ...(isProduction ? {} : { devtool: "eval-source-map" }),
 
-  optimization: {
-    minimize: true,
-    minimizer: [
-      new TerserPlugin({
-        extractComments: true,
-        // cache: true,
-        parallel: true,
-        // sourceMap: true, // Must be set to true if using source-maps in production
-        terserOptions: {
-          // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
-          // extractComments: 'all',
-          compress: {
-            drop_console: true,
-          },
-        },
-      }),
-    ],
-    splitChunks: {
-      chunks: "all",
-      minSize: 200,
-      // maxSize: 99999,
-      //minChunks: 1,
+        optimization: {
+            minimize: true,
+            minimizer: [
+                new TerserPlugin({
+                    extractComments: true,
+                    // cache: true,
+                    parallel: true,
+                    // sourceMap: true, // Must be set to true if using source-maps in production
+                    terserOptions: {
+                        // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
+                        // extractComments: 'all',
+                        compress: {
+                            drop_console: true,
+                        },
+                    },
+                }),
+            ],
+            splitChunks: {
+                chunks: "all",
+                minSize: 200,
+                // maxSize: 99999,
+                //minChunks: 1,
 
-      cacheGroups: {
-        defaultVendors: false,
-      },
-    },
-  },
-}
+                cacheGroups: {
+                    defaultVendors: false,
+                },
+            },
+        },
+    }
+    return config
+}

package/demo/sw.js

@@ -1,112 +0,0 @@
-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 = []
-const cacheType = 'cache'
-const requestMap = new Map()
-
-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() 
-        e.waitUntil(clients.claim());
-});
-
-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;
-            
-            if (cacheType == 'cache' && !!cachesObj) {
-                // console.log('returned from cache')
-                requestMap.set(cachesObj, '')
-                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(() => {
-
-                    });
-                }).catch(() => {
-                    return caches.match('./offline.html');
-                })
-                return cachesObj;
-            } else {
-                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!' });
-    }());
-  });