Angular PWA Presentation

Angular PWA: Make Angular App great again

byMeetup #1

About me:

Babrouskaya Iryna

Frontend developer for 7 years
Have been working in the
In love with Angular since Angular 1

History

2007

Steve Jobs announced new web apps developed in HTML5 and AJAX

2010: Web Workers
2015: new term "Progressive Web Applications", started developing PWA for Android
2017: Apple supports Service Workers
2017: Angular Service Worker
2018: Angular PWA
2019: PWA everywhere*

* almost everywhere

Progressive Web Applications

Progressive

Works for every user, regardless of browser choice, using progressive enhancement principles.

Responsive

Fits every device: desktop, mobile, tablet

Connectivity independent

Allow offline uses or low quality network

App-like

Feels like an app to the user

Fresh

Always up-to-date

Safe

Served via HTTPS to prevent snooping and ensure content hasn't been tampered with

Discoverable

Identifiable as an “application” and discoverable by search engines.

Re-engageable

Ability to use push notifications. An app keeps in touch with a user.

Installable

Provides homescreen icons without the use of an App Store

Linkable

Can easily be shared via a URL, and does not require complex installation.

Progressive Web Applications is:

Progressive
Responsive
Connectivity independent
App-like
Fresh

Safe
Discoverable
Re-engageable
Installable
Linkable

Where can be installed

Android
iOS
Win10
MacOs
Win7/8
Linux64b

PWA Bugs (August, 2019)

Screenshot from GitHub repository PWA-POLICE

+? =

Service Workers

Service Workers CAN

At least provide caching
Background data synchronization
Push Notifications
Performance enhancement (for example, pre-loading content)

Cashing strategies

Network or Cache

Cashing strategies

Cache only

Cashing strategies

Cache and update

Cashing strategies

Cache and update and refresh

Cashing strategies

Cache and update and refresh

Cashing strategies

Embedded fallback

Service Workers CAN'T

Access the Window Object, DOM
Working over HTTP (except localhost)
Use synchronous APIs like XHR or localStorage

Angular PWA

Example (no PWA)

Using @angular/pwa and NGSW

            ng add @angular/pwa

ng add @angular/pwa

It adds serviceWorker: true in the production configuration.
Adds default manifest.webmanifest file and ngsw-config.json config
Imports ServiceWorkerModule for production
Adds default Angular icons to assets folder
Updated index.html and adds link to manifest file and meta tag with theme-color

Generated App Manifest

        
{
  "name": "my-perfect-pwa",
  "short_name": "my-perfect-pwa",
  "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"
    }
  ]
}

Angular app to PWA: first step

Change theme-color in the manifest and meta tag in the index.html
Update icons
Change display property to one from fullscreenstandalone, orminimal-ui, browser

App is available in the offline mode

Make app installable - add simple code to your component

        
$event = fromEvent(window, 'beforeinstallprompt');
$event.subscribe((promptEvent) => {}));

Make app installable

        
$event = fromEvent(window, 'beforeinstallprompt');
$event.subscribe((event) => {
     event.preventDefault();
     showCustomPrompt();
));

Let's cache: ngsw-config

        
{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "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)"
        ]
      }
    }
  ]
}

Cache resources

installMode - when resources are fetched and cached
1. prefetch - all resources are downloaded on service worker install
2. lazy - resource cached individually when it requested
updateMode - when app resources will be updated
1. prefetch refresh on every new version
2. lazy - resource cached individually when it requested

Notify user about update in your component

import { SwUpdate } from '@angular/service-worker';

        constructor(private swUpdate: SwUpdate) {
          swUpdate.available.subscribe(event => {
              if (askUserToUpdate()) {
                  window.location.reload();
              }
          });
        }

Notifications

subscribeOnBackendUpdates() in your service
create a Service Workers ->

        
self.addEventListener('push', function (event) {
  const data = event.data.json();
  const title = data.title;
  const options = {body: data.body,
            icon: 'icons/icon-72x72.png',data: data.click_action};
  const promiseChain = self.registration
            .showNotification(title, options);
  promiseChain.then(function(subscription) {});
  event.waitUntil(promiseChain);
});