feat: display loading page when service worker is booting up

Dockerfile

@@ -15,6 +15,9 @@ RUN node schematics/customization/service-worker ${serviceWorker} || true
 RUN npm run ng -- build -c ${configuration}
 COPY tsconfig.server.json server.ts /workspace/
 RUN npm run ng -- run intershop-pwa:server:${configuration} --bundleDependencies
+# remove cache check for resources (especially index.html)
+# https://github.com/angular/angular/issues/23613#issuecomment-415886919
+RUN test "${serviceWorker}" = "true" && sed -i 's/canonicalHash !== cacheBustedHash/false/g' /workspace/dist/browser/ngsw-worker.js || true
 RUN egrep -o '^\s*(mockServerAPI: true|mustMockPaths)' src/environments/environment.prod.ts || rm -Rf dist/browser/assets/mock*
 COPY dist/entrypoint.sh dist/healthcheck.js dist/server.crt dist/server.key dist/robots.txt* /workspace/dist/
 

nginx/channel.conf.tmpl

@@ -22,14 +22,11 @@ server {
 
     # respect cache entries of static assets
     location ~* ^/(ngx_pagespeed_beacon|assets|.*\.(js|css|ico|json|txt|webmanifest|woff|woff2))(.*)$ {
-        proxy_cache my_cache;
-        proxy_cache_use_stale error timeout http_404 http_500 http_502 http_503 http_504;
-
         proxy_set_header Host $http_host;
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_set_header X-Forwarded-Proto $scheme;
-        add_header X-Cache-Status $upstream_cache_status;
+        add_header X-Cache-Status INHERITED;
 
         proxy_pass $UPSTREAM_PWA;
         proxy_buffer_size 128k;
@@ -59,6 +56,8 @@ server {
         add_header X-icm-default-lang $LANG always;
         add_header X-ua-device $ua_device always;
 
+        rewrite ^.*/index.html$ /loading;
+
         rewrite ^/$ /home;
 
         rewrite '^(?!.*;lang=.*)(.*)$' '$1;lang=$LANG';

ngsw-config.json

@@ -5,8 +5,15 @@
     {
       "name": "app",
       "installMode": "prefetch",
+      "updateMode": "prefetch",
       "resources": {
-        "files": ["/favicon.ico", "/*.css", "/*.js", "/manifest.webmanifest"]
+        "files": [
+          "/favicon.ico",
+          "/index.html",
+          "/*.css",
+          "/*.js",
+          "/manifest.webmanifest"
+        ]
       }
     },
     {
@@ -20,5 +27,42 @@
         ]
       }
     }
-  ]
+  ],
+  "dataGroups": [
+    {
+      "name": "ICM REST API",
+      "urls": ["**/INTERSHOP/rest/**/cms"],
+      "cacheConfig": {
+        "strategy": "freshness",
+        "maxAge": "1m",
+        "maxSize": 100000,
+        "timeout": "5s"
+      }
+    },
+    {
+      "name": "cached ICM REST API",
+      "urls": [
+        "**/INTERSHOP/rest/**/products",
+        "**/INTERSHOP/rest/**/categories",
+        "**/INTERSHOP/rest/**/configurations"
+      ],
+      "cacheConfig": {
+        "strategy": "performance",
+        "maxAge": "10m",
+        "maxSize": 100000,
+        "timeout": "5s"
+      }
+    },
+    {
+      "name": "ICM static resources",
+      "urls": ["**/INTERSHOP/static/**"],
+      "cacheConfig": {
+        "strategy": "performance",
+        "maxAge": "1d",
+        "maxSize": 100000,
+        "timeout": "5s"
+      }
+    }
+  ],
+  "navigationUrls": ["/**", "!/*.json", "!/*.ico", "!/INTERSHOP/**"]
 }

src/app/pages/app-routing.module.ts

@@ -8,6 +8,7 @@ import { LogoutGuard } from 'ish-core/guards/logout.guard';
 
 const routes: Routes = [
   { path: '', redirectTo: '/home', pathMatch: 'full' },
+  { path: 'loading', loadChildren: () => import('./loading/loading-page.module').then(m => m.LoadingPageModule) },
   {
     path: 'home',
     loadChildren: () => import('./home/home-page.module').then(m => m.HomePageModule),

src/app/pages/loading/loading-page.component.html

@@ -0,0 +1,2 @@
+<ish-loading></ish-loading>
+<p style="height: 400px;"></p>

src/app/pages/loading/loading-page.component.spec.ts

@@ -0,0 +1,30 @@
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { MockComponent } from 'ng-mocks';
+
+import { LoadingComponent } from 'ish-shared/components/common/loading/loading.component';
+
+import { LoadingPageComponent } from './loading-page.component';
+
+describe('Loading Page Component', () => {
+  let component: LoadingPageComponent;
+  let fixture: ComponentFixture<LoadingPageComponent>;
+  let element: HTMLElement;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [LoadingPageComponent, MockComponent(LoadingComponent)],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoadingPageComponent);
+    component = fixture.componentInstance;
+    element = fixture.nativeElement;
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+    expect(element).toBeTruthy();
+    expect(() => fixture.detectChanges()).not.toThrow();
+  });
+});

src/app/pages/loading/loading-page.component.ts

@@ -0,0 +1,8 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'ish-loading-page',
+  templateUrl: './loading-page.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LoadingPageComponent {}

src/app/pages/loading/loading-page.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { SharedModule } from 'ish-shared/shared.module';
+
+import { LoadingPageComponent } from './loading-page.component';
+
+const loadingPageRoutes: Routes = [
+  {
+    path: '',
+    component: LoadingPageComponent,
+    data: {
+      wrapperClass: 'errorpage',
+      headerType: 'simple',
+    },
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(loadingPageRoutes), SharedModule],
+  declarations: [LoadingPageComponent],
+})
+export class LoadingPageModule {}