Progressive web app (Nault#367)

* Basic PWA support

* Theme color

* Removed manifest reference added by angular cli

* Added update notification

* Basic install widget

* Fixed annoying scrolling bug on mobile

* Minor fixes

* Minor tweaks

* Better platform detection

* iOS instructions

* Success notification and viewport styling

* Styling

* Dark bg color

* Another color change

* Yet another color change

* Small tweaks to update/install UX

* Styling

* Bugfix

* Several Install widget fixes

* Updated angular service-worker

* Changed install widget

* Caching strategies

* Linting

* Styling

* PR comments

angular.json

@@ -20,7 +20,8 @@
             "assets": [
               "src/assets",
               "src/pow.wasm",
-              "src/404.html"
+              "src/404.html",
+              "src/manifest.webmanifest"
             ],
             "styles": [
               "src/styles.less"
@@ -71,7 +72,9 @@
                   "replace": "src/environments/environment.ts",
                   "with": "src/environments/environment.prod.ts"
                 }
-              ]
+              ],
+              "serviceWorker": true,
+              "ngswConfigPath": "ngsw-config.json"
             },
             "desktop": {
               "budgets": [
@@ -131,7 +134,8 @@
             ],
             "assets": [
               "src/assets",
-              "src/pow.wasm"
+              "src/pow.wasm",
+              "src/manifest.webmanifest"
             ]
           }
         },

ngsw-config.json

@@ -0,0 +1,50 @@
+{
+  "$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/**",
+          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
+        ]
+      }
+    }
+  ],
+  "dataGroups": [
+    {
+      "name": "coingecko",
+      "urls": ["https://api.coingecko.com/**"],
+      "cacheConfig": {
+        "maxSize": 3,
+        "maxAge": "60d",
+        "strategy": "freshness"
+      }
+    },
+    {
+      "name": "ninja",
+      "urls": ["https://mynano.ninja/api/**"],
+      "cacheConfig": {
+        "maxSize": 50,
+        "maxAge": "60d",
+        "strategy": "freshness"
+      }
+    }
+  ]
+}

package.json

@@ -38,6 +38,7 @@
     "@angular/platform-browser": "^10.0.7",
     "@angular/platform-browser-dynamic": "^10.0.7",
     "@angular/router": "^10.0.7",
+    "@angular/service-worker": "^10.2.5",
     "@ledgerhq/hw-transport": "^5.39.0",
     "@ledgerhq/hw-transport-node-ble": "^5.39.0",
     "@ledgerhq/hw-transport-node-hid": "^5.39.0",

src/app/app.component.html

@@ -224,6 +224,8 @@
           </li>
         </ul>
 
+        <app-install-widget></app-install-widget>
+
         <div class="nav-search">
           <form class="uk-search uk-search-default uk-width-1-1">
             <a href="javascript:void(0)" (click)="performSearch()" class="uk-search-icon-flip" uk-search-icon></a>