Feature/pwa (#2246)

* setup ui project with pwa configurations

* enable service worker config to work with ionic livereload

* fix service worker key placement

* update webmanifest names

* cleanup

* shrink logo size

* fix package build

* build fix

* fix icon size in webmanifest

frontend/angular.json

@@ -35,6 +35,12 @@
                 "glob": "**/*",
                 "input": "node_modules/monaco-editor",
                 "output": "assets/monaco-editor/"
+              },
+              "projects/ui/src/manifest.webmanifest",
+              {
+                "glob": "ngsw.json",
+                "input": "dist/ui",
+                "output": "projects/ui/src"
               }
             ],
             "styles": [
@@ -43,10 +49,12 @@
               "projects/shared/styles/shared.scss",
               "projects/ui/src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [],
+            "ngswConfigPath": "projects/ui/ngsw-config.json"
           },
           "configurations": {
             "production": {
+              "serviceWorker": true,
               "budgets": [
                 {
                   "type": "initial",

frontend/package.json

@@ -17,6 +17,7 @@
     "build:install-wiz": "ng run install-wizard:build",
     "build:setup": "ng run setup-wizard:build",
     "build:ui": "ng run ui:build",
+    "build:ui:dev": "ng run ui:build:development",
     "build:ui:stats": "ng run ui:build --stats-json",
     "build:all": "npm run build:deps && npm run build:dui && npm run build:setup && npm run build:ui && npm run build:install-wiz",
     "build:shared": "ng build shared",
@@ -39,7 +40,9 @@
     "@angular/forms": "^14.1.0",
     "@angular/platform-browser": "^14.1.0",
     "@angular/platform-browser-dynamic": "^14.1.0",
+    "@angular/pwa": "^14.1.0",
     "@angular/router": "^14.1.0",
+    "@angular/service-worker": "^14.2.2",
     "@ionic/angular": "^6.1.15",
     "@materia-ui/ngx-monaco-editor": "^6.0.0",
     "@ng-web-apis/common": "^2.0.0",

frontend/projects/ui/ngsw-config.json

@@ -0,0 +1,31 @@
+{
+  "$schema": "../../node_modules/@angular/service-worker/config/schema.json",
+  "index": "/index.html",
+  "assetGroups": [
+    {
+      "name": "app",
+      "installMode": "prefetch",
+      "resources": {
+        "files": [
+          "/favicon.ico",
+          "/index.html",
+          "/manifest.webmanifest",
+          "/*.css",
+          "/*.js"
+        ]
+      }
+    },
+    {
+      "name": "assets",
+      "installMode": "lazy",
+      "updateMode": "prefetch",
+      "resources": {
+        "files": [
+          "/assets/**",
+          "/svg/**",
+          "/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
+        ]
+      }
+    }
+  ]
+}

frontend/projects/ui/src/app/app.module.ts

@@ -31,6 +31,8 @@ import { PatchDbModule } from './services/patch-db/patch-db.module'
 import { ToastContainerModule } from './components/toast-container/toast-container.module'
 import { ConnectionBarComponentModule } from './components/connection-bar/connection-bar.component.module'
 import { WidgetsPageModule } from './pages/widgets/widgets.module'
+import { ServiceWorkerModule } from '@angular/service-worker'
+import { environment } from '../environments/environment'
 
 @NgModule({
   declarations: [AppComponent],
@@ -62,6 +64,12 @@ import { WidgetsPageModule } from './pages/widgets/widgets.module'
     ResponsiveColModule,
     DarkThemeModule,
     LightThemeModule,
+    ServiceWorkerModule.register('ngsw-worker.js', {
+      enabled: environment.useServiceWorker,
+      // Register the ServiceWorker as soon as the application is stable
+      // or after 30 seconds (whichever comes first).
+      registrationStrategy: 'registerWhenStable:30000',
+    }),
   ],
   providers: APP_PROVIDERS,
   bootstrap: [AppComponent],

frontend/projects/ui/src/environments/environment.prod.ts

@@ -1,3 +1,4 @@
 export const environment = {
   production: true,
+  useServiceWorker: true,
 }

frontend/projects/ui/src/environments/environment.ts

@@ -4,6 +4,7 @@
 
 export const environment = {
   production: false,
+  useServiceWorker: true,
 }
 
 /*

frontend/projects/ui/src/index.html

@@ -14,12 +14,14 @@
     <meta name="msapplication-tap-highlight" content="no" />
 
     <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico" />
+    <link rel="manifest" href="manifest.webmanifest" />
+    <meta name="theme-color" content="#ff5b71" />
   </head>
 
   <body>
     <app-root></app-root>
-    <noscript
+    <noscript>
-      >Please enable JavaScript to continue using this application.</noscript
+      Please enable JavaScript to continue using this application.
-    >
+    </noscript>
   </body>
 </html>

frontend/projects/ui/src/manifest.webmanifest

@@ -0,0 +1,18 @@
+{
+  "name": "StartOS",
+  "short_name": "StartOS",
+  "theme_color": "#ff5b71",
+  "background_color": "#1e1e1e",
+  "display": "standalone",
+  "scope": ".",
+  "start_url": "/",
+  "id": "/",
+  "icons": [
+    {
+      "src": "assets/img/logo_solid.png",
+      "sizes": "256x256",
+      "type": "image/png",
+      "purpose": "any"
+    }
+  ]
+}