Fix/pwa refresh (#2359)

* fix ROFS error on os install

* attempt to prompt browser to update manifest data with id and modified start_url

* update icon with better shape for ios

* add additional options for refreshing on pwas

* add loader to pwa reload

* fix pwa icon and add icon for ios

* add logic for refresh display depending on if pwa

* fix build for ui; fix numeric parsing error on osx

* typo

---------

Co-authored-by: Aiden McClelland <me@drbonez.dev>

Makefile

@@ -162,7 +162,7 @@ frontend/config.json: $(GIT_HASH_FILE) frontend/config-sample.json
 	npm --prefix frontend run-script build-config
 
 frontend/patchdb-ui-seed.json: frontend/package.json
-	jq '."ack-welcome" = $(shell yq '.version' frontend/package.json)' frontend/patchdb-ui-seed.json > ui-seed.tmp
+	jq '."ack-welcome" = "$(shell yq '.version' frontend/package.json)"' frontend/patchdb-ui-seed.json > ui-seed.tmp
 	mv ui-seed.tmp frontend/patchdb-ui-seed.json
 
 patch-db/client/node_modules: patch-db/client/package.json
@@ -180,7 +180,7 @@ backend-$(ARCH).tar: $(EMBASSY_BINS)
 frontends: $(EMBASSY_UIS) 
 
 # this is a convenience step to build the UI
-ui: frontend/dist/ui
+ui: frontend/dist/raw/ui
 
 # used by github actions
 backend: $(EMBASSY_BINS)

frontend/projects/ui/src/app/components/toast-container/refresh-alert/refresh-alert.component.html

@@ -1,9 +1,32 @@
+<div *ngIf="!onPwa; else pwa">
   <alert *ngIf="show$ | async" header="Refresh Needed" (dismiss)="onDismiss()">
     Your user interface is cached and out of date. Hard refresh the page to get
     the latest UI.
     <ul>
-    <li><b>On Mac</b>: cmd + shift + R</li>
+      <li>
-    <li><b>On Linux/Windows</b>: ctrl + shift + R</li>
+        <b>On Mac</b>
+        : cmd + shift + R
+      </li>
+      <li>
+        <b>On Linux/Windows</b>
+        : ctrl + shift + R
+      </li>
+      <li>
+        <b>On Android/iOS</b>
+        : Browser specific, typically a refresh button in the browser menu.
+      </li>
     </ul>
     <a alertButton class="enter-click" role="cancel">Ok</a>
   </alert>
+</div>
+
+<ng-template #pwa>
+  <alert *ngIf="show$ | async" header="Refresh Needed" (dismiss)="onDismiss()">
+    Your user interface is cached and out of date.
+    <br />
+    <br />
+    Attempt to reload the PWA using the button below. If you continue to see
+    this message, uninstall and reinstall the PWA.
+    <a alertButton (click)="pwaReload()" role="cancel">Reload</a>
+  </alert>
+</ng-template>

frontend/projects/ui/src/app/components/toast-container/refresh-alert/refresh-alert.component.ts

@@ -1,7 +1,9 @@
 import { ChangeDetectionStrategy, Component, Inject } from '@angular/core'
-import { Observable, Subject, merge } from 'rxjs'
+import { merge, Observable, Subject } from 'rxjs'
 
 import { RefreshAlertService } from './refresh-alert.service'
+import { SwUpdate } from '@angular/service-worker'
+import { LoadingController } from '@ionic/angular'
 
 @Component({
   selector: 'refresh-alert',
@@ -10,13 +12,36 @@ import { RefreshAlertService } from './refresh-alert.service'
 })
 export class RefreshAlertComponent {
   private readonly dismiss$ = new Subject<boolean>()
-
   readonly show$ = merge(this.dismiss$, this.refresh$)
+  onPwa = false
 
   constructor(
     @Inject(RefreshAlertService) private readonly refresh$: Observable<boolean>,
+    private readonly updates: SwUpdate,
+    private readonly loadingCtrl: LoadingController,
   ) {}
 
+  ngOnInit() {
+    this.onPwa = window.matchMedia('(display-mode: standalone)').matches
+  }
+
+  async pwaReload() {
+    const loader = await this.loadingCtrl.create({
+      message: 'Reloading PWA...',
+    })
+    await loader.present()
+    try {
+      // attempt to update to the latest client version available
+      await this.updates.activateUpdate()
+    } catch (e) {
+      console.error('Error activating update from service worker: ', e)
+    } finally {
+      loader.dismiss()
+      // always reload, as this resolves most out of sync cases
+      window.location.reload()
+    }
+  }
+
   onDismiss() {
     this.dismiss$.next(false)
   }

frontend/projects/ui/src/index.html

@@ -14,6 +14,11 @@
     <meta name="msapplication-tap-highlight" content="no" />
 
     <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico" />
+    <link
+      rel="apple-touch-icon"
+      sizes="256x256"
+      href="assets/img/icon_apple_touch.png"
+    />
     <link rel="manifest" href="manifest.webmanifest" />
     <meta name="theme-color" content="#ff5b71" />
   </head>

frontend/projects/ui/src/manifest.webmanifest

@@ -5,8 +5,8 @@
   "background_color": "#1e1e1e",
   "display": "standalone",
   "scope": ".",
-  "start_url": "/",
+  "start_url": "/?version=0344",
-  "id": "/",
+  "id": "/?version=0344",
   "icons": [
     {
       "src": "assets/img/icon_pwa.png",