add @angular/pwa

refs #445

angular.json

@@ -35,7 +35,8 @@
                 "glob": "**/*.png",
                 "input": "src/",
                 "output": "/"
-              }
+              },
+              "src/manifest.webmanifest"
             ],
             "styles": [
               "src/styles.scss",
@@ -75,7 +76,9 @@
             "buildOptimizer": false,
             "sourceMap": true,
             "optimization": false,
-            "namedChunks": true
+            "namedChunks": true,
+            "serviceWorker": true,
+            "ngswConfigPath": "ngsw-config.json"
           },
           "configurations": {
             "production": {
@@ -105,7 +108,7 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "ngHyd:build",
+            "browserTarget": "ngHyd:build"
           },
           "configurations": {
             "production": {
@@ -136,7 +139,8 @@
               "src/favicon.ico",
               "src/**/*.json",
               "src/**/*.md",
-              "src/**/*.png"
+              "src/**/*.png",
+              "src/manifest.webmanifest"
             ]
           }
         }

ngsw-config.json

+{
+  "$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-lock.json

@@ -22,6 +22,7 @@
         "@angular/platform-browser": "^14.0.4",
         "@angular/platform-browser-dynamic": "^14.0.4",
         "@angular/router": "^14.0.4",
+        "@angular/service-worker": "^14.0.4",
         "@ngx-matomo/tracker": "^3.0.0",
         "@types/pako": "^1.0.4",
         "@types/sprintf-js": "^1.1.2",
@@ -59,7 +60,7 @@
       },
       "devDependencies": {
         "@angular-devkit/core": "^14.0.4",
-        "@angular-eslint/eslint-plugin": "^14.0.0",
+        "@angular-eslint/eslint-plugin": "^14.0.4",
         "@angular/cli": "^14.0.4",
         "@angular/compiler-cli": "^14.0.4",
         "@angular/language-service": "^14.0.4",
@@ -927,6 +928,24 @@
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
+    "node_modules/@angular/service-worker": {
+      "version": "14.2.11",
+      "resolved": "https://registry.npmjs.org/@angular/service-worker/-/service-worker-14.2.11.tgz",
+      "integrity": "sha512-RIRhkSxjah2f4sFDduPFGS/9rXZADYPYLVO9zkOHiX9IlCzFwqOZnL9UkMrlKC1AoGr6seXkGHHtC+7gOiszoQ==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "bin": {
+        "ngsw-config": "ngsw-config.js"
+      },
+      "engines": {
+        "node": "^14.15.0 || >=16.10.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "14.2.11",
+        "@angular/core": "14.2.11"
+      }
+    },
     "node_modules/@assemblyscript/loader": {
       "version": "0.10.1",
       "resolved": "https://registry.npmjs.org/@assemblyscript/loader/-/loader-0.10.1.tgz",
@@ -23295,6 +23314,14 @@
         "tslib": "^2.3.0"
       }
     },
+    "@angular/service-worker": {
+      "version": "14.2.11",
+      "resolved": "https://registry.npmjs.org/@angular/service-worker/-/service-worker-14.2.11.tgz",
+      "integrity": "sha512-RIRhkSxjah2f4sFDduPFGS/9rXZADYPYLVO9zkOHiX9IlCzFwqOZnL9UkMrlKC1AoGr6seXkGHHtC+7gOiszoQ==",
+      "requires": {
+        "tslib": "^2.3.0"
+      }
+    },
     "@assemblyscript/loader": {
       "version": "0.10.1",
       "resolved": "https://registry.npmjs.org/@assemblyscript/loader/-/loader-0.10.1.tgz",

package.json

@@ -48,6 +48,7 @@
     "@angular/platform-browser": "^14.0.4",
     "@angular/platform-browser-dynamic": "^14.0.4",
     "@angular/router": "^14.0.4",
+    "@angular/service-worker": "^14.0.4",
     "@ngx-matomo/tracker": "^3.0.0",
     "@types/pako": "^1.0.4",
     "@types/sprintf-js": "^1.1.2",
@@ -85,7 +86,7 @@
   },
   "devDependencies": {
     "@angular-devkit/core": "^14.0.4",
-    "@angular-eslint/eslint-plugin": "^14.0.0",
+    "@angular-eslint/eslint-plugin": "^14.0.4",
     "@angular/cli": "^14.0.4",
     "@angular/compiler-cli": "^14.0.4",
     "@angular/language-service": "^14.0.4",

src/app/app.module.ts

@@ -123,6 +123,8 @@ import { DialogConfirmLoadSessionURLComponent } from "./components/dialog-confir
 import { StructureFieldsetContainerComponent } from "./components/structure-fieldset-container/structure-fieldset-container.component";
 import { BasinFieldsetContainerComponent } from "./components/basin-fieldset-container/basin-fieldset-container.component";
 import { PrebarrageService } from "./services/prebarrage.service";
+import { ServiceWorkerModule } from '@angular/service-worker';
+import { environment } from '../environments/environment';
 
 const appRoutes: Routes = [
     { path: "list/search", component: CalculatorListComponent },
@@ -187,7 +189,13 @@ const appRoutes: Routes = [
             enableTracing: false,
             relativeLinkResolution: 'legacy'
         }),
-        TableModule
+        TableModule,
+        ServiceWorkerModule.register('ngsw-worker.js', {
+          enabled: environment.production,
+          // Register the ServiceWorker as soon as the application is stable
+          // or after 30 seconds (whichever comes first).
+          registrationStrategy: 'registerWhenStable:30000'
+        })
     ],
     declarations: [
         AppComponent,

src/index.html

@@ -14,6 +14,8 @@
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#ffffff">
 
    <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="manifest" href="manifest.webmanifest">
+  <meta name="theme-color" content="#1976d2">
 </head>
 
 <body>
@@ -41,57 +43,32 @@
       </style>
       <div class="app-loading">
          <div class="logo">
-            <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#"
-               xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg"
-               xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-               xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" id="svg3406" version="1.1"
-               inkscape:version="0.92.3 (2405546, 2018-03-11)" width="167.55714" height="167.55714"
-               viewBox="0 0 167.55714 167.55714" sodipodi:docname="cassiopee_logo.svg">
+            <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" id="svg3406" version="1.1" inkscape:version="0.92.3 (2405546, 2018-03-11)" width="167.55714" height="167.55714" viewBox="0 0 167.55714 167.55714" sodipodi:docname="cassiopee_logo.svg">
                <metadata id="metadata3412">
-                  <rdf:RDF>
-                     <cc:Work rdf:about="">
+                  <rdf:rdf>
+                     <cc:work rdf:about="">
                         <dc:format>image/svg+xml</dc:format>
-                        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" ></dc:type>
+                        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"></dc:type>
                         <dc:title></dc:title>
-                     </cc:Work>
-                  </rdf:RDF>
+                     </cc:work>
+                  </rdf:rdf>
                </metadata>
                <defs id="defs3410"></defs>
                <g inkscape:groupmode="layer" id="layer1" inkscape:label="background">
-                  <rect
-                     style="fill:#003a80;stroke:none;stroke-width:8;stroke-miterlimit:4;stroke-dasharray:none;fill-opacity:1;stroke-opacity:1;stroke-linejoin:round"
-                     id="fond" width="165.55714" height="165.55714" x="1" y="1"></rect>
+                  <rect style="fill:#003a80;stroke:none;stroke-width:8;stroke-miterlimit:4;stroke-dasharray:none;fill-opacity:1;stroke-opacity:1;stroke-linejoin:round" id="fond" width="165.55714" height="165.55714" x="1" y="1"></rect>
                </g>
                <g inkscape:groupmode="layer" id="calque_traits" inkscape:label="traits">
-                  <path
-                     style="fill:#80b3ff;fill-rule:evenodd;stroke:#4dbbe9;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-                     d="M 16.234557,39.786389 36.297745,77.631687" id="trait_1" inkscape:connector-curvature="0"></path>
-                  <path
-                     style="fill:#80b3ff;fill-rule:evenodd;stroke:#4dbbe9;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-                     d="m 47.234816,83.975938 27.27422,0.39174" id="trait_2" inkscape:connector-curvature="0"></path>
-                  <path
-                     style="fill:#80b3ff;fill-rule:evenodd;stroke:#4dbbe9;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-                     d="M 85.615846,92.002058 101.01379,128.05358" id="trait_3" inkscape:connector-curvature="0"></path>
-                  <path
-                     style="fill:#80b3ff;fill-rule:evenodd;stroke:#4dbbe9;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-                     d="m 145.82968,107.86632 -35.62153,23.78874" id="trait_4" inkscape:connector-curvature="0"></path>
+                  <path style="fill:#80b3ff;fill-rule:evenodd;stroke:#4dbbe9;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="M 16.234557,39.786389 36.297745,77.631687" id="trait_1" inkscape:connector-curvature="0"></path>
+                  <path style="fill:#80b3ff;fill-rule:evenodd;stroke:#4dbbe9;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 47.234816,83.975938 27.27422,0.39174" id="trait_2" inkscape:connector-curvature="0"></path>
+                  <path style="fill:#80b3ff;fill-rule:evenodd;stroke:#4dbbe9;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="M 85.615846,92.002058 101.01379,128.05358" id="trait_3" inkscape:connector-curvature="0"></path>
+                  <path style="fill:#80b3ff;fill-rule:evenodd;stroke:#4dbbe9;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 145.82968,107.86632 -35.62153,23.78874" id="trait_4" inkscape:connector-curvature="0"></path>
                </g>
                <g inkscape:groupmode="layer" id="calque_points" inkscape:label="points">
-                  <circle
-                     style="fill:#ffffff;stroke:#003a80;stroke-width:10;stroke-miterlimit:66;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill"
-                     id="point_1" cx="12.879179" cy="34.64555" r="6"></circle>
-                  <circle
-                     style="fill:#ffffff;stroke:#003a80;stroke-width:10;stroke-miterlimit:66;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill"
-                     id="point_2" cx="39.734871" cy="83.581924" r="10"></circle>
-                  <circle
-                     style="fill:#ffffff;stroke:#003a80;stroke-width:10;stroke-linejoin:round;stroke-miterlimit:66;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill"
-                     id="point_3" cx="82.500542" cy="84.860001" r="10"></circle>
-                  <circle
-                     style="fill:#ffffff;stroke:#003a80;stroke-width:10;stroke-miterlimit:66;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill"
-                     id="point_4" cx="104.12913" cy="135.35852" r="10"></circle>
-                  <circle
-                     style="fill:#ffffff;stroke:#003a80;stroke-width:10;stroke-miterlimit:66;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill"
-                     id="point_5" cx="151.57199" cy="103.73587" r="10"></circle>
+                  <circle style="fill:#ffffff;stroke:#003a80;stroke-width:10;stroke-miterlimit:66;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill" id="point_1" cx="12.879179" cy="34.64555" r="6"></circle>
+                  <circle style="fill:#ffffff;stroke:#003a80;stroke-width:10;stroke-miterlimit:66;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill" id="point_2" cx="39.734871" cy="83.581924" r="10"></circle>
+                  <circle style="fill:#ffffff;stroke:#003a80;stroke-width:10;stroke-linejoin:round;stroke-miterlimit:66;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill" id="point_3" cx="82.500542" cy="84.860001" r="10"></circle>
+                  <circle style="fill:#ffffff;stroke:#003a80;stroke-width:10;stroke-miterlimit:66;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill" id="point_4" cx="104.12913" cy="135.35852" r="10"></circle>
+                  <circle style="fill:#ffffff;stroke:#003a80;stroke-width:10;stroke-miterlimit:66;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill" id="point_5" cx="151.57199" cy="103.73587" r="10"></circle>
                </g>
             </svg>
          </div>
@@ -282,6 +259,7 @@
       }
    </script>
 
+  <noscript>Please enable JavaScript to continue using this application.</noscript>
 </body>
 
 </html>
\ No newline at end of file

src/manifest.webmanifest

+{
+  "name": "Cassiopee, tools for designing fish crossing devices for upstream and downstream migrations and hydraulic calculation for environmental and agricultural engineering",
+  "short_name": "Cassiopee",
+  "theme_color": "#1976d2",
+  "background_color": "#fafafa",
+  "display": "standalone",
+  "scope": "./",
+  "start_url": "./",
+  "icons": [
+    {
+      "src": "assets/icons/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable any"
+    }
+  ]
+}