feat(demo): add service worker

Liquid-JS · Mar 8, 2023 · 19d0e15 · 19d0e15
1 parent 12da171
commit 19d0e15
Show file tree

Hide file tree

Showing 15 changed files with 126 additions and 5 deletions.
diff --git a/angular.json b/angular.json
@@ -50,13 +50,16 @@
                                 "glob": "**/*",
                                 "input": "dist/flags/assets/flags",
                                 "output": "assets/flags"
-                            }
+                            },
+                            "packages/demo/src/manifest.webmanifest"
                         ],
                         "styles": [
                             "packages/demo/src/styles.scss",
                             "dist/pick-datetime/assets/picker.scss"
                         ],
-                        "scripts": []
+                        "scripts": [],
+                        "serviceWorker": true,
+                        "ngswConfigPath": "packages/demo/ngsw-config.json"
                     },
                     "configurations": {
                         "production": {
@@ -119,7 +122,8 @@
                         "inlineStyleLanguage": "scss",
                         "assets": [
                             "packages/demo/src/favicon.ico",
-                            "packages/demo/src/assets"
+                            "packages/demo/src/assets",
+                            "packages/demo/src/manifest.webmanifest"
                         ],
                         "styles": [
                             "packages/demo/src/styles.scss"

diff --git a/packages/demo/ngsw-config.json b/packages/demo/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",
+                    "/manifest.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)"
+                ]
+            }
+        }
+    ]
+}
diff --git a/packages/demo/package.json b/packages/demo/package.json
@@ -24,6 +24,7 @@
         "@angular/platform-browser": "^15.2.1",
         "@angular/platform-browser-dynamic": "^15.2.1",
         "@angular/router": "^15.2.1",
+        "@angular/service-worker": "^15.2.1",
         "@popperjs/core": "^2.11.6",
         "bootstrap": "^5.2.3",
         "diacritics": "^1.3.0",

diff --git a/packages/demo/src/app/app.module.ts b/packages/demo/src/app/app.module.ts
@@ -1,6 +1,7 @@
-import { NgModule } from '@angular/core'
+import { isDevMode, NgModule } from '@angular/core'
 import { BrowserModule } from '@angular/platform-browser'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+import { ServiceWorkerModule } from '@angular/service-worker'
 import { AppRoutingModule } from './app-routing.module'
 import { AppComponent } from './app.component'
 import { HomeComponent } from './home/home.component'
@@ -13,7 +14,13 @@ import { HomeComponent } from './home/home.component'
     imports: [
         BrowserModule,
         BrowserAnimationsModule,
-        AppRoutingModule
+        AppRoutingModule,
+        ServiceWorkerModule.register('ngsw-worker.js', {
+            enabled: !isDevMode(),
+            // Register the ServiceWorker as soon as the application is stable
+            // or after 30 seconds (whichever comes first).
+            registrationStrategy: 'registerWhenStable:30000'
+        })
     ],
     providers: [],
     bootstrap: [AppComponent]

diff --git a/packages/demo/src/assets/icons/icon-128x128.png b/packages/demo/src/assets/icons/icon-128x128.png
diff --git a/packages/demo/src/assets/icons/icon-144x144.png b/packages/demo/src/assets/icons/icon-144x144.png
diff --git a/packages/demo/src/assets/icons/icon-152x152.png b/packages/demo/src/assets/icons/icon-152x152.png
diff --git a/packages/demo/src/assets/icons/icon-192x192.png b/packages/demo/src/assets/icons/icon-192x192.png
diff --git a/packages/demo/src/assets/icons/icon-384x384.png b/packages/demo/src/assets/icons/icon-384x384.png
diff --git a/packages/demo/src/assets/icons/icon-512x512.png b/packages/demo/src/assets/icons/icon-512x512.png
diff --git a/packages/demo/src/assets/icons/icon-72x72.png b/packages/demo/src/assets/icons/icon-72x72.png
diff --git a/packages/demo/src/assets/icons/icon-96x96.png b/packages/demo/src/assets/icons/icon-96x96.png
diff --git a/packages/demo/src/index.html b/packages/demo/src/index.html
@@ -10,10 +10,15 @@
     <link rel="icon"
         type="image/x-icon"
         href="favicon.ico">
+    <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>
diff --git a/packages/demo/src/manifest.webmanifest b/packages/demo/src/manifest.webmanifest
@@ -0,0 +1,59 @@
+{
+    "name": "demo",
+    "short_name": "demo",
+    "theme_color": "#1976d2",
+    "background_color": "#fafafa",
+    "display": "standalone",
+    "scope": "./",
+    "start_url": "./",
+    "icons": [
+        {
+            "src": "assets/icons/icon-72x72.png",
+            "sizes": "72x72",
+            "type": "image/png",
+            "purpose": "maskable any"
+        },
+        {
+            "src": "assets/icons/icon-96x96.png",
+            "sizes": "96x96",
+            "type": "image/png",
+            "purpose": "maskable any"
+        },
+        {
+            "src": "assets/icons/icon-128x128.png",
+            "sizes": "128x128",
+            "type": "image/png",
+            "purpose": "maskable any"
+        },
+        {
+            "src": "assets/icons/icon-144x144.png",
+            "sizes": "144x144",
+            "type": "image/png",
+            "purpose": "maskable any"
+        },
+        {
+            "src": "assets/icons/icon-152x152.png",
+            "sizes": "152x152",
+            "type": "image/png",
+            "purpose": "maskable any"
+        },
+        {
+            "src": "assets/icons/icon-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "maskable any"
+        },
+        {
+            "src": "assets/icons/icon-384x384.png",
+            "sizes": "384x384",
+            "type": "image/png",
+            "purpose": "maskable any"
+        },
+        {
+            "src": "assets/icons/icon-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "maskable any"
+        }
+    ]
+}
diff --git a/yarn.lock b/yarn.lock
@@ -464,6 +464,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@angular/service-worker@npm:^15.2.1":
+  version: 15.2.1
+  resolution: "@angular/service-worker@npm:15.2.1"
+  dependencies:
+    tslib: ^2.3.0
+  peerDependencies:
+    "@angular/common": 15.2.1
+    "@angular/core": 15.2.1
+  bin:
+    ngsw-config: ngsw-config.js
+  checksum: 334d352cc09e777c45ba677945aa93f4da6b34e6f5f98543a1322a7c4470880bfbfafb84542cf4609bbfafc3f985eff62df81b58cff36495dbba65e9ee2cccd5
+  languageName: node
+  linkType: hard
+
 "@assemblyscript/loader@npm:^0.10.1":
   version: 0.10.1
   resolution: "@assemblyscript/loader@npm:0.10.1"
@@ -6214,6 +6228,7 @@ __metadata:
     "@angular/platform-browser": ^15.2.1
     "@angular/platform-browser-dynamic": ^15.2.1
     "@angular/router": ^15.2.1
+    "@angular/service-worker": ^15.2.1
     "@popperjs/core": ^2.11.6
     bootstrap: ^5.2.3
     diacritics: ^1.3.0