Optimising the performance of an Ionic PWA - @angular/service-worker

Update: There seems to be a problem when registering a service worker in a module where AngularFire2 is also imported. I had to update my main.ts as follows:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

import { ENV } from '@env';

if (ENV.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule).then(() => {

  if ('serviceWorker' in navigator && ENV.production) {
    navigator.serviceWorker.register('/ngsw-worker.js');
    console.log('SW registered');
  }

}).catch(error => console.log(error));

11

Tags: Ionic 3, PWA, @angular/service-worker, AngularFire2

Angular 5 and the Angular CLI provide improved support for Progressive Web Applications (PWA).

Step 1 - Update the Angular CLI

To update the global and local (devDependencies) versions of the Angular CLI we’ll use the Node Package Manager (npm):

npm install -g @angular/cli
npm install @angular/cli --save-dev

You can check the version by running the following command:

ng --version

You should see output like:

Angular CLI: 1.7.4
Node: 9.9.0
OS: darwin x64
Angular: 5.0.3

Step 2 - Adding a Service Worker

Angular’s support for Service Workers is provided by the @angular/service-worker module.

See: https://robferguson.org/blog/2018/04/16/0ptimising-the-performance-of-an-ionic-pwa-part-1/

image

2 Likes