Merge pull request #2 from OmegaVoid/master

Move back to user

browserconfig.xml

@@ -2,7 +2,7 @@
 <browserconfig>
     <msapplication>
         <tile>
-            <square150x150logo src="/mstile-150x150.png"/>
+            <square150x150logo src="img/mstile-150x150.png"/>
             <TileColor>#5755d9</TileColor>
         </tile>
     </msapplication>

css/pwa.css

@@ -0,0 +1,24 @@
+.hidden {
+    display: none !important;
+}
+
+#installContainer {
+    position: absolute;
+    bottom: 1em;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+}
+
+#installContainer button {
+    background-color: inherit;
+    border: 1px solid white;
+    color: white;
+    font-size: 1em;
+    padding: 0.75em;
+}
+
+.floating {
+    position: fixed;
+
+}

html_code.html

@@ -1,8 +1,8 @@
-<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+<link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
-<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
-<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+<link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
-<link rel="manifest" href="/site.webmanifest">
+<link rel="manifest" href="site.webmanifest">
-<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5755d9">
+<link rel="mask-icon" href="img/safari-pinned-tab.svg" color="#5755d9">
 <meta name="apple-mobile-web-app-title" content="BangleApps">
 <meta name="application-name" content="BangleApps">
 <meta name="msapplication-TileColor" content="#5755d9">

index.html

@@ -6,11 +6,12 @@
     <link rel="stylesheet" href="css/spectre.min.css">
     <link rel="stylesheet" href="css/spectre-exp.min.css">
     <link rel="stylesheet" href="css/spectre-icons.min.css">
-    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    <link rel="stylesheet" href="css/pwa.css">
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
-    <link rel="manifest" href="/site.webmanifest">
+    <link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
-    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5755d9">
+    <link rel="manifest" href="site.webmanifest">
+    <link rel="mask-icon" href="img/safari-pinned-tab.svg" color="#5755d9">
     <meta name="apple-mobile-web-app-title" content="BangleApps">
     <meta name="application-name" content="BangleApps">
     <meta name="msapplication-TileColor" content="#5755d9">
@@ -64,6 +65,17 @@
       </section>-->
     </header>
 
+    <div class="floating">
+      <p id="requireHTTPS" class="hidden">
+        <b>STOP!</b> This page <b>must</b> be served over HTTPS.
+        Please <a>reload this page via HTTPS</a>.
+      </p>
+    </div>
+
+
+
+
+
     <div class="container" style="padding-top:4px">
       <p><b>Note:</b> If you have a version of Bangle.js firmware before 2v04, please update to the <a href="https://www.espruino.com/Bangle.js#firmware-updates" target="_blank">latest firmware</a> or
         <a href="https://banglejs.com/oldapps/">use the legacy app loader</a>.
@@ -136,11 +148,21 @@
       </div>
     </div>
 
+    <footer class="floating hidden">
+      <!-- Install button, hidden by default -->
+      <div id="installContainer" class="hidden">
+        <button id="butInstall" type="button">
+          Install
+        </button>
+      </div>
+    </footer>
+
     <script src="https://www.puck-js.com/puck.js"></script>
     <script src="js/utils.js"></script>
     <script src="js/ui.js"></script>
     <script src="js/comms.js"></script>
     <script src="js/appinfo.js"></script>
     <script src="js/index.js"></script>
+    <script src="js/pwa.js" defer></script>
   </body>
 </html>

js/pwa.js

@@ -0,0 +1,53 @@
+const divInstall = document.getElementById('installContainer');
+const butInstall = document.getElementById('butInstall');
+
+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
+    divInstall.classList.toggle('hidden', false);
+});
+
+butInstall.addEventListener('click', () => {
+    console.log('👍', 'butInstall-clicked');
+    const promptEvent = window.deferredPrompt;
+    if (!promptEvent) {
+        // The deferred prompt isn't available.
+        return;
+    }
+    // Show the install prompt.
+    promptEvent.prompt();
+    // Log the result
+    promptEvent.userChoice.then((result) => {
+        console.log('👍', 'userChoice', result);
+        // Reset the deferred prompt variable, since
+        // prompt() can only be called once.
+        window.deferredPrompt = null;
+        // Hide the install button.
+        divInstall.classList.toggle('hidden', true);
+    });
+});
+
+window.addEventListener('appinstalled', (event) => {
+    console.log('👍', 'appinstalled', event);
+});
+
+
+/* Only register a service worker if it's supported */
+if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('js/service-worker.js');
+}
+
+/**
+ * Warn the page must be served over HTTPS
+ * The `beforeinstallprompt` event won't fire if the page is served over HTTP.
+ * 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');
+}

js/service-worker.js

@@ -0,0 +1,14 @@
+self.addEventListener('install', (event) => {
+    console.log('👷', 'install', event);
+    self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+    console.log('👷', 'activate', event);
+    return self.clients.claim();
+});
+
+self.addEventListener('fetch', function(event) {
+    // console.log('👷', 'fetch', event);
+    event.respondWith(fetch(event.request));
+});

site.webmanifest

@@ -1,19 +1,22 @@
 {
     "name": "BangleApps",
     "short_name": "BangleApps",
+    "description": "Banglejs App Store",
     "icons": [
         {
-            "src": "/android-chrome-192x192.png",
+            "src": "img/android-chrome-192x192.png",
             "sizes": "192x192",
             "type": "image/png"
         },
         {
-            "src": "/android-chrome-512x512.png",
+            "src": "img/android-chrome-512x512.png",
             "sizes": "512x512",
             "type": "image/png"
         }
     ],
     "theme_color": "#5755d9",
     "background_color": "#5755d9",
-    "display": "standalone"
+    "display": "standalone",
+    "start_url": "https://omegavoid.github.io/BangleApps",
+    "scope": "/BangleApps/"
 }