feat(example): add full pwa support

Author: flolu

examples/angular/BUILD.bazel

@@ -2,6 +2,8 @@ load("@k8s_deploy//:defaults.bzl", "k8s_deploy")
 
 package(default_visibility = ["//:__subpackages__"])
 
+exports_files(["favicon.ico"])
+
 # ts_library uses the `//:tsconfig.json` target
 # by default. This alias allows omitting explicit tsconfig
 # attribute.

examples/angular/README.md

@@ -20,6 +20,7 @@ This example is a monorepo, meant to show many different features and integratio
 - **Differential loading**: in production mode, we load a pair of `<script>` tags. Modern browsers will load code in the ES2015 syntax, which is smaller and requires fewer polyfills. Older browsers will load ES5 syntax.
 - **Docker**: see below where we package up the production app for deployment on Kubernetes.
 - **Server Side Rendering**: with the help of Angular Universal you can render your application on the server
+- **Progressive Web App**: support for service worker and the app can be installed on phones and desktops (also has 90+ Lighthouse score)
 
 This example is deployed at https://bazel.angular.io/example
 

examples/angular/favicon.ico

@@ -18,8 +18,10 @@
         "@angular/platform-browser-dynamic": "10.0.2",
         "@angular/platform-server": "10.0.2",
         "@angular/router": "10.0.2",
+        "@angular/service-worker": "10.0.2",
         "@ngrx/store": "9.2.0",
         "@nguniversal/express-engine": "^9.0.0",
+        "compression": "^1.7.4",
         "date-fns": "1.30.1",
         "rxjs": "6.5.3",
         "systemjs": "6.1.2",

examples/angular/package.json

@@ -10,6 +10,7 @@ load("@npm//history-server:index.bzl", "history_server")
 load("@npm//html-insert-assets:index.bzl", "html_insert_assets")
 load("//tools:angular_prerender.bzl", "ng_prerender", "ng_prerender_test")
 load("//tools:angular_ts_library.bzl", "ng_ts_library")
+load("//tools:ngsw_config.bzl", "ngsw_config")
 
 package(default_visibility = ["//:__subpackages__"])
 
@@ -73,6 +74,8 @@ filegroup(
 _ASSETS = [
     # This label references an output of the "styles" sass_binary above.
     ":styles.css",
+    ":manifest.webmanifest",
+    "//:favicon.ico",
 
     # Directly reference a file that came from @angular/material npm package
     "@npm//:node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
@@ -244,30 +247,34 @@ pkg_web(
         ":inject_scripts_for_prod_hello_route_index",
         ":inject_scripts_for_prod_todos_route_index",
         "//src/assets",
+        ":robots.txt",
+        # Service worker
+        "@npm//:node_modules/@angular/service-worker/ngsw-worker.js",
         # Include polyfills that will be requested by old browsers
         "@npm//:node_modules/systemjs/dist/system.js",
         "@npm//:node_modules/core-js/client/core.min.js",
-        "index.html",
+        # NOW needed ?"index.html",
     ],
     # In production mode we serve some polyfills with script tags that have hard-coded paths in the index.html
     # so we must serve them at that path, by stripping a prefix
     additional_root_paths = [
         "npm/node_modules/core-js/client",
         "npm/node_modules/systemjs/dist",
+        "npm/node_modules/@angular/service-worker",
     ],
 )
 
+ngsw_config(
+    name = "pwa",
+    src = ":prodapp",
+    config = "//src:ngsw-config.json",
+    index_html = ":inject_scripts_for_prod",
+)
+
 history_server(
     name = "prodserver",
-    data = [":prodapp"],
-    # '-a src/prodapp' will ask history-server to scan for all apps under the
-    # given folder this will result in the following auto-configuration:
-    #   /example => src/prodapp/example
-    #   /        => src/prodapp
-    templated_args = [
-        "-a",
-        "$$(rlocation $(rootpath :prodapp))",
-    ],
+    data = [":pwa"],
+    templated_args = ["-a $$(rlocation $(rootpath :pwa))"],
 )
 
 nodejs_image(
@@ -288,21 +295,20 @@ container_image(
 
 ts_library(
     name = "universal_server_lib",
-    srcs = [
-        "server.ts",
-    ],
+    srcs = ["server.ts"],
     deps = [
         "//src/app:app_server",
         "@npm//@nguniversal/express-engine",
         "@npm//@types/node",
+        "@npm//compression",
         "@npm//express",
     ],
 )
 
 nodejs_binary(
     name = "universal_server",
     data = [
-        ":prodapp",
+        ":pwa",
         ":universal_server_lib",
     ],
     entry_point = ":server.ts",

examples/angular/src/BUILD.bazel

@@ -19,6 +19,7 @@ ng_ts_library(
         "@npm//@angular/core",
         "@npm//@angular/platform-browser",
         "@npm//@angular/router",
+        "@npm//@angular/service-worker",
         "@npm//@ngrx/store",
     ],
 )

examples/angular/src/app/BUILD.bazel

@@ -3,6 +3,7 @@ import {NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {StoreModule} from '@ngrx/store';
+import { ServiceWorkerModule } from '@angular/service-worker';
 
 import {MaterialModule} from '../shared/material/material.module';
 
@@ -16,7 +17,8 @@ import {todoReducer} from './todos/reducers/reducers';
   imports: [
     AppRoutingModule, BrowserModule, BrowserAnimationsModule, MaterialModule, HomeModule,
     StoreModule.forRoot({todoReducer}),
-    BrowserModule.withServerTransition({ appId: 'angular-bazel-example' })
+    BrowserModule.withServerTransition({ appId: 'angular-bazel-example' }),
+    ServiceWorkerModule.register('ngsw-worker.js')
   ],
   exports: [AppComponent],
   bootstrap: [AppComponent],

examples/angular/src/app/app.module.ts

@@ -4,7 +4,7 @@ filegroup(
     name = "assets",
     srcs = glob([
         "*.svg",
-        "*.png",
+        "**/*.png",
         "*.css",
     ]),
 )