Taking Angular Offline

Adrian Fâciu

PWAs

Apps that work everywhere and provide several features that give them the same user experience advantages as native apps.

Progressive web apps

  • shortcut on the (home) screen

  • push notifications

  • feel more like a native app (desktop support)

 

Progressive web apps

  • safe (as long as you use https)

  • linkable

  • network independent (work offline)

 

Ok, but why?

Why

  • users spend most of the time in native apps

  • most apps do not need any native capabilities

  • new releases whenever you want

 

Why

  • no app store, restrictions or publishing required

  • streamlined install process

  • no space, no problem

 

Do we already have PWAs?

Offline ?

Service Workers

A separate script, that runs in the background, without any UI or user interaction.

Service Workers

  • no access to DOM, have to use postMessage interface

  • provide push notifications

  • act like a network proxy

Service Workers

blog.sessionstack.com

Where

jakearchibald.github.io/isserviceworkerready

caniuse.com

PWAs in Angular

How to enable

ng add @angular/pwa

What just happened?

  • adds @angular/service-worker package

  • enables service worker build support

  • imports and registers the service worker

  • generates app manifest file

  • updates index.html

  • installs icon files

  • creates ngsw-config.json

ng build --prod

Ready for production

Testing

  • ng serve does not work, use a static file server

  • use incognito to prevent weird issues

  • offline mode to simulate network issues

Caching

  • index.html and favicon

  • build artifacts (all js and css)

  • assets folder

  • images and fonts from root

Updates

The service worker will download a new version of your application in the background and load it only when the page will refresh.

What do we get out of the box

ServiceWorker Module

SwUdate

  • get a notification when a new update is available or when the app was updated

  • force check and activate new versions

  • check if the service worker is enabled

SwPush

  • subscribe to push notification

  • listen for incoming notifications

  • check if the service worker is enabled

Configuration

App manifest

{
  "name": "My Cool App",
  "short_name": "MyApp",
  "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"
    }
  ]
}

SW Config

{
  "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/**"
        ]
      }
    }
  ]
}

SW Config

    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js"
        ]
      }
    }

SW Config

   {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**"
        ]
      }
    }

DataGroups

"dataGroups": [
    {
      "name": "api-performance",
      "urls": [
        "/api/suppliers"
      ],
      "cacheConfig": {
        "strategy": "performance",
        "maxSize": 100,
        "maxAge": "3d"
      }
    }
  ]

Diagnostics

yourapp.com/ngsw/state

NGSW Debug Info:

Driver state: NORMAL ((nominal))
Latest manifest hash: eea7f5f464f90789b621170af5a569d6be077e5c
Last update check: never

=== Version eea7f5f464f90789b621170af5a569d6be077e5c ===

Clients: 7b79a015-69af-4d3d-9ae6-95ba90c79486

=== Idle Task Queue ===
Last update tick: 1s496u
Last update run: never
Task queue:
 * init post-load (update, cleanup)

Debug log:

Alternatives

  • Code everything yourself

  • Workbox

  • A few others (not in Angular context)

Bonus

Firestore - Firebase

Use our flexible, scalable NoSQL cloud database to store and sync data for client- and server-side development.

Firestore - Firebase

  • already has offline capabilities (enabled for iOS and Android)

  • can be enabled for web

  • automatic sync

firebase.google.com/docs/projects/pwa

Resources

AiA 214: NgRx Tips & Tricks with Adrian Fâciu

Creating a toast service with Angular CDK

angularindepth.com

Questions?