feat: add pwa support

.github/workflows/ci.yaml

@@ -36,8 +36,8 @@ jobs:
             - name: Checkout
               uses: actions/checkout@v2
 
-            - name: Build and Deploy
-              uses: JamesIves/github-pages-deploy-action@master
+            - name: Build and Deploy 🚀
+              uses: JamesIves/github-pages-deploy-action@4.1.7
               env:
                   ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
                   BRANCH: gh-pages

angular.json

@@ -6,7 +6,7 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "angular-electron": {
+    "iptvnator": {
       "root": "",
       "sourceRoot": "src",
       "projectType": "application",
@@ -26,7 +26,8 @@
             "polyfills": "src/polyfills.ts",
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              "src/manifest.webmanifest"
             ],
             "styles": [
               "src/styles.scss"
@@ -35,7 +36,9 @@
             "customWebpackConfig": {
               "path": "./angular.webpack.js",
               "replaceDuplicatePlugins": true
-            }
+            },
+            "serviceWorker": true,
+            "ngswConfigPath": "ngsw-config.json"
           },
           "configurations": {
             "dev": {
@@ -91,24 +94,24 @@
         "serve": {
           "builder": "@angular-builders/custom-webpack:dev-server",
           "options": {
-            "browserTarget": "angular-electron:build"
+            "browserTarget": "iptvnator:build"
           },
           "configurations": {
             "dev": {
-              "browserTarget": "angular-electron:build:dev"
+              "browserTarget": "iptvnator:build:dev"
             },
             "web": {
-              "browserTarget": "angular-electron:build:web"
+              "browserTarget": "iptvnator:build:web"
             },
             "production": {
-              "browserTarget": "angular-electron:build:production"
+              "browserTarget": "iptvnator:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "angular-electron:build"
+            "browserTarget": "iptvnator:build"
           }
         },
         "test": {
@@ -142,7 +145,7 @@
         }
       }
     },
-    "angular-electron-e2e": {
+    "iptvnator-e2e": {
       "root": "e2e",
       "projectType": "application",
       "architect": {
@@ -157,7 +160,7 @@
       }
     }
   },
-  "defaultProject": "angular-electron",
+  "defaultProject": "iptvnator",
   "schematics": {
     "@schematics/angular:component": {
       "prefix": "app",

e2e/main.e2e.ts

@@ -3,7 +3,7 @@ import { SpectronClient } from 'spectron';
 
 import commonSetup from './common-setup';
 
-describe('angular-electron App', function () {
+describe('iptvnator App', function () {
     commonSetup.apply(this);
 
     let client: SpectronClient;

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)"
+        ]
+      }
+    }
+  ]
+}

package.json

@@ -97,6 +97,7 @@
         "@angular/platform-browser": "13.0.2",
         "@angular/platform-browser-dynamic": "13.0.2",
         "@angular/router": "13.0.2",
+        "@angular/service-worker": "13.0.2",
         "@commitlint/cli": "16.0.1",
         "@commitlint/config-conventional": "16.0.0",
         "@ngx-translate/core": "13.0.0",

src/app/app.module.ts

@@ -20,6 +20,7 @@ import { DataService } from './services/data.service';
 import { NgxIndexedDBModule, NgxIndexedDBService } from 'ngx-indexed-db';
 import { AppConfig } from '../environments/environment';
 import { dbConfig } from './indexed-db.config';
+import { ServiceWorkerModule } from '@angular/service-worker';
 
 // AoT requires an exported function for factories
 export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
@@ -65,6 +66,12 @@ export function DataFactory(dbService: NgxIndexedDBService, http: HttpClient) {
                 deps: [HttpClient],
             },
         }),
+        ServiceWorkerModule.register('ngsw-worker.js', {
+            enabled: AppConfig.production,
+            // Register the ServiceWorker as soon as the app is stable
+            // or after 30 seconds (whichever comes first).
+            registrationStrategy: 'registerWhenStable:30000',
+        }),
     ],
     providers: [
         {

src/index.html

@@ -6,6 +6,8 @@
         <base href="/" />
 
         <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="manifest" href="manifest.webmanifest">
+        <link rel="apple-touch-icon" href="assets/icons/apple-touch-icon.png"/>
         <link rel="icon" type="image/x-icon" href="assets/icons/favicon.ico" />
         <script>
             if (global === undefined) {

src/manifest.webmanifest

@@ -0,0 +1,34 @@
+{
+  "name": "iptvnator",
+  "description": "IPTVnator is a tool to watch and manage your IPTV playlists.",
+  "short_name": "iptvnator",
+  "theme_color": "#000",
+  "background_color": "#fafafa",
+  "display": "standalone",
+  "scope": "./",
+  "start_url": "./",
+  "icons": [
+    {
+      "src": "assets/icons/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+        "src": "assets/icons/android-chrome-512x512.png",
+        "sizes": "512x512",
+        "type": "image/png"
+    },
+    {
+      "src": "assets/icons/android-chrome-maskable-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "assets/icons/android-chrome-maskable-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ]
+}