Improving pwa support, adding link for android app, styling

package.json

@@ -9,11 +9,14 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
-    "vue": "^2.6.11"
+    "register-service-worker": "^1.7.1",
+    "vue": "^2.6.11",
+    "workbox-window": "^5.1.4"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-pwa": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",

public/robots.txt

@@ -1 +1,2 @@
-User-agent: * Disallow:
+User-agent: *
+Disallow:

src/App.vue

@@ -1,8 +1,18 @@
 <template>
   <div id="app-container">
     <the-header app-name="Noiser"/>
-    <section class="mainContentLayout magictime slideDownReturn">
 
+    <div class="update-dialog" v-if="showUpdateUI">
+      <div class="update-dialog__content">
+        A new version is available. Refresh now to activate?
+      </div>
+      <div class="update-dialog__actions">
+        <button class="button" @click="update">Update</button>
+        <button class="button" @click="showUpdateUI = false">Cancel</button>
+      </div>
+    </div>
+
+    <section class="mainContentLayout magictime slideDownReturn">
       <div>
         <h2 class="packName">{{audioSources.summerPack.name}}</h2>
         <div v-if="audioSources.summerPack.audioSources.length > 0" class="flexLayout">
@@ -63,7 +73,12 @@
         <h4 v-else class="packNoSounds">Sounds coming</h4>
       </div>
       <hr>
-      <h4 class="packNoSounds"><a style="color: white;" href="http://www.nitramite.com/noiser.html">Click here</a> for asset attribution notes</h4>
+      <h2 class="packName">Links</h2>
+      <h4 class="packNoSounds">Download <a style="color: white;"
+                                           href="https://play.google.com/store/apps/details?id=com.nitramite.noiser">Android
+        App</a> here</h4>
+      <h4 class="packNoSounds"><a style="color: white;" href="http://www.nitramite.com/noiser.html">Click here</a> for
+        asset attribution notes</h4>
       <hr>
 
     </section>
@@ -75,10 +90,8 @@
   import TheHeader from "./components/TheHeader.vue";
   import AudioElement from "./components/AudioElement.vue";
   import TheFooter from "./components/TheFooter.vue";
-
   import AudioPack from './assets/AudioPack';
 
-
   export default {
     name: 'App',
     components: {
@@ -88,12 +101,25 @@
     },
     data() {
       return {
-        audioSources: AudioPack.audioPacks
+        audioSources: AudioPack.audioPacks,
+        showUpdateUI: false,
       }
     },
     mounted() {
     },
-    methods: {},
+    methods: {
+      async update() {
+        this.showUpdateUI = false;
+        await this.$workbox.messageSW({type: "SKIP_WAITING"});
+      },
+    },
+    created() {
+      if (this.$workbox) {
+        this.$workbox.addEventListener("waiting", () => {
+          this.showUpdateUI = true;
+        });
+      }
+    },
   }
 </script>
 
@@ -153,4 +179,31 @@
     border-radius: 5px;
   }
 
+  .update-dialog {
+    text-align: center;
+    border-radius: 20px;
+    margin: 10px 20px 10px 20px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    color: white;
+    background-color: rgba(255, 255, 255, 0.15);
+    box-shadow: 0 4px 25px 0 rgba(255, 255, 255, 0.1);
+  }
+
+  .button {
+    min-width: 100px;
+    height: 40px;
+    background: #2d3436;
+    border-radius: 40px;
+    overflow: hidden;
+    cursor: pointer;
+    transition: .1s linear;
+    margin: 5px 5px 0 5px;
+    color: white;
+  }
+
+  .button:hover {
+    transform: scale(1.1);
+  }
+
 </style>

src/main.js

@@ -1,5 +1,8 @@
 import Vue from 'vue'
 import App from './App.vue'
+import wb from "./registerServiceWorker";
+
+Vue.prototype.$workbox = wb;
 
 Vue.config.productionTip = false;
 

src/registerServiceWorker.js

@@ -0,0 +1,13 @@
+import {Workbox} from "workbox-window";
+
+let wb;
+if ("serviceWorker" in navigator) {
+  wb = new Workbox(`${process.env.BASE_URL}service-worker.js`);
+  wb.addEventListener("controlling", () => {
+    window.location.reload();
+  });
+  wb.register();
+} else {
+  wb = null;
+}
+export default wb;

vue.config.js

@@ -7,5 +7,13 @@ module.exports = {
           args[0].title = 'Noiser - Free white noise generator';
           return args
         })
+  },
+  pwa: {
+    themeColor: "#DE6262",
+    msTileColor: "#DE6262",
+    appleMobileWebAppCache: "yes",
+    manifestOptions: {
+      background_color: "#DE6262"
+    }
   }
 };