feat: prompt user to reload when a new version is available

Author: peterpeterparker

studio/src/app/app-root.tsx

@@ -1,4 +1,4 @@
-import {Build, Component, Element, h, State} from '@stencil/core';
+import {Build, Component, Element, h, Listen, State} from '@stencil/core';
 
 import {toastController} from '@ionic/core';
 
@@ -80,8 +80,35 @@ export class AppRoot {
     }
   }
 
+  @Listen('swUpdate', {target: 'window'})
+  async onSWUpdate() {
+    const registration = await navigator.serviceWorker.getRegistration();
+
+    if (!registration || !registration.waiting) {
+      return;
+    }
+
+    const toast: HTMLIonToastElement = await toastController.create({
+      message: 'A new version is available, reload to update.',
+      buttons: [
+        {
+          text: 'Reload',
+          icon: 'refresh-circle-outline',
+          handler: () => {
+            registration.waiting.postMessage('skipWaiting');
+            window.location.reload();
+          },
+        },
+      ],
+      position: 'top',
+      color: 'quaternary',
+    });
+
+    await toast.present();
+  }
+
   private async toastError(error: string) {
-    const popover: HTMLIonToastElement = await toastController.create({
+    const toast: HTMLIonToastElement = await toastController.create({
       message: error,
       buttons: [
         {
@@ -94,11 +121,11 @@ export class AppRoot {
       duration: 6000,
     });
 
-    popover.onDidDismiss().then(() => {
+    toast.onDidDismiss().then(() => {
       errorStore.state.error = undefined;
     });
 
-    await popover.present();
+    await toast.present();
   }
 
   private async navigate(params: NavParams) {