feat(service worker): add service worker functionality

Phonebook.Frontend/.dockerignore

@@ -11,6 +11,8 @@
 !tslint.json
 !nginx
 !substitute_variables.sh
+!index_rehash.sh
 !globals.js
 !version.js
-!opensearch.xml
+!opensearch.xml
+!ngsw-config.json

Phonebook.Frontend/Dockerfile

@@ -11,6 +11,7 @@ COPY ./package.json /usr/local/app/package.json
 RUN npm ci 
 # Because: https://stackoverflow.com/questions/37715224/copy-multiple-directories-with-one-command
 COPY ./src/ ./src/
+COPY ./ngsw-config.json /usr/local/app/ngsw-config.json
 
 COPY ["angular.json", "tsconfig.json", "tslint.json", "./"]
 RUN npm run build:de
@@ -38,9 +39,12 @@ COPY ./nginx/ ./
 COPY ./substitute_variables.sh ./substitute_variables.sh
 RUN chmod +x ./substitute_variables.sh
 
+COPY ./index_rehash.sh ./index_rehash.sh
+RUN chmod +x ./index_rehash.sh
+
 RUN rm /usr/share/nginx/html/index.html
 COPY --from=builder /usr/local/app/dist /usr/share/nginx/html
 COPY ./opensearch.xml /usr/share/nginx/html/opensearch.xml
 
-ENTRYPOINT ["./substitute_variables.sh", "/usr/share/nginx/html", "./substitute_variables.sh", "/etc/nginx"]
+ENTRYPOINT ["./substitute_variables.sh", "/usr/share/nginx/html", "./substitute_variables.sh", "/etc/nginx", "./index_rehash.sh", "/usr/share/nginx/html"]
 CMD ["nginx"]

Phonebook.Frontend/angular.json

@@ -107,12 +107,8 @@
             "extractLicenses": true,
             "vendorChunk": false,
             "buildOptimizer": true,
-            "fileReplacements": [
-              {
-                "replace": "src/environments/environment.ts",
-                "with": "src/environments/environment.prod.ts"
-              }
-            ]
+            "serviceWorker": true,
+            "ngswConfigPath": "ngsw-config.json"
           },
           "configurations": {
             "en": {
@@ -121,15 +117,35 @@
               "i18nLocale": "en",
               "i18nMissingTranslation": "error",
               "outputPath": "dist/en",
-              "baseHref": "/en/"
+              "baseHref": "/en/",
+              "fileReplacements": [
+                {
+                  "replace": "src/manifest.webmanifest",
+                  "with": "src/manifest.en.webmanifest"
+                },
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
             },
             "de": {
               "i18nFile": "src/i18n/messages.de.xlf",
               "i18nFormat": "xlf",
               "i18nLocale": "de",
               "i18nMissingTranslation": "error",
               "outputPath": "dist/de",
-              "baseHref": "/de/"
+              "baseHref": "/de/",
+              "fileReplacements": [
+                {
+                  "replace": "src/manifest.webmanifest",
+                  "with": "src/manifest.de.webmanifest"
+                },
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
             },
             "preview": {
               "i18nFile": "src/i18n/messages.de.xlf",

Phonebook.Frontend/index_rehash.sh

@@ -0,0 +1,34 @@
+#!/bin/bash
+
+# This updates the hash of the index.html in the corresponding ngsw.json 
+# Execute it after replacing the environment variables
+
+# Paths to folders containing the index.html files (where the hash should be recalculated)
+paths=( "de" "en")
+
+# The first parameter has to be the path to the directory with the language folders
+if [[ -z $1 ]]; then
+    echo 'ERROR: No target file or directory given.'
+    exit 1
+fi
+
+
+
+# Go to all folders containing index.html and ngsw.json
+for i in "${paths[@]}"
+do
+  # Calculate hash of index.html
+  replaceString=($(sha1sum $1/$i/index.html))
+
+  if [ "$DEBUG" = true ]
+  then
+    # If DEBUG=true in order to log the replaced files
+    sed -i "s|\"\/$i\/index\.html\":\s\"\(.*\)\"|\"/""$i""/index.html\": \"""$replaceString""\"|Ig;w /dev/stdout" "$1/$i/ngsw.json"
+  else
+    # If DEBUG=false do it without logging
+    sed -i "s|\"\/$i\/index\.html\":\s\"\(.*\)\"|\"/""$i""/index.html\": \"""$replaceString""\"|Ig" "$1/$i/ngsw.json"
+  fi
+done
+
+# Execute all other parameters
+exec "${@:2}"

Phonebook.Frontend/nginx/nginx.conf

@@ -73,18 +73,6 @@ http {
            alias /usr/share/nginx/html/opensearch.xml;
         }
 
-        location = /ngsw.json {
-             return 404;
-        }
-
-        location = /de/ngsw.json {
-             return 404;
-        }
-
-        location = /en/ngsw.json {
-             return 404;
-        }
-
         location /de/ {
             alias /usr/share/nginx/html/de/;
             add_header Set-Cookie "lang=de;Domain=$host;Path=/;Max-Age=31536000";

Phonebook.Frontend/ngsw-config.json

@@ -0,0 +1,59 @@
+{
+  "index": "/index.html",
+  "assetGroups": [
+    {
+      "name": "app",
+      "installMode": "prefetch",
+      "resources": {
+        "files": [
+          "/favicon.ico",
+          "/index.html",
+          "/manifest.webmanifest",
+          "/*.css",
+          "/*.js",
+          "/*.woff2",
+          "/*.woff",
+          "/*.svg",
+          "/*.ttf",
+          "/*.eot"
+        ]
+      }
+    },
+    {
+      "name": "assets",
+      "installMode": "prefetch",
+      "updateMode": "prefetch",
+      "resources": {
+        "files": [
+          "/assets/**",
+          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
+        ]
+      }
+    }
+  ],
+  "dataGroups": [
+    {
+      "name": "api",
+      "urls": [
+        "/api/**"
+      ],
+      "cacheConfig": {
+        "strategy": "performance",
+        "maxSize": 1,
+        "maxAge": "1h"
+      }
+    },
+    {
+      "name": "pictures",
+      "urls": [
+        "*.(jpg|png|webp|gif|svg)"
+      ],
+      "cacheConfig": {
+        "strategy": "freshness",
+        "timeout": "4s",
+        "maxSize": 1,
+        "maxAge": "1h"
+      }
+    }
+  ]
+}

Phonebook.Frontend/package.json

@@ -115,4 +115,4 @@
       "path": "Phonebook.Frontend/node_modules/cz-customizable"
     }
   }
-}
+}