Merge branch 'release/0.4.6'

CHANGELOG.md

@@ -5,6 +5,10 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 
 ## [Unreleased]
 
+## [0.4.6] - 2019-11-29
+### Fixed
+- Not update app using browser reload, to work properly when an update is available
+
 ## [0.4.5] - 2019-11-29
 ### Changed
 - Update dependencies
@@ -87,7 +91,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 ### Added
 - First release
 
-[Unreleased]: https://github.com/nwtgck/piping-ui-web/compare/v0.4.5...HEAD
+[Unreleased]: https://github.com/nwtgck/piping-ui-web/compare/v0.4.6...HEAD
+[0.4.6]: https://github.com/nwtgck/piping-ui-web/compare/v0.4.5...v0.4.6
 [0.4.5]: https://github.com/nwtgck/piping-ui-web/compare/v0.4.4...v0.4.5
 [0.4.4]: https://github.com/nwtgck/piping-ui-web/compare/v0.4.3...v0.4.4
 [0.4.3]: https://github.com/nwtgck/piping-ui-web/compare/v0.4.2...v0.4.3

package.json

@@ -1,6 +1,6 @@
 {
   "name": "piping-ui",
-  "version": "0.4.5",
+  "version": "0.4.6",
   "private": true,
   "author": "Ryo Ota <[email protected]> (https://github.com/nwtgck)",
   "scripts": {

src/App.vue

@@ -72,8 +72,10 @@ export default class App extends Vue {
     mdiDotsVertical,
   };
 
-  pwa: {refreshing: boolean, updateExists: boolean} = {
+  // TODO: Remove any
+  pwa: {refreshing: boolean, registration?: any, updateExists: boolean} = {
     refreshing: false,
+    registration: undefined,
     updateExists: false
   };
   private version = VERSION;
@@ -85,11 +87,7 @@ export default class App extends Vue {
 
   created () {
     document.addEventListener(
-      'swUpdated',
-      () => {
-        this.pwa.updateExists = true;
-      },
-      { once: true },
+      'swUpdated', this.showRefreshUI, { once: true }
     );
   }
 
@@ -98,12 +96,27 @@ export default class App extends Vue {
     this.$vuetify.theme.dark = enableDarkTheme();
   }
 
+  // TODO: Remove any
+  showRefreshUI (e: any) {
+    this.pwa.registration = e.detail;
+    this.pwa.updateExists = true;
+  }
+
   // Update PWA app
   refreshApp () {
     this.pwa.updateExists = false;
-    if (this.pwa.refreshing) return;
-    this.pwa.refreshing = true;
-    window.location.reload();
+    if (this.pwa.registration === undefined || !this.pwa.registration.waiting) {
+      return;
+    }
+    this.pwa.registration.waiting.postMessage('skipWaiting');
+    navigator.serviceWorker.addEventListener(
+      'controllerchange', () => {
+        if (this.pwa.refreshing) return;
+        this.pwa.refreshing = true;
+        window.location.reload();
+      },
+      {once: true}
+    );
   }
 }
 </script>

src/registerServiceWorker.ts

@@ -25,15 +25,8 @@ if (process.env.NODE_ENV === 'production') {
     },
     updated (registration) {
       console.log('New content is available; please refresh.')
-      registration.waiting.postMessage('skipWaiting')
-      navigator.serviceWorker.addEventListener(
-        'controllerchange',
-        () => {
-          document.dispatchEvent(
-            new CustomEvent('swUpdated')
-          );
-        },
-        {once: true},
+      document.dispatchEvent(
+        new CustomEvent('swUpdated', { detail: registration })
       );
     },
     offline () {