Feature/convert into pwa (#1436)

* Setup @angular/pwa

apps/client/ngsw-config.json

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

apps/client/project.json

@@ -1,4 +1,5 @@
 {
+  "name": "client",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "generators": {
@@ -43,6 +44,11 @@
             "input": "apps/client/src/assets",
             "output": "./../"
           },
+          {
+            "glob": "site.webmanifest",
+            "input": "apps/client/src/assets",
+            "output": "./../"
+          },
           {
             "glob": "**/*",
             "input": "node_modules/ionicons/dist/ionicons",
@@ -66,7 +72,9 @@
         "buildOptimizer": false,
         "sourceMap": true,
         "optimization": false,
-        "namedChunks": true
+        "namedChunks": true,
+        "serviceWorker": true,
+        "ngswConfigPath": "apps/client/ngsw-config.json"
       },
       "configurations": {
         "development-de": {

apps/client/src/app/app.module.ts

@@ -26,6 +26,7 @@ import { GfHeaderModule } from './components/header/header.module';
 import { authInterceptorProviders } from './core/auth.interceptor';
 import { httpResponseInterceptorProviders } from './core/http-response.interceptor';
 import { LanguageService } from './core/language.service';
+import { ServiceWorkerModule } from '@angular/service-worker';
 
 export function NgxStripeFactory(): string {
   return environment.stripePublicKey;
@@ -50,7 +51,11 @@ export function NgxStripeFactory(): string {
     MatNativeDateModule,
     MatSnackBarModule,
     NgxSkeletonLoaderModule,
-    NgxStripeModule.forRoot(environment.stripePublicKey)
+    NgxStripeModule.forRoot(environment.stripePublicKey),
+    ServiceWorkerModule.register('ngsw-worker.js', {
+      enabled: environment.production,
+      registrationStrategy: 'registerImmediately'
+    })
   ],
   providers: [
     authInterceptorProviders,

apps/client/src/assets/site.webmanifest

@@ -1,24 +1,25 @@
 {
-  "background_color": "transparent",
+  "background_color": "#FFFFFF",
   "categories": ["finance", "utilities"],
   "description": "Open Source Wealth Management Software",
   "display": "standalone",
   "icons": [
     {
       "sizes": "192x192",
-      "src": "/en/assets/android-chrome-192x192.png",
+      "src": "/assets/android-chrome-192x192.png",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "any maskable"
     },
     {
       "sizes": "512x512",
-      "src": "/en/assets/android-chrome-512x512.png",
+      "src": "/assets/android-chrome-512x512.png",
       "type": "image/png"
     }
   ],
   "name": "Ghostfolio",
   "orientation": "portrait",
   "short_name": "Ghostfolio",
-  "start_url": "https://www.ghostfol.io",
+  "start_url": "/en/",
   "theme_color": "#FFFFFF",
   "url": "https://www.ghostfol.io"
 }

apps/client/src/index.html

@@ -28,6 +28,7 @@
       content="initial-scale=1, viewport-fit=cover, width=device-width"
       name="viewport"
     />
+    <meta content="#FFFFFF" name="theme-color" />
     <meta content="" property="og:description" />
     <meta
       content="Ghostfolio – Open Source Wealth Management Software"

package.json

@@ -63,6 +63,7 @@
     "@angular/platform-browser": "14.2.0",
     "@angular/platform-browser-dynamic": "14.2.0",
     "@angular/router": "14.2.0",
+    "@angular/service-worker": "14.2.0",
     "@codewithdan/observable-store": "2.2.11",
     "@dfinity/agent": "0.12.1",
     "@dfinity/auth-client": "0.12.1",
@@ -138,6 +139,7 @@
     "@angular/compiler-cli": "14.2.0",
     "@angular/language-service": "14.2.0",
     "@angular/localize": "14.2.0",
+    "@angular/pwa": "14.2.9",
     "@nestjs/schematics": "9.0.3",
     "@nestjs/testing": "9.1.4",
     "@nrwl/cli": "15.0.0",