feat: added service worker capability

package.json

@@ -25,6 +25,7 @@
     "@angular/forms": "~13.2.4",
     "@angular/platform-browser": "~13.2.4",
     "@angular/platform-browser-dynamic": "~13.2.4",
+    "@angular/service-worker": "^13.2.4",
     "@angular/router": "~13.2.4",
     "@ant-design/icons-angular": "^13.1.0",
     "@datorama/akita": "^7.1.1",

src/app/app.module.ts

@@ -14,6 +14,7 @@ import { NzSpinModule } from 'ng-zorro-antd/spin';
 import { QuillModule } from 'ngx-quill';
 import * as Sentry from '@sentry/angular';
 import { Router } from '@angular/router';
+import { ServiceWorkerModule } from '@angular/service-worker';
 
 @NgModule({
   declarations: [AppComponent],
@@ -27,7 +28,8 @@ import { Router } from '@angular/router';
     NzIconModule.forRoot([]),
     environment.production ? [] : AkitaNgDevtools,
     AkitaNgRouterStoreModule,
-    QuillModule.forRoot()
+    QuillModule.forRoot(),
+    ServiceWorkerModule.register('/sw.js', { enabled: environment.production })
   ],
   providers: [
     {
@@ -40,15 +42,15 @@ import { Router } from '@angular/router';
     },
     {
       provide: Sentry.TraceService,
-      deps: [Router],
+      deps: [Router]
     },
     {
       provide: APP_INITIALIZER,
       useFactory: () => () => {},
       deps: [Sentry.TraceService],
-      multi: true,
-    },
+      multi: true
+    }
   ],
   bootstrap: [AppComponent]
 })
-export class AppModule {}
+export class AppModule {}

workbox-config.js

@@ -0,0 +1,32 @@
+module.exports = {
+    globDirectory: 'dist/', // Your Angular app's build output directory
+    globPatterns: ['**/*.{html,js,css,png,jpg}'], // Cache HTML, JS, CSS, PNG, and JPG files,
+    globIgnores: ['**/node_modules/**/*', 'sw.js', 'workbox-*.js'],
+    swDest: 'dist/sw.js', // Service worker output file
+    clientsClaim: true,
+    skipWaiting: true,
+    runtimeCaching: [
+      {
+        urlPattern: /\.(?:png|jpg)$/,
+        handler: 'CacheFirst', // Cache images with CacheFirst strategy
+        options: {
+          cacheName: 'images-cache',
+          expiration: {
+            maxEntries: 50,
+            maxAgeSeconds: 30 * 24 * 60 * 60 // 30 Days
+          }
+        }
+      },
+      {
+        urlPattern: /\.(?:html|js|css)$/,
+        handler: 'StaleWhileRevalidate', // Cache HTML, JS, and CSS with StaleWhileRevalidate strategy
+        options: {
+          cacheName: 'static-files',
+          expiration: {
+            maxEntries: 20,
+            maxAgeSeconds: 7 * 24 * 60 * 60 // 7 Days
+          }
+        }
+      }
+    ]
+  };