feat: extended multiple theme support to control system icons (e.g. f…

…avicon), manifest.webmanifest and theme-color as well (#88, #100)

closes: #88

.gitlab-ci.yml

@@ -379,7 +379,7 @@ deploy_demo_b2b:
       --name ${SERVICE}
       --env ICM_BASE_URL=$ICM_BASE_URL
       --env LOGGING=true
-      --env THEME=blue
+      --env THEME=blue|688dc3
       --env FEATURES=quoting,compare,recently,businessCustomerRegistration,advancedVariationHandling,sentry
       --env ICM_CHANNEL=inSPIRED-inTRONICS_Business-Site
       --env SENTRY_DSN=${SENTRY_DSN}
@@ -547,7 +547,7 @@ deploy_review_b2c:
       -e PWA_2_SUBDOMAIN=b2b
       -e PWA_2_CHANNEL=inSPIRED-inTRONICS_Business-Site
       -e PWA_2_FEATURES=quoting,recently,compare,businessCustomerRegistration,advancedVariationHandling,sentry
-      -e PWA_2_THEME=blue
+      -e PWA_2_THEME=blue|688dc3
       -e PWA_3_SUBDOMAIN=de
       -e PWA_3_CHANNEL=inSPIRED-inTRONICS-Site
       -e PWA_3_LANG=de_DE
@@ -556,7 +556,7 @@ deploy_review_b2c:
       -e PWA_4_CHANNEL=inSPIRED-inTRONICS-Site
       -e PWA_4_APPLICATION=smb-responsive
       -e PWA_4_FEATURES=quoting
-      -e PWA_4_THEME=blue
+      -e PWA_4_THEME=blue|688dc3
       ${CI_REGISTRY_IMAGE}:nginx-${CI_COMMIT_REF_SLUG}
     - sleep 10
     - docker run --rm --add-host $DEMO_SERVER_NAME:$DEMO_SERVER_IP mwendler/wget --wait 10 --tries 10 --retry-connrefused "http://$DEMO_SERVER_NAME:3000/${CI_COMMIT_REF_SLUG}-pwa-b2c"
@@ -614,7 +614,7 @@ deploy_review_b2b:
       -e LOGGING=true
       -e SENTRY_DSN=${SENTRY_DSN}
       -e ICM_BASE_URL=${ICM_BASE_URL}
-      -e THEME=blue
+      -e THEME=blue|688dc3
       -e ICM_CHANNEL=inSPIRED-inTRONICS_Business-Site
       -e FEATURES=quoting,recently,compare,businessCustomerRegistration,advancedVariationHandling,sentry
       --add-host $ICM_HOST:$ICM_IP

angular.json

@@ -27,11 +27,7 @@
             "tsConfig": "tsconfig.app.json",
             "aot": true,
             "extractCss": true,
-            "assets": [
-              "src/favicon.ico",
-              "src/assets",
-              "src/manifest.webmanifest"
-            ],
+            "assets": ["src/assets"],
             "styles": [
               {
                 "input": "src/styles/themes/default/style.scss",

src/app/core/utils/theme/theme.service.ts

@@ -17,28 +17,55 @@ export class ThemeService {
   private head: HTMLElement;
   private themeLinks: HTMLElement[] = [];
 
+  private iconLink: HTMLLinkElement;
+  private webmanifestLink: HTMLLinkElement;
+  private appleTouchIconLink: HTMLLinkElement;
+  private appleTouchIcon152x152Link: HTMLLinkElement;
+  private appleTouchIcon167x167Link: HTMLLinkElement;
+  private appleTouchIcon180x180Link: HTMLLinkElement;
+  private themeColor: HTMLMetaElement;
+
   constructor(
     private rendererFactory: RendererFactory2,
     @Inject(DOCUMENT) private document: Document,
     private store: Store<{}>
-  ) {}
-
-  init() {
+  ) {
     this.head = this.document.head;
     this.renderer = this.rendererFactory.createRenderer(undefined, undefined);
+
+    this.iconLink = this.document.querySelector('link[rel="icon"]');
+    this.webmanifestLink = this.document.querySelector('link[rel="manifest"]');
+    this.appleTouchIconLink = this.document.querySelector('link[rel="apple-touch-icon"]:not([sizes])');
+    this.appleTouchIcon152x152Link = this.document.querySelector('link[rel="apple-touch-icon"][sizes="152x152"]');
+    this.appleTouchIcon167x167Link = this.document.querySelector('link[rel="apple-touch-icon"][sizes="167x167"]');
+    this.appleTouchIcon180x180Link = this.document.querySelector('link[rel="apple-touch-icon"][sizes="180x180"]');
+    this.themeColor = this.document.querySelector('meta[name="theme-color"]');
+  }
+
+  init() {
     this.store
       .pipe(select(getTheme))
       .pipe(
         distinctUntilChanged(),
         filter(x => !!x)
       )
       .subscribe(async theme => {
-        await this.loadCss(`${theme}.css`);
+        const themeData = theme.split('|');
+        const themeName = themeData[0];
+        const themeColor = themeData[1];
+
+        this.iconLink.setAttribute('href', `assets/themes/${themeName}/img/favicon.ico`);
+        this.webmanifestLink.setAttribute('href', `assets/themes/${themeName}/manifest.webmanifest`);
+        this.appleTouchIconLink.setAttribute('href', `assets/themes/${themeName}/img/logo_apple_120x120.png`);
+        this.appleTouchIcon152x152Link.setAttribute('href', `assets/themes/${themeName}/img/logo_apple_152x152.png`);
+        this.appleTouchIcon167x167Link.setAttribute('href', `assets/themes/${themeName}/img/logo_apple_167x167.png`);
+        this.appleTouchIcon180x180Link.setAttribute('href', `assets/themes/${themeName}/img/logo_apple_180x180.png`);
 
-        // remove style of previous theme
-        if (this.themeLinks.length === 2) {
-          this.renderer.removeChild(this.head, this.themeLinks.shift());
+        if (themeColor) {
+          this.themeColor.setAttribute('content', `#${themeColor}`);
         }
+
+        await this.loadCss(`${themeName}.css`);
       });
   }
 
@@ -51,6 +78,11 @@ export class ThemeService {
       this.renderer.setProperty(linkEl, 'onload', resolve);
       this.renderer.appendChild(this.head, linkEl);
       this.themeLinks = [...this.themeLinks, linkEl];
+
+      // remove style of previous theme
+      if (this.themeLinks.length === 2) {
+        this.renderer.removeChild(this.head, this.themeLinks.shift());
+      }
     });
   }
 }

src/assets/themes/blue/manifest.webmanifest

@@ -0,0 +1,31 @@
+{
+  "name": "Intershop Progressive Web App",
+  "short_name": "Intershop PWA",
+  "scope": "/",
+  "icons": [
+    {
+      "src": "img/logo_192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "img/logo_256x256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "img/logo_384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "img/logo_512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#688dc3",
+  "background_color": "#FFFFFF",
+  "display": "standalone",
+  "start_url": "/home?utm_source=homescreen"
+}

src/manifest.webmanifest → src/assets/themes/default/manifest.webmanifest

@@ -4,22 +4,22 @@
   "scope": "/",
   "icons": [
     {
-      "src": "assets/img/logo_192x192.png",
+      "src": "img/logo_192x192.png",
       "sizes": "192x192",
       "type": "image/png"
     },
     {
-      "src": "assets/img/logo_256x256.png",
+      "src": "img/logo_256x256.png",
       "sizes": "256x256",
       "type": "image/png"
     },
     {
-      "src": "assets/img/logo_384x384.png",
+      "src": "img/logo_384x384.png",
       "sizes": "384x384",
       "type": "image/png"
     },
     {
-      "src": "assets/img/logo_512x512.png",
+      "src": "img/logo_512x512.png",
       "sizes": "512x512",
       "type": "image/png"
     }

src/environments/environment.model.ts

@@ -77,5 +77,6 @@ export interface Environment {
   locales: Locale[];
 
   // configuration of the styling theme ('default' if not configured)
+  // format: 'themeName|themeColor' e.g. theme: 'blue|688dc3',
   theme?: string;
 }

src/index.html

@@ -5,12 +5,12 @@
     <title>Intershop Progressive Web App</title>
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/x-icon" href="favicon.ico" />
-    <link rel="apple-touch-icon" href="assets/img/logo_apple_120x120.png" />
-    <link rel="apple-touch-icon" sizes="152x152" href="assets/img/logo_apple_152x152.png" />
-    <link rel="apple-touch-icon" sizes="180x180" href="assets/img/logo_apple_180x180.png" />
-    <link rel="apple-touch-icon" sizes="167x167" href="assets/img/logo_apple_167x167.png" />
-    <link rel="manifest" href="manifest.webmanifest" />
+    <link rel="icon" type="image/x-icon" href="assets/themes/default/img/favicon.ico" />
+    <link rel="apple-touch-icon" href="assets/themes/default/img/logo_apple_120x120.png" />
+    <link rel="apple-touch-icon" sizes="152x152" href="assets/themes/default/img/logo_apple_152x152.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="assets/themes/default/img/logo_apple_180x180.png" />
+    <link rel="apple-touch-icon" sizes="167x167" href="assets/themes/default/img/logo_apple_167x167.png" />
+    <link rel="manifest" href="assets/themes/default/manifest.webmanifest" />
     <meta name="theme-color" content="#ff6d00" />
     <style>
       .svg-inline--fa {

src/styles/themes/blue/variables.scss

@@ -9,10 +9,10 @@
 //
 // LOGOS
 
-$logo: url('/assets/img/themes/blue/logo.png');
+$logo: url('/assets/themes/blue/img/logo.png');
 $logo-width: 114px;
 $logo-height: 40px;
-$logo-mobile: url('/assets/img/themes/blue/logo_mobile.png');
+$logo-mobile: url('/assets/themes/blue/img/logo_mobile.png');
 $logo-mobile-width: 41px;
 $logo-mobile-height: 41px;
 

src/styles/themes/default/variables.scss

@@ -9,10 +9,10 @@
 //
 // LOGOS
 
-$logo: url('/assets/img/logo.png');
+$logo: url('/assets/themes/default/img/logo.png');
 $logo-width: 114px;
 $logo-height: 40px;
-$logo-mobile: url('/assets/img/logo_mobile.png');
+$logo-mobile: url('/assets/themes/default/img/logo_mobile.png');
 $logo-mobile-width: 41px;
 $logo-mobile-height: 41px;