Now a PWA!

RiccardoBarbieri · Jul 19, 2024 · a7eb355 · a7eb355
1 parent e8371f7
commit a7eb355
Show file tree

Hide file tree

Showing 14 changed files with 115 additions and 4 deletions.
diff --git a/courtsight/angular.json b/courtsight/angular.json
@@ -140,7 +140,8 @@
                   "maximumError": "4kB"
                 }
               ],
-              "outputHashing": "all"
+              "outputHashing": "all",
+              "serviceWorker": "ngsw-config.json"
             },
             "development": {
               "optimization": false,

diff --git a/courtsight/ngsw-config.json b/courtsight/ngsw-config.json
@@ -0,0 +1,29 @@
+{
+  "$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": [
+          "/**/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
+        ]
+      }
+    }
+  ]
+}
diff --git a/courtsight/package-lock.json b/courtsight/package-lock.json
diff --git a/courtsight/package.json b/courtsight/package.json
@@ -18,6 +18,7 @@
     "@angular/platform-browser": "^18.1.1",
     "@angular/platform-browser-dynamic": "^18.1.1",
     "@angular/router": "^18.1.1",
+    "@angular/service-worker": "^18.1.1",
     "primeflex": "^3.3.1",
     "primeicons": "^7.0.0",
     "primeng": "^17.18.4",
@@ -42,4 +43,4 @@
     "node": "^20.11.1",
     "npm": "^9.0.0"
   }
-}
+}
diff --git a/courtsight/public/icons/icon-128x128.png b/courtsight/public/icons/icon-128x128.png
diff --git a/courtsight/public/icons/icon-144x144.png b/courtsight/public/icons/icon-144x144.png
diff --git a/courtsight/public/icons/icon-152x152.png b/courtsight/public/icons/icon-152x152.png
diff --git a/courtsight/public/icons/icon-192x192.png b/courtsight/public/icons/icon-192x192.png
diff --git a/courtsight/public/icons/icon-512x512.png b/courtsight/public/icons/icon-512x512.png
diff --git a/courtsight/public/icons/icon-72x72.png b/courtsight/public/icons/icon-72x72.png
diff --git a/courtsight/public/icons/icon-96x96.png b/courtsight/public/icons/icon-96x96.png
diff --git a/courtsight/public/manifest.webmanifest b/courtsight/public/manifest.webmanifest
@@ -0,0 +1,53 @@
+{
+  "name": "courtsight",
+  "short_name": "courtsight",
+  "theme_color": "#1976d2",
+  "background_color": "#fafafa",
+  "display": "standalone",
+  "scope": "./",
+  "start_url": "./",
+  "icons": [
+    {
+      "src": "icons/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable any"
+    }
+  ]
+}
diff --git a/courtsight/src/app/app.config.ts b/courtsight/src/app/app.config.ts
@@ -1,9 +1,13 @@
-import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { ApplicationConfig, provideZoneChangeDetection, isDevMode } from '@angular/core';
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
 import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideServiceWorker } from '@angular/service-worker';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideAnimations()]
+  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideAnimations(), provideServiceWorker('ngsw-worker.js', {
+            enabled: !isDevMode(),
+            registrationStrategy: 'registerWhenStable:30000'
+          })]
 };
diff --git a/courtsight/src/index.html b/courtsight/src/index.html
@@ -7,8 +7,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link id="app-theme" rel="stylesheet" type="text/css" href="lara-light-blue.css">
+  <link rel="manifest" href="manifest.webmanifest">
+  <meta name="theme-color" content="#1976d2">
 </head>
 <body>
   <app-root></app-root>
+  <noscript>Please enable JavaScript to continue using this application.</noscript>
 </body>
 </html>