Service worker

research-hub-web/README.md

@@ -60,7 +60,7 @@ This project comes bundled with an interactive bash CLI test runner capable of l
 
 Simply run `./test.sh` to specify what sort of testing you would like to do.
 
-### Preview environment
+## Preview environment
 Aside from the main site, a preview version of the site is also built for content authors to view draft articles before they're published. The preview version is identical to the main site aside from content query endpoints. There is a preview environment configuration file for each deployment environment. The files are kept in the `src/environments` folder, named `environment.[DEPLOYMENT ENVIRONMENT]-preview.ts`. The files determine where the frontend sends GraphQL content queries, and which requests require authentication.
 
 The monorepo [Jenkinsfile](../Jenkinsfile) runs `ng build` to build the preview version of the site at the same time as the main site. The script passes the preview configuration file name to build the preview site. Search "preview" in the `Jenkinsfile` to understand how it's being built in the Continuous Integration process.
@@ -85,3 +85,23 @@ The generator can be executed in several ways:
 * `npm run generate-watch`: Regenerates once, then watches for any changes to `.graphql` files in the [queries](./src/app/graphql/queries/) folder
 * `npm run dev`: As mentioned in the [Local Development Section](#local-development), this command also executes `npm run generate-watch`
 
+## PWA / Service Worker
+
+This application is a Progressive Web Application (PWA) - an app which behaves like a native app but can be used by devices on various platforms (Android, iOS or desktop). When a user visits the site, they can choose to install it as an app by clicking the install button in the browser bar. PWAs use Service Workers to manage caching and a web app manifest to make it installable. PWAs have enhanced capabilities and reliability over a traditional web app, such as faster loading time and more reliable functionality offline or on slow network connections.
+
+Angular provides a preconfigured service worker that can be added to an existing Angular app using the command `ng add @angular/pwa`. The command does the following:
+* Create a service worker with a default caching configuration.
+* Create a manifest file, which tells the browser how your app should behave when installed on the user's device.
+* Add a link to the manifest file in index.html.
+* Add the theme-color <meta> tag to index.html.
+* Create app icons in the src/assets directory.
+Read more info [here](https://angular.io/guide/service-worker-intro) about Angular service worker and PWA.
+
+### Testing PWA / Service Worker locally:
+Because ng serve does not work with service workers, you must use a separate HTTP server to test service worker locally. You can use http-server, for example.
+Install it globally: `npm install --global http-server`.
+Now you can run a build of the project (in whichever environment you want to test - e.g. `ng build --configuration dev`), and then serve the build directory (www) using http-server:
+`http-server -p 8080 -c-1 www`. You can now see the service worker information in the browser developer tools. You can run the command `npm run start:sw` to do the same.
+
+**NOTE**: not all navigation/redirects will work correctly when serving from the http-server due to the server address and environment settings etc. The best way to test the service worker is to do a proper deployment into the dev environment.
+

research-hub-web/angular.json

@@ -17,7 +17,8 @@
             "tsConfig": "tsconfig.build.json",
             "polyfills": "src/polyfills.ts",
             "assets": [
-              "./src/assets"
+              "./src/assets",
+              "src/manifest.webmanifest"
             ],
             "styles": [
               "src/styles.scss",
@@ -42,7 +43,9 @@
             "buildOptimizer": false,
             "sourceMap": true,
             "optimization": false,
-            "namedChunks": true
+            "namedChunks": true,
+            "serviceWorker": true,
+            "ngswConfigPath": "ngsw-config.json"
           },
           "configurations": {
             "local": {
@@ -363,16 +366,7 @@
               "src/environments/**",
               "src/**/**.module.ts",
               "src/test.ts",
-              "src/polyfills.ts",
-              "src/**/search-results/**/*.ts",
-              "src/**/search-bar/**/*.ts",
-              "src/**/shared/confirm-dialog/**/*.ts",
-              "src/**/shared/error-dialog/**/*.ts",
-              "src/**/shared/markdown/**/*.ts",
-              "src/**/services/cer-api.service.ts",
-              "src/**/services/research-hub-api.service.ts",
-              "src/**/directives/search-result-link.directive.ts",
-              "src/**/pipes/list-item-to-router-link.pipe.ts"
+              "src/polyfills.ts"
             ],
             "karmaConfig": "karma.conf.js",
             "polyfills": "src/polyfills.ts",
@@ -382,7 +376,8 @@
               "src/styles.scss"
             ],
             "assets": [
-              "src/assets"
+              "src/assets",
+              "src/manifest.webmanifest"
             ],
             "stylePreprocessorOptions": {
               "includePaths": [

research-hub-web/ngsw-config.json

@@ -0,0 +1,60 @@
+{
+  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
+  "index": "/index.html",
+  "assetGroups": [
+    {
+      "name": "app",
+      "installMode": "prefetch",
+      "resources": {
+        "files": [
+          "/assets/imgs/favicon.png?v=2",
+          "/index.html",
+          "/manifest.webmanifest",
+          "/*.css",
+          "/*.js"
+        ],
+        "urls": [
+          "https://fonts.googleapis.com/**",
+          "https://fonts.gstatic.com/**",
+          "https://cdn.auckland.ac.nz/designs/uoa-digital/clientlibs/css/base/fonts/**"
+        ]
+      }
+    },
+    {
+      "name": "assets",
+      "installMode": "lazy",
+      "updateMode": "prefetch",
+      "resources": {
+        "files": [
+          "/assets/**",
+          "/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
+        ],
+        "urls": [
+          "https://images.ctfassets.net/**"
+        ]
+      }
+    }
+  ],
+  "dataGroups": [
+    {
+      "name": "cer-graphql-service",
+      "urls": ["*/cer-graphql-service"],
+      "cacheConfig": {
+        "maxSize": 10,
+        "maxAge": "1h",
+        "timeout": "10s",
+        "strategy": "freshness"
+      }
+    },
+    {
+      "name": "cer-graphql-preview-service",
+      "urls": ["*/cer-graphql-preview-service"],
+      "cacheConfig": {
+        "maxSize": 10,
+        "maxAge": "1m",
+        "timeout": "10s",
+        "strategy": "freshness"
+      }
+    }
+  ]
+}