@cocreate/pwa 1.1.1 → 1.2.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [1.2.0](https://github.com/CoCreate-app/CoCreate-pwa/compare/v1.1.1...v1.2.0) (2022-09-28)
+
+
+### Features
+
+* updates serviceWorker if online and if serviceWorker has changed. ([cc74fb6](https://github.com/CoCreate-app/CoCreate-pwa/commit/cc74fb619ace71128c1df5d4e60e5baaf04f46df))
+
 ## [1.1.1](https://github.com/CoCreate-app/CoCreate-pwa/compare/v1.1.0...v1.1.1) (2022-09-16)
 
 

package/demo/index.html

@@ -2,16 +2,31 @@
 <html lang="en">
 
 <head>
-    <title>Hello!</title>
+    <title>Im the page title</title>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width; initial-scale=1; viewport-fit=cover" />
     <!-- 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" />
     <!-- Manifest -->
-    <!-- <link rel="manifest" href="./manifest.json" /> -->
+    <link rel="manifest" href="./manifest.json" />
     <!--<meta name="theme-color" content="red">-->
+   
+    <!--<non-transparent PNG icon sized at 180 by 180 >-->
+    <link rel="apple-touch-icon" href="/images/icons/ios.png">
+    
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <!--<hides status bar for a full screen experience omn ios only>-->
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+
+    <link rel="apple-touch-startup-image" href="ios-startup.png">
+
+    <link rel="apple-touch-startup-image" href="ios-startup.png" media="orientation: portrait">
+    <link rel="apple-touch-startup-image" href="ios-startup-landscape.png" media="orientation: landscape">
+
+
 </head>
 
 <body>
@@ -45,9 +60,9 @@
     <button id="cacheBtn">Uncache</button>
 
     <!-- Install button, hidden by default -->
-    <div id="installContainer" class="hidden">
-        <button id="installBtn" type="button">Install</button>
-    </div>
+
+    <button actions="install" type="button" hidden>Install</button>
+
 
 
     <!-- <script src="../src/index.js" defer></script> -->

package/demo/manifest.json

@@ -1,7 +1,7 @@
 {
     "short_name": "CoCreate",
-    "name": "CoCreate - Build your business in miutes",
-    "description": "Your information",
+    "name": "CoCreate",
+    "description": "Build your business in miutes",
     "orientation": "portrait-primary",
 
     "icons": [{
@@ -42,11 +42,35 @@
         {
             "src": "./images/icons/icon-512x512.png",
             "type": "image/png",
-            "sizes": "512x512"
+            "sizes": "512x512",
+            "purpose": "maskable"
         }
     ],
-    "start_url": "index.html",
+    "start_url": "/",
     "background_color": "whitesmoke",
-    "display": "standalone",
-    "theme_color": "blue"
+    "display": "Fullscreen",
+    "theme_color": "blue",
+    "screenshots": [{
+        "src": "./images/screenshot-1.png",
+        "type": "image/png",
+        "sizes": "512x512"
+    }],
+    "categories": "productivity",
+    "file_handlers": [
+        {
+            "action": "/open-file",
+            "accept": {
+                "text/*": [".txt"]
+            }
+        }
+   ],
+   "share_target": {
+    "action": "/receive-share/",
+    "method": "GET",
+    "params": {
+       "title": "shared_title",
+       "url": "shared_url"
+    }
+ }
+
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/pwa",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "A simple pwa component in vanilla javascript. Easily configured using HTML5 data-attributes and/or JavaScript API.",
   "keywords": [
     "pwa",

package/src/badging.js

@@ -0,0 +1,10 @@
+// Set the badge
+const unreadCount = 24;
+navigator.setAppBadge(unreadCount).catch((error) => {
+  //Do something with the error.
+});
+
+// Clear the badge
+navigator.clearAppBadge().catch((error) => {
+  // Do something with the error.
+});

package/src/contact-picker.js

@@ -0,0 +1,11 @@
+
+async function getContacts() {
+    const properties = ['name', 'email', 'tel'];
+    const options = { multiple: true };
+    try {
+      const contacts = await navigator.contacts.select(properties, options);
+      console.log(contacts);
+    } catch (ex) {
+      // Handle any errors here.
+    }
+ }

package/src/file-share.js

@@ -0,0 +1,15 @@
+// https://web.dev/learn/pwa/os-integration/
+// Have the user select a file.
+const [ handle ] = await window.showOpenFilePicker();
+// Get the File object from the handle.
+const file = await handle.getFile();
+// Get the file content.
+// Also available, slice(), stream(), arrayBuffer()
+const content = await file.text();
+
+// Make a writable stream from the handle.
+const writable = await handle.createWritable();
+// Write the contents of the file to the stream.
+await writable.write(contents);
+// Close the file and write the contents to disk.
+await writable.close();

package/src/index.js

@@ -1,8 +1,6 @@
 import cache from './cache.js'
 
-
-const installContainer = document.getElementById('installContainer');
-const installBtn = document.getElementById('installBtn');
+const button = document.querySelector('[actions*="install"]');
 
 /**
  * Warn the page must be served over HTTPS
@@ -10,39 +8,42 @@ const installBtn = document.getElementById('installBtn');
  * Installability requires a service worker with a fetch event handler, and
  * if the page isn't served over HTTPS, the service worker won't load.
  */
-if (window.location.protocol === 'http:') {
-    const requireHTTPS = document.getElementById('requireHTTPS');
-    const link = requireHTTPS.querySelector('a');
-    link.href = window.location.href.replace('http://', 'https://');
-    requireHTTPS.classList.remove('hidden');
-}
+// if (window.location.protocol === 'http:') {
+//     const requireHTTPS = document.getElementById('requireHTTPS');
+//     const link = requireHTTPS.querySelector('a');
+//     link.href = window.location.href.replace('http://', 'https://');
+//     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
-    installContainer.classList.toggle('hidden', false);
+    if (button)
+        button.removeAttribute('hidden');
 });
 
-installBtn.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.
-    installContainer.classList.toggle('hidden', true);
-});
+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.addAttribute('hidden', '');
+    });
+}
 
 window.addEventListener('appinstalled', (event) => {
     console.log('👍', 'appinstalled', event);
@@ -50,31 +51,49 @@ window.addEventListener('appinstalled', (event) => {
     window.deferredPrompt = null;
 });
 
-let workerPath = 'sw.js'
-// if (config && config.serviceWorker)
-//     workerPath = config.serviceWorker
+async function persistData() {
+    if (navigator.storage && navigator.storage.persist) {
+      const result = await navigator.storage.persist();
+      console.log(`Data persisted: ${result}`);
+    }
+}
+
+if ('serviceWorker' in navigator) {
+    let workerPath = '/sw.js'
+    if (window.config && window.config.serviceWorker) {
+        workerPath = window.config.serviceWorker
+        window.localStorage.setItem("serviceWorker", workerPath);
+    } else {
+        workerPath =  window.localStorage.getItem("serviceWorker")
+    }
 
-window.addEventListener("load", function(event) {
-    if ('serviceWorker' in navigator) {
-        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);
+    let isPwa = true
+    if (workerPath) {
+        navigator.serviceWorker.getRegistrations().then(registrations => {
+            console.log(registrations);
+            if (registrations.length === 0 || isPwa == true)
+            window.addEventListener("load", function(event) {
+                    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)); 
                         }
-                    }
-                })
-                .catch(err => console.log('SW ERROR', err));
-
-            }
+                    });
+            });
         });
+
     }
-});
+}
 
 
 export default {cache}

package/src/wakeLock.js

@@ -0,0 +1,9 @@
+// Request a screen wake lock
+const wakeLock = await navigator.wakeLock.request();
+
+// Listen for wake lock release
+wakeLock.addEventListener('release', () => {
+ console.log(`Screen Wake Lock released: ${wakeLock.released}`);
+});
+// Manually release the wake lock
+wakeLock.release();

package/src/web-share.js

@@ -0,0 +1 @@
+// https://web.dev/web-share-target/