Which option will work better for you

Maxim Salnikov

@webmaxru

Creating Angular PWA

Maxim Salnikov

@webmaxru

  • Google Developer Expert in Angular

  • Angular Oslo / PWA Oslo meetups organizer

  • ngVikings conference organizer

Products from the future

UI Engineer at ForgeRock

ngVikings.org

@ngVikingsConf

  • All sides of Angular ecosystem

  • 100% community-driven event from developers for developers

  • True Nordics spirit and Vikings power

Follow Twitter

March 1-2, Helsinki, Finland

Milestones of the web

AJAX

Static

Dynamic

RWD

PWA

In Development

Progressive Web App

https://en.wikipedia.org/wiki/Progressive_web_app​

... attempts to combine features offered by most modern browsers with the benefits of mobile experience

... web apps that use the latest web technologies.

10 characteristics

  • Progressive
  • Discoverable
  • Linkable
  • App-like
  • Responsive
  • Connectivity-independent
  • Re-engageable
  • Installable
  • Fresh
  • Safe

 App Shell architecture

 Service Worker API

Push API and Notifications API

Involved APIs

  • Service Worker API

  • Cache API

  • Fetch API

  • Notifications API

  • Push API

  • IndexedDB API

  • Promises

  • Make the website function offline

  • Increase online performance by reducing network requests for certain assets

  • Provide a customized offline fallback experience

Service Worker

of PWA

  • Receiving push events

  • Displaying notifications

  • Clients (tabs) messaging

  • Job scheduling

  • Responding to resource requests from other origins

Not only about offline

Service workers essentially act as proxy servers that sit between web applications, and the browser and network (when available).

Some theory

  • A service worker is run in a worker context

  • Event-driven

  • Registered against an origin and a path

  • Only run over HTTPS, for security reasons

Create Angular Progressive Web App

  • Code service worker manually

  • Use Angular Service Worker

  • Go for some PWA libraries

sw-precache

Service Worker 101

Demo time!

Wait a sec!

  • 600+ developers

  • Major browsers/frameworks/libs reps

bit.ly/join-pwa-slack

Pros

  • Great flexibility!

 

Cons

  • Great responsibility!

 

@angular/service-worker

v1.0.0-beta.16 - Experimental service worker by the Angular Mobile team

Angular Service Worker

# Install the Angular Service Worker
$ npm install --save @angular/service-worker
# Enable the SW registration + app shell in Angular CLI
$ ng set apps.0.serviceWorker=true

NGSW 101

Demo time!

Wait a sec!

Push notifications

Backend

Notification

Push Service

SW

App

Backend

Push Service

App

Subscription

Sending a notification

Pros

  • Essential features are codeless

  • Seamless integration with Angular and Angular CLI

 

Cons

  • Way too experimental at the moment

  • Intended to play a main service worker's role in your PWA

 

Angular 5

  • Move Angular Service Worker to Core

  • More tight integration with Angular CLI

  • Simplify server-side rendering flow

  • Make Angular app progressive by default

 

Documentation!

# Install the Workbox CLI
$ npm install workbox-cli --global
# Generate a service worker with some smart defaults
$ workbox generate:sw

App shell

Runtime caching

Offline GA

Replay failed requests

Broadcast updates

Build integrations

$ npm install --save workbox-sw

You need some deps

$ npm install --save-dev workbox-build
$ npm install --save workbox-routing
$ npm install --save workbox-runtime-caching
$ npm install --save workbox-background-sync
$ npm install --save workbox-google-analytics
$ npm install --save workbox-...

Workbox 101

Demo time!

Wait a sec!

Pros

  • Can extend existing service worker

  • Feature-rich

 

Cons

  • Extra build needed

  • Could be more developer friendly

 

Благодаря ви много!

@webmaxru

Maxim Salnikov

Questions?

Made with Slides.com