We will be using an Angular service worker to add the service worker to our application. The Angular team has made it simpler to add PWA capability to our application. This is done by using the ng add command:
> ng add @angular/pwa
This command will add/update the following files:
CREATE ngsw-config.json (511 bytes)
CREATE src/manifest.json (1089 bytes)
CREATE src/assets/icons/icon-128x128.png (1253 bytes)
CREATE src/assets/icons/icon-144x144.png (1394 bytes)
CREATE src/assets/icons/icon-152x152.png (1427 bytes)
CREATE src/assets/icons/icon-192x192.png (1790 bytes)
CREATE src/assets/icons/icon-384x384.png (3557 bytes)
CREATE src/assets/icons/icon-512x512.png (5008 bytes)
CREATE src/assets/icons/icon-72x72.png (792 bytes)
CREATE src/assets/icons/icon-96x96.png (958 bytes)
UPDATE angular.json (4167 bytes)
UPDATE package.json (1475 bytes)
UPDATE src/app/app.module.ts (1496 bytes)
UPDATE src/index.html (656 bytes)
The manifest.json file is used by browsers to gather details about the application, such as its name, short name, assets, and so on. ngsw-config.json is the file that's used by the Angular service worker to get details about which files need to be cached and prefetched.
Let's look at what we see by default in our ngsw-config.json file:
{
"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/**",
"/*.
(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
]
}
}
]
}
The assetGroups property has different groups of assets. Here, we have two groups by default: app and assets. The app group has all the essential files for the application, while the asset group contains all the files that are in the assets folder.
The manifest.json file contains the following information. You will need to update the icons and other related information about your application here:
{
"name": "electronic-store",
"short_name": "electronic-store",
"theme_color": "#1976d2",
"background_color": "#fafafa",
"display": "standalone",
"scope": "/",
"start_url": "/",
"icons": [
{
"src": "assets/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
...
]
}
It also adds the ServiceWorkerModule to AppModule. We only enable it for production builds so that we don't cache the assets while we are developing:
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
@NgModule({
...
imports: [
...
ServiceWorkerModule.register('ngsw-worker.js', { enabled:
environment.production })
],
...
})
export class AppModule { }
index.html adds the link to manifest.json and adds a meta tag for theme-color, as well as a noscript element. The noscript element is shown to the user if JavaScript is disabled. Safari on iOS does not use manifest.json; instead, it uses meta tags so that we can modify how it needs to be added to the home screen on iOS. Let's add the following meta tags, all of which iOS understands:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Electronic Store</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#1976d2">
<!-- meta tags for iOS PWA -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="ElectronicStore">
<meta name="apple-mobile-web-app-status-bar-style" content="black-
translucent">
<meta name="apple-touch-icon" content="assets/icons/icon-144x144.png"
sizes="180x180">
<meta name="apple-touch-icon" content="assets/icons/icon-96x96.png"
sizes="120x120"></head>
<body>
<es-root></es-root>
<noscript>Please enable JavaScript to continue using this
application.</noscript>
</body>
</html>
Now, let's build our application using production mode and serve it using http-server before auditing our application again:
Now, the score has increased to 92. We've increased from 46 to 92, which is a great improvement. Now, the only two checks that remain are using HTTPS and reducing the characters in short_name in our manifest.json file. Let's go ahead and update the short_name to just es instead of electronic-store:
{
...
"short_name": "es",
...
}
In this section, we have added an Angular service worker to our application and re-measured our PWA-ness using Lighthouse. The only checkpoint that's left to make our app score 100% in PWA is using HTTPS instead of HTTP. We can score this when we deploy our app on a server and use HTTPS, for which we will use Firebase. Now, let's dive into adding other capabilities to our PWA.