.gitignore

@@ -32,6 +32,7 @@ speed-measure-plugin*.json
 .history/*
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage

.gitlab-ci.yml

@@ -28,18 +28,6 @@ build_dev:
     - docker build --pull -t "$CI_REGISTRY_IMAGE:dev" --build-arg conf=dev .
     - docker push "$CI_REGISTRY_IMAGE:dev"
 
-build_mobile:
-  image: ${CI_DEPENDENCY_PROXY_DIRECT_GROUP_IMAGE_PREFIX}/docker:18.09
-  services:
-    - docker:18.09-dind
-  stage: build
-  only:
-    - mobile
-  script:
-    - docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY
-    - docker build --pull -t "$CI_REGISTRY_IMAGE:mobile" --build-arg conf=dev .
-    - docker push "$CI_REGISTRY_IMAGE:mobile"
-
 build_json_server:
   image: ${CI_DEPENDENCY_PROXY_DIRECT_GROUP_IMAGE_PREFIX}/docker:18.09
   services:
@@ -123,3 +111,17 @@ mr:
   script:
     - docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY
     - docker build --pull -t "$CI_REGISTRY_IMAGE:dev" --build-arg conf=dev .
+
+# Job for auto building pwa in case of issue
+# Juste create a new branche 'pwa'
+pwa-build:
+  image: ${CI_DEPENDENCY_PROXY_DIRECT_GROUP_IMAGE_PREFIX}/docker:18.09
+  services:
+    - docker:18.09-dind
+  stage: build
+  only:
+    - feat/poc-pwa
+  script:
+    - docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY
+    - docker build --pull -t "$CI_REGISTRY_IMAGE:pwa" --build-arg conf=dev .
+    - docker push "$CI_REGISTRY_IMAGE:pwa"

CHANGELOG.md

@@ -2,6 +2,25 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [1.13.0](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/compare/v1.12.0...v1.13.0) (2022-02-07)
+
+
+### ⚠ BREAKING CHANGES
+
+* app is now working with PWA handling
+
+### Features
+
+* add pwa handling ([d951ced](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/d951ced8a2641fa42b441da47fe1304b05e78c15))
+* **pages:** display pages from ghost (eg. : about page and accessibility page) ([64ce8ca](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/64ce8ca54ea67210436a267242435c25d5987609))
+
+
+### Bug Fixes
+
+* **footer:** temporarily hide accessibility link in footer until page is ready ([5cd7490](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/5cd7490c5b2b1b656f13b39c01c125a03247dc13))
+* **pwa:** ghost caching in pwa was making ui unavailable ([d845a32](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/d845a32a3abf1e4d269c79c59cc01f9744687721))
+* **pwa:** typo in update notification ([6734cfe](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/6734cfec748b3952a417c6809200bf7f64b49430))
+
 ## [1.12.0](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/compare/v1.11.1...v1.12.0) (2022-02-01)
 
 

Dockerfile

 # Stage 0, based on Node.js, to build and compile Angular
-FROM node:12.16-slim as build
+FROM node:14.18-slim as build
 
 WORKDIR /app
 
@@ -14,6 +14,7 @@ RUN npm install --silent
 COPY angular.json .
 COPY tsconfig.json .
 COPY tsconfig.app.json .
+COPY ngsw-config.json .
 COPY /nginx/nginx.conf .
 COPY /src ./src
 

angular.json

@@ -35,13 +35,15 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
             "localize": true,
-            "aot": true,
             "allowedCommonJsDependencies": ["lodash", "leaflet.locatecontrol"],
             "assets": [
               "src/favicon.ico",
               "src/assets",
               "src/sitemap.xml",
               "src/robots.txt",
+              "src/ngsw-worker.js",
+              "src/ngsw.json",
+              "src/manifest.webmanifest",
               {
                 "glob": "**/*",
                 "input": "./node_modules/leaflet/dist/images",
@@ -53,7 +55,15 @@
               "./node_modules/leaflet/dist/leaflet.css",
               "./node_modules/leaflet.locatecontrol/dist/L.Control.Locate.css"
             ],
-            "scripts": []
+            "scripts": [],
+            "serviceWorker": true,
+            "ngswConfigPath": "ngsw-config.json",
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
           },
           "configurations": {
             "production": {
@@ -63,15 +73,12 @@
                   "with": "src/environments/environment.prod.ts"
                 }
               ],
-              "aot": true,
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "extractLicenses": true,
               "vendorChunk": false,
-              "buildOptimizer": false,
               "budgets": [
                 {
                   "type": "initial",
@@ -83,7 +90,9 @@
                   "maximumWarning": "10kb",
                   "maximumError": "15kb"
                 }
-              ]
+              ],
+              "serviceWorker": true,
+              "ngswConfigPath": "ngsw-config.json"
             },
             "fr": {
               "localize": ["fr"]
@@ -91,7 +100,8 @@
             "en": {
               "localize": ["en"]
             }
-          }
+          },
+          "defaultConfiguration": ""
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
@@ -124,18 +134,11 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
-            "assets": ["src/favicon.ico", "src/assets"],
+            "assets": ["src/favicon.ico", "src/assets", "src/manifest.webmanifest"],
             "styles": ["src/styles.scss"],
             "scripts": []
           }
         },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": ["tsconfig.app.json", "tsconfig.spec.json", "e2e/tsconfig.json"],
-            "exclude": ["**/node_modules/**"]
-          }
-        },
         "e2e": {
           "builder": "@angular-devkit/build-angular:protractor",
           "options": {

nginx/dev.conf

+upstream api_node_js {
+	server	service-ram:3000;
+}
+
 map $http_user_agent $outdated {
   default                                 0;
   "~MSIE [1-10]\."                        1;

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)"]
+      }
+    }
+  ],
+  "dataGroups": [
+    {
+      "name": "ghost",
+      "urls": ["/blog/**"],
+      "cacheConfig": {
+        "strategy": "freshness",
+        "maxSize": 10000,
+        "maxAge": "12h",
+        "timeout": "5s"
+      }
+    }
+  ]
+}

package.json

 {
   "name": "pamn",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve --configuration=fr --proxy-config proxy.conf.json",
-    "build:prod": "ng build --prod --configuration=production,fr --output-path=dist --subresource-integrity",
-    "build:dev": "ng build --prod --configuration=fr --output-path=dist --subresource-integrity",
-    "doc": "npx @compodoc/compodoc -p tsconfig.doc.json",
-    "doc:serve": "npm run doc && npx compodoc -s",
+    "start-pwa": "npm run build:prod && http-server -p 8080 -c-1 dist/fr --proxy http://localhost:3000",
+    "build:prod": "ng build --configuration=production,fr --output-path=dist --subresource-integrity",
+    "build:dev": "ng build --configuration=production,fr --output-path=dist --subresource-integrity",
+    "doc": "./node_modules/.bin/compodoc -p tsconfig.doc.json",
+    "doc:serve": "./node_modules/.bin/compodoc compodoc -s",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e",
@@ -17,48 +18,49 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~11.2.12",
-    "@angular/cdk": "^10.2.3",
-    "@angular/common": "~11.2.12",
-    "@angular/compiler": "~11.2.12",
-    "@angular/core": "~11.2.12",
+    "@angular/animations": "~13.1.1",
+    "@angular/cdk": "^13.1.1",
+    "@angular/common": "~13.1.1",
+    "@angular/compiler": "~13.1.1",
+    "@angular/core": "~13.1.1",
     "@angular/flex-layout": "^10.0.0-beta.32",
-    "@angular/forms": "~11.2.12",
-    "@angular/platform-browser": "~11.2.12",
-    "@angular/platform-browser-dynamic": "~11.2.12",
-    "@angular/router": "~11.2.12",
+    "@angular/forms": "~13.1.1",
+    "@angular/platform-browser": "~13.1.1",
+    "@angular/platform-browser-dynamic": "~13.1.1",
+    "@angular/router": "~13.1.1",
+    "@angular/service-worker": "~13.1.1",
     "@asymmetrik/ngx-leaflet": "^8.1.0",
     "@ngx-translate/core": "^13.0.0",
     "ag-grid-angular": "^26.2.0",
     "ag-grid-community": "^26.2.1",
     "ag-grid-enterprise": "^26.2.1",
-    "json-server": "^0.16.2",
+    "json-server": "^0.17.0",
     "jwt-decode": "^3.1.2",
     "leaflet": "^1.7.1",
     "leaflet.locatecontrol": "^0.72.0",
-    "lodash": "^4.17.20",
+    "lodash": "^4.17.21",
     "luxon": "^1.25.0",
     "ngx-toastr": "^13.2.1",
-    "npx": "^10.2.2",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
-    "zone.js": "~0.10.2"
+    "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.1100.6",
-    "@angular/cli": "^11.2.11",
-    "@angular/compiler-cli": "~11.2.12",
-    "@angular/localize": "^11.2.12",
-    "@compodoc/compodoc": "^1.1.11",
+    "@angular-devkit/build-angular": "^13.2.1",
+    "@angular/cli": "^13.1.2",
+    "@angular/compiler-cli": "~13.1.1",
+    "@angular/localize": "^13.1.1",
+    "@compodoc/compodoc": "^1.1.16",
     "@types/jasmine": "~3.5.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/leaflet": "^1.5.17",
     "@types/leaflet.locatecontrol": "^0.60.7",
     "@types/node": "^12.12.67",
     "codelyzer": "^6.0.0",
+    "http-server": "^14.1.0",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~5.0.0",
+    "karma": "^6.3.9",
     "karma-browserify": "^7.0.0",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "~3.0.2",
@@ -66,9 +68,9 @@
     "karma-jasmine-html-reporter": "^1.5.0",
     "prettier": "^2.1.2",
     "protractor": "~7.0.0",
-    "standard-version": "^9.0.0",
+    "standard-version": "^9.3.2",
     "ts-node": "~8.3.0",
     "tslint": "~6.1.0",
-    "typescript": "~4.0.2"
+    "typescript": "~4.5.4"
   }
 }

proxy.conf.json

@@ -3,10 +3,7 @@
     "target": "http://localhost:3000",
     "secure": false,
     "changeOrigin": true,
-    "logLevel": "debug",
-    "pathRewrite": {
-      "^/api": ""
-    }
+    "logLevel": "debug"
   },
   "/base-adresse/base-adresse-nationale/streets": {
     "target": "https://passerelle.formulaireextranet.grandlyon.com",

src/app/about/about.component.html

-<div fxLayout="column" class="content-container full-screen">
-  <div class="section-container">
-    <div fxLayout="row" fxLayout.lt-sm="column" fxLayoutAlign="left" fxLayoutGap="5%">
-      <div class="about-container">
-        <h1>Qui sommes-nous ?</h1>
-        <p>
-          La numérisation accélérée des différents services privés et publics ainsi que la crise sanitaire que nous
-          traversons a renforcé une fracture numérique déjà forte pour un nombre important de citoyens.
-        </p>
-        <p>
-          Au printemps 2019, la Métropole de Lyon s'est saisie des enjeux autour de l'inclusion numérique en initiant la
-          structuration d'un réseau des acteurs de la médiation numérique sur son territoire. Son objectif est de mettre
-          en relation les acteurs qui œuvrent au quotidien pour limiter cette fracture numérique, nombreux sur le
-          territoire de la Métropole : associations, centres sociaux, structures informations jeunesses, grands
-          opérateurs de services publics, collectivités...
-        </p>
-        <p>
-          Des ateliers de travail ont été organisés en 2019 pour identifier les besoins de ces acteurs et 9 offres de
-          services ont été identifiées :
-        </p>
-        <h2>Recenser et partager des ressources existantes (optimisation)</h2>
-        <img src="/assets/img/about_illustration_1.jpg" width="640" height="114" alt="illustration des besoins" />
-        <h2>Co-construire de nouvelles ressources (développement)</h2>
-        <img src="/assets/img/about_illustration_2.jpg" width="640" height="149" alt="illustration des besoins" />
-        <p>
-          Cet espace vise à centraliser et mettre en commun les ressources développées dans le cadre du réseau par ses
-          acteurs.
-        </p>
-        <p>N'hésitez pas à contribuer à cet espace en partageant vos ressources</p>
-        <p class="version" fxLayoutAlign="center center">Version : {{ version }}</p>
-      </div>
-      <div fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="20px">
-        <img src="/assets/logos/logo_europe.png" width="220" height="168" alt="logo de l'union européenne" />
-        <img src="/assets/logos/logo_region.png" width="220" height="98" alt="logo de la région Auverge-Rhône-Alpes" />
-      </div>
-    </div>
-  </div>
-</div>

src/app/about/about.component.ts

-import { Component, OnInit } from '@angular/core';
-import { version } from '../../../package.json';
-
-@Component({
-  selector: 'app-about',
-  templateUrl: './about.component.html',
-  styleUrls: ['./about.component.scss'],
-})
-export class AboutComponent implements OnInit {
-  public version: string = version;
-
-  constructor() {}
-
-  ngOnInit(): void {}
-}

src/app/app-routing.module.ts

 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-import { AboutComponent } from './about/about.component';
+import { PageComponent } from './page/page.component';
 import { ContactComponent } from './contact/contact.component';
 import { FormComponent } from './form/structure-form/form.component';
 import { AdminGuard } from './guards/admin.guard';
@@ -46,8 +46,8 @@ const routes: Routes = [
     component: LegalNoticeComponent,
   },
   {
-    path: 'about',
-    component: AboutComponent,
+    path: 'page/:slugPage',
+    component: PageComponent,
   },
   {
     path: 'contact',

src/app/app.component.ts

@@ -3,6 +3,7 @@ import { NavigationEnd, Router } from '@angular/router';
 import { ProfileService } from './profile/services/profile.service';
 import { AuthService } from './services/auth.service';
 import { RouterListenerService } from './services/routerListener.service';
+import { UpdateService } from './services/update.service';
 import { PrintService } from './shared/service/print.service';
 import { WindowScrollService } from './shared/service/windowScroll.service';
 
@@ -20,6 +21,7 @@ export class AppComponent implements OnInit {
     private profilService: ProfileService,
     private windowScrollService: WindowScrollService,
     private routerListener: RouterListenerService,
+    private updateService: UpdateService,
     private router: Router
   ) {
     if (this.authService.isLoggedIn()) {
@@ -30,6 +32,8 @@ export class AppComponent implements OnInit {
       this.setHeightApp();
     });
     this.routerListener.loadRouting();
+    // handle pwa update
+    this.updateService.subscribeUpdate();
   }
 
   ngOnInit(): void {

src/app/app.module.ts

@@ -20,7 +20,7 @@ import { StructureDetailsComponent } from './structure-list/components/structure
 import { StructureOpeningStatusComponent } from './structure-list/components/structure-opening-status/structure-opening-status.component';
 import { ModalFilterComponent } from './structure-list/components/modal-filter/modal-filter.component';
 import { LegalNoticeComponent } from './legal-notice/legal-notice.component';
-import { AboutComponent } from './about/about.component';
+import { PageComponent } from './page/page.component';
 import { ContactComponent } from './contact/contact.component';
 import { FormComponent } from './form/structure-form/form.component';
 import { UserVerificationComponent } from './user-verification/user-verification.component';
@@ -39,8 +39,11 @@ import { OrientationFormComponent } from './form/orientation-form/orientation-fo
 import { StructureDetailPrintComponent } from './form/orientation-form/component/structure-detail-print/structure-detail-print.component';
 import { StructureListPrintComponent } from './form/orientation-form/component/structure-list-print/structure-list-print.component';
 import { StructurePrintHeaderComponent } from './form/orientation-form/component/structure-print-header/structure-print-header.component';
+import { ServiceWorkerModule } from '@angular/service-worker';
+import { environment } from '../environments/environment';
 import { StructureResolver } from './resolvers/structure.resolver';
 import { RoleGuard } from './guards/role.guard';
+import { UpdateService } from './services/update.service';
 
 @NgModule({
   declarations: [
@@ -55,7 +58,7 @@ import { RoleGuard } from './guards/role.guard';
     StructureDetailsComponent,
     StructureOpeningStatusComponent,
     LegalNoticeComponent,
-    AboutComponent,
+    PageComponent,
     ContactComponent,
     UserVerificationComponent,
     ResetEmailComponent,
@@ -77,6 +80,9 @@ import { RoleGuard } from './guards/role.guard';
     MapModule,
     BrowserAnimationsModule,
     ToastrModule.forRoot(),
+    ServiceWorkerModule.register('ngsw-worker.js', {
+      enabled: environment.production,
+    }),
   ],
   providers: [
     { provide: LOCALE_ID, useValue: 'fr' },
@@ -89,6 +95,7 @@ import { RoleGuard } from './guards/role.guard';
     TempUserResolver,
     StructureResolver,
     RouterListenerService,
+    UpdateService,
   ],
   bootstrap: [AppComponent],
 })

src/app/footer/footer.component.html

 <div class="footer" fxLayout="row" fxLayoutAlign="center">
   <div fxLayout="row">
+    <!--a class="clickable text-align-center" routerLink="/page/accessibilite" i18n>Accessibilité</a-->
     <a class="clickable text-align-center" routerLink="/legal-notice" i18n>Mentions légales</a>
     <a class="clickable text-align-center" routerLink="/newsletter" i18n>Newsletter</a>
     <!-- <a class="clickable text-align-center" routerLink="/sitemap" i18n>Plan du site</a> -->

src/app/header/header.component.html

@@ -19,7 +19,7 @@
     <a routerLink="/news" [routerLinkActive]="'active'" i18n>Actualités</a>
     <a routerLink="/acteurs" [routerLinkActive]="'active'" i18n>Cartographie des acteurs</a>
     <a routerLink="/orientation" [routerLinkActive]="'active'" i18n>Orienter un bénéficiaire</a>
-    <a routerLink="/about" [routerLinkActive]="'active'" i18n>Qui sommes-nous ?</a>
+    <a routerLink="/page/qui-sommes-nous" [routerLinkActive]="'active'" i18n>Qui sommes-nous ?</a>
     <a *ngIf="isAdmin" routerLink="/admin" [routerLinkActive]="'active'">Administration</a>
     <button *ngIf="isLoggedIn" class="red" routerLink="/profile" [routerLinkActive]="'active'">
       {{ displayName }}
@@ -39,7 +39,7 @@
         <a routerLink="/news" [routerLinkActive]="'active'" (click)="closeMenu()" i18n>Actualités</a>
         <a routerLink="/acteurs" [routerLinkActive]="'active'" (click)="closeMenu()" i18n>Cartographie de acteurs</a>
         <a routerLink="/orientation" [routerLinkActive]="'active'" i18n>Orienter un bénéficiaire</a>
-        <a routerLink="/about" [routerLinkActive]="'active'" i18n>Qui sommes-nous ?</a>
+        <a routerLink="/page/qui-sommes-nous" [routerLinkActive]="'active'" i18n>Qui sommes-nous ?</a>
         <a *ngIf="isAdmin" routerLink="/admin" [routerLinkActive]="'active'" (click)="closeMenu()">Administration</a>
       </div>
     </div>

src/app/page/enum/page.enum.ts

+export enum PageEnum {
+  quiSommesNous = 'qui-sommes-nous',
+  accessibilite = 'accessibilite',
+}

src/app/page/models/page.model.ts

+import { SafeHtml } from '@angular/platform-browser';
+
+export class Page {
+  pages: Page[];
+  id: number;
+  published_at: Date;
+  updated_at: Date;
+  title: string;
+  excerpt: string;
+  feature_image: string;
+  html: string;
+  safeHtml: SafeHtml;
+
+  constructor(obj?: any) {
+    Object.assign(this, obj);
+  }
+}

src/app/page/page.component.html

+<div fxLayout="column" class="content-container full-screen">
+  <div class="section-container">
+    <div class="postContainer" *ngIf="page" fxLayout="column" fxLayoutGap="16px">
+      <div class="gh-canvas">
+        <div fxLayout="column" fxLayoutAlign="center none">
+          <div fxLayout="row" class="title">{{ page.title }}</div>
+        </div>
+        <div fxLayout="row" class="article-image" *ngIf="page.feature_image">
+          <img class="image" alt="image about the news" [src]="page.feature_image" />
+        </div>
+        <div fxLayout="row" class="description">
+          <div [innerHtml]="page.safeHtml"></div>
+        </div>
+        <p *ngIf="version" class="version" fxLayoutAlign="center center">Version : {{ version }}</p>
+      </div>
+    </div>
+  </div>
+</div>