feat: make the doc website a pwa (#2661)

NG-ZORRO · Dec 24, 2018 · 4f48ecd · 4f48ecd
1 parent c0ba991
commit 4f48ecd
Show file tree

Hide file tree

Showing 15 changed files with 91 additions and 4 deletions.
diff --git a/angular.json b/angular.json
@@ -24,7 +24,8 @@
                 "glob": "**/*",
                 "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
                 "output": "/assets/"
-              }
+              },
+              "site/src/manifest.json"
             ],
             "styles": [
               "site/src/styles.less"
@@ -49,7 +50,8 @@
               "aot": true,
               "extractLicenses": true,
               "vendorChunk": false,
-              "buildOptimizer": true
+              "buildOptimizer": true,
+              "serviceWorker": true
             }
           }
         },

diff --git a/ngsw-config.json b/ngsw-config.json
@@ -0,0 +1,26 @@
+{
+  "index": "/index.html",
+  "assetGroups": [
+    {
+      "name": "app",
+      "installMode": "prefetch",
+      "resources": {
+        "files": [
+          "/favicon.ico",
+          "/index.html",
+          "/*.css",
+          "/*.js"
+        ]
+      }
+    }, {
+      "name": "assets",
+      "installMode": "lazy",
+      "updateMode": "prefetch",
+      "resources": {
+        "files": [
+          "/assets/**"
+        ]
+      }
+    }
+  ]
+}
diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
   },
   "dependencies": {
     "@angular/cdk": "^7.0.0",
+    "@angular/pwa": "^0.11.3",
     "@ant-design/icons-angular": "2.0.0-beta.1",
     "date-fns": "^1.29.0"
   },
@@ -54,6 +55,7 @@
     "@angular/platform-browser": "~7.0.0",
     "@angular/platform-browser-dynamic": "~7.0.0",
     "@angular/router": "~7.0.0",
+    "@angular/service-worker": "~7.0.0",
     "@schematics/angular": "~7.0.0",
     "@stackblitz/sdk": "^1.1.1",
     "@types/fs-extra": "^5.0.4",
@@ -79,6 +81,7 @@
     "karma-coverage-istanbul-reporter": "~2.0.1",
     "karma-jasmine": "~1.1.2",
     "karma-jasmine-html-reporter": "^0.2.2",
+    "less": "^3.9.0",
     "less-plugin-clean-css": "^1.5.1",
     "marked": "^0.5.1",
     "ng-packagr": "^4.0.0",

diff --git a/scripts/site/_site/src/app/app.component.html b/scripts/site/_site/src/app/app.component.html
@@ -22,7 +22,7 @@
           </nz-select>
         </div>
         <button nz-button nzGhost nzSize="small" class="header-lang-button" (click)="switchLanguage(language==='zh'?'en':'zh')">{{language=='zh'?'English':'中文'}}</button>
-        <nz-select nzSize="small" class="version" style="width: 72px;" [ngModel]="currentVersion" (ngModelChange)="navigateToVersion($event)">
+        <nz-select nzSize="small" class="version" style="width: 94px;" [ngModel]="currentVersion" (ngModelChange)="navigateToVersion($event)">
           <nz-option *ngFor="let version of oldVersionList" [nzLabel]="version" [nzValue]="version"></nz-option>
           <nz-option [nzLabel]="currentVersion" [nzValue]="currentVersion"></nz-option>
         </nz-select>

diff --git a/scripts/site/_site/src/app/app.module.ts b/scripts/site/_site/src/app/app.module.ts
@@ -13,6 +13,7 @@ import { environment } from '../environments/environment';
 import { DEMOComponent } from './_demo/demo.component';
 import { AppComponent } from './app.component';
 import { routes } from './app.routing.module';
+import { ServiceWorkerModule } from '@angular/service-worker';
 
 const icons: IconDefinition[] = [ LeftOutline, RightOutline ];
 
@@ -27,7 +28,8 @@ const icons: IconDefinition[] = [ LeftOutline, RightOutline ];
     HttpClientModule,
     ShareModule,
     NgZorroAntdModule,
-    RouterModule.forRoot(routes, environment.production ? { preloadingStrategy: PreloadAllModules } : {})
+    RouterModule.forRoot(routes, environment.production ? { preloadingStrategy: PreloadAllModules } : {}),
+    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
   ],
   providers   : [
     Title,

diff --git a/scripts/site/_site/src/assets/icons/icon-128x128.png b/scripts/site/_site/src/assets/icons/icon-128x128.png
diff --git a/scripts/site/_site/src/assets/icons/icon-144x144.png b/scripts/site/_site/src/assets/icons/icon-144x144.png
diff --git a/scripts/site/_site/src/assets/icons/icon-152x152.png b/scripts/site/_site/src/assets/icons/icon-152x152.png
diff --git a/scripts/site/_site/src/assets/icons/icon-192x192.png b/scripts/site/_site/src/assets/icons/icon-192x192.png
diff --git a/scripts/site/_site/src/assets/icons/icon-384x384.png b/scripts/site/_site/src/assets/icons/icon-384x384.png
diff --git a/scripts/site/_site/src/assets/icons/icon-512x512.png b/scripts/site/_site/src/assets/icons/icon-512x512.png
diff --git a/scripts/site/_site/src/assets/icons/icon-72x72.png b/scripts/site/_site/src/assets/icons/icon-72x72.png
diff --git a/scripts/site/_site/src/assets/icons/icon-96x96.png b/scripts/site/_site/src/assets/icons/icon-96x96.png
diff --git a/scripts/site/_site/src/index.html b/scripts/site/_site/src/index.html
@@ -20,6 +20,8 @@
       })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
     </script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
+    <link rel="manifest" href="manifest.json">
+    <meta name="theme-color" content="#1890ff">
   </head>
   <body>
     <app-root></app-root>
@@ -61,5 +63,6 @@
 
       gtag('config', 'UA-52892298-2');
     </script>
+    <noscript>Please enable JavaScript to continue using this application.</noscript>
   </body>
 </html>
diff --git a/scripts/site/_site/src/manifest.json b/scripts/site/_site/src/manifest.json
@@ -0,0 +1,51 @@
+{
+  "name": "Ng Zorro Antd Doc",
+  "short_name": "Ng Zorro",
+  "theme_color": "#1976d2",
+  "background_color": "#fafafa",
+  "display": "standalone",
+  "scope": "/",
+  "start_url": "/",
+  "icons": [
+    {
+      "src": "assets/icons/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}