welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · service...

108
Welcome to the webinar

Upload: others

Post on 22-Aug-2020

4 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Welcome to the webinar

Page 2: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Why PWA?

Page 3: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

The 2 mobile channels

Mobile Web Mobile apps

Page 4: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

One site + 2 apps

One + 2 native apps

Page 5: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Proprietary + Confidential

Page 6: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

3 teams 3 projects3 technologies 3 times more meetings 3 times more code to maintain To do the same thing...

Page 7: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Most of the time spent on apps

vs.13% 87%

Mobile web Mobile apps

Source: comScore Mobile Metrix, U.S., Age 18+, Juin 2016

Page 8: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Why ?

Source: comScore Mobile Metrix, U.S., Age 18+, June 2016

Mobile apps

Local assetsFast

Home screenVisibles

Push notificationsEngaging

Mobile designMobile first

Page 9: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

But !

Mobile Web Mobile Apps

mWeb + App mobile = PWA

Page 10: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Proprietary + Confidential

Fast Add to home screen

Push Notifications

Available Offline

Add these features to your site

Page 11: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Confidential + Proprietary

Demo

Page 12: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope
Page 13: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope
Page 14: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope
Page 15: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope
Page 16: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope
Page 17: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope
Page 18: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

PWA Add to Home screen

Page 19: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

But !Add to Home Screen

Implementation time: 1H

Create a manifest.json file1 )

Create icons2 )

Register a service worker3 )

Page 20: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

But !Add to Home Screen

https://app-manifest.firebaseapp.com/

Page 21: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

But !Icons on IOS

Add icons for IOS

Page 22: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

To earn the right to be on the home screenIs mandatory to have A minimal offline support

Page 23: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

PWA Basic offline support

Page 24: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Offline support

Do native apps work 100% offline?

Having the whole site offline is not always necessary.

Page 25: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Offline support

Page 26: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Offline support

Implementation time: 2 H

Create a service worker1 )

Create an offline page2 )

Register the service worker3 )

Page 27: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Service worker? What's that?

Can intercept and route requests…Can listen events...

Page 28: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Service worker has special rules

code

I put the Service Worker at

the root level

The max scope of a service worker is the service worker’s location.

A service worker can only handle requests for clients under its scope.

https://carbon.now.sh/?bg=rgba(255%2C255%2C255%2C1)&t=dracula&wt=none&l=javascript&ds=false&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=48px&ph=32px&ln=false&fm=Hack&fs=14px&lh=133%25&si=false&code=(async%2520()%2520%253D%253E%2520%257B%250A%250A%2520%2520%2520%2520if%2520(%2522serviceWorker%2522%2520in%2520navigator)%2520%257B%250A%2509%2509%250A%2520%2520%2520%2520%2520%2520%2509%252F%252F%2520we%2520register%2520our%2520service%2520worker%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2509%2509%2509%2509%2509%2509%250A%2520%2520%2520%2520%2520%2520%2520%2520const%2520registration%2520%253D%2520await%2520navigator.serviceWorker.register(%27%252Fsw.js%27)%253B%2520%2520%2520%250A%2509%2509%250A%2520%2520%2520%2520%2520%2520%2509%252F%252F%2520when%2520our%2520service%2520worker%2520is%2520updated%250A%2520%2520%2520%2520%2520%2520%2520%2520registration.onupdatefound%2520%253D%2520()%2520%253D%253E%2520%257B%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2509%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2509%252F%252F%2520when%2520our%2520service%2520worker%2520is%2520updated%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520registration.installing.onstatechange%2520%253D%2520function%2520()%2520%257B%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520console.log(%2560Service%2520worker...%2520%2524%257Bthis.state%257D%2560)%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%257D%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520%257D%253B%250A%250A%2520%2520%2520%2520%257D%250A%250A%257D)()%250A.catch(e%2520%253D%253E%2520console.log(%2560%25F0%259F%2598%25B3%2520%253A%2520%2524%257Be%257D%2560))%253B&es=2x&wm=false
Page 33: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Registering the Service Worker

code

In my app.js

https://carbon.now.sh/?bg=rgba(255%2C255%2C255%2C1)&t=dracula&wt=none&l=javascript&ds=false&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=48px&ph=32px&ln=false&fm=Hack&fs=14px&lh=133%25&si=false&code=(async%2520()%2520%253D%253E%2520%257B%250A%250A%2520%2520%2520%2520if%2520(%2522serviceWorker%2522%2520in%2520navigator)%2520%257B%250A%2509%2509%250A%2520%2520%2520%2520%2520%2520%2509%252F%252F%2520we%2520register%2520our%2520service%2520worker%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2509%2509%2509%2509%2509%2509%250A%2520%2520%2520%2520%2520%2520%2520%2520const%2520registration%2520%253D%2520await%2520navigator.serviceWorker.register(%27%252Fsw.js%27)%253B%2520%2520%2520%250A%2509%2509%250A%2520%2520%2520%2520%2520%2520%2509%252F%252F%2520when%2520our%2520service%2520worker%2520is%2520updated%250A%2520%2520%2520%2520%2520%2520%2520%2520registration.onupdatefound%2520%253D%2520()%2520%253D%253E%2520%257B%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2509%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2509%252F%252F%2520when%2520our%2520service%2520worker%2520is%2520updated%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520registration.installing.onstatechange%2520%253D%2520function%2520()%2520%257B%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520console.log(%2560Service%2520worker...%2520%2524%257Bthis.state%257D%2560)%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%257D%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520%257D%253B%250A%250A%2520%2520%2520%2520%257D%250A%250A%257D)()%250A.catch(e%2520%253D%253E%2520console.log(%2560%25F0%259F%2598%25B3%2520%253A%2520%2524%257Be%257D%2560))%253B&es=2x&wm=false
Page 34: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

The Service Worker

logs the requests

Page 35: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

He can intercept and modifyrequests in our Service Worker

Page 36: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

A basic offline page

Page 38: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope
Page 39: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Not bad but..We can do better

Page 40: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Let’s create an

offline HTML inside

our sw.js

Page 42: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope
Page 43: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

It’s your time to try : https://pwa101.glitch.me/

Implementation time: 30min

Create a service worker1 )

Create an offline page2 )

Register the service worker3 )

Page 44: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

bit.ly/pwa-offline-examples

Page 45: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope
Page 46: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

PWA Advanced concepts

Page 47: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Beyond a basic offline page with the Cache API

Page 48: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Differents ways to store data client’s side

Local Storage1 )

IndexedDb2 )

Cache API4 )

Web SQL3 )

App cache5 )

Page 49: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

The cache API

The Cache API is a system for storing and retrieving network

requests and corresponding responses. The API can be accessed from

a window, iframe, worker, or service worker.

Page 51: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

The cache we created

Page 53: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Our assets

are now in

the cache

Page 54: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Let’s respond to requests from the cache API

Listen for requests in our Service WorkerOpen the cache 1 )

if the requests is in our opened cache : 2 )- Respond from the cache

If the request is not in the cache : 3 )- We fetch the request on the network- We respond with the fetched request

Respond from cache

Respond from network

Page 55: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Let’s respond to requests from the cache API

We listen fetch events

and look inside our

cache to respond

Page 56: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Let’s respond to requests from the cache API

Page 57: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

If the request was cached

we respond from cache

If the request was NOT cached

we respond from the network

code

Page 58: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope
Page 59: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

The strategy we just created :

code

Page 60: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

But what if I want to :

Refresh the cacheAlways respond from

networkSet expires in cache

Update my cache in the

background

Page 61: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Automatic SW generation and easy caching strategies with

High level API for

Service Worker

Page 62: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Have a look on the advanced example

Have a look :

https://myadvancedpwa.glitch.me/

Check the demo

Page 63: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Proprietary + Confidential

PWA Advanced PWA concepts with :

Page 64: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

We have a basic page which

fetches an API through AJAX

Page 65: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Install workbox-cli

Install it locally

Page 67: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

We create a

workbox-config.js

At the root of our project

Page 68: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Generate the Service Worker

npx to run a binary in node_modules

Page 69: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

The generated

service worker

Page 70: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

We register our

Service worker

Page 71: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Not fully working offline…

Page 72: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

How to cache external assets ?

https://cdnjs.

cloudflare.com

/ *

https://fonts.

googleapis.com

/*

Page 73: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

“Ideal for: Frequently

updating resources

where having the very

latest version is

non-essential. ”

Page 74: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope
Page 75: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

A new cache “runtime”

has been created

Page 76: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Our AJAX call

are failing...

Page 77: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

How to cache “API” data ?

https://api.no

mics.com

Page 78: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

“Ideal for :

requests that are

updating frequently

Page 79: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

GET requests onlyThe networkFirst

strategiesThe requests falling in

this strategy

Page 80: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

It WORKS !!

Page 81: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Fork the project on Github

bit.ly/pwa-workbox

Page 82: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

PWA Add workbox to your build process

Page 83: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

workbox-config.js

Page 84: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

serviceworker-dev.js

Page 85: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope
Page 86: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

PWA conclusion

Page 87: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

TheUxWorkShops.comPassword : speedRace

Page 88: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

antoineBr@

[email protected]

Page 89: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Proprietary + Confidential

PWA Push Notification

Page 90: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Proprietary + Confidential

Page 91: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Proprietary + Confidential

Page 92: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Proprietary + Confidential

Step 3 : push notifications

Don't force push notification

First think about alternatives !

Keep in mind : a good notification is relevant and contains information that can’t be deferred

Page 93: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Proprietary + Confidential

Step 3 : push notifications

Page 94: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Proprietary + Confidential

Step 3 : push notifications

Implementation time : 2 H

Choose a platform1 )

Setup the SDK2 )

Send notifications ( API )3 )

Page 95: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Proprietary + Confidential

FCM : Concept Registration flow

Message flow

1 - Ask for an $userToken

2 - Send $userToken

3 - Save $userToken in db4 - Ask to send $msg to

$userToken

5 - Send $msg to user

server

user

Page 96: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Proprietary + Confidential

Notifications: choose the platform

Page 97: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Proprietary + Confidential

Notifications : One signal

Easy to implement

A dashboard + REST API

Customizable

Free

Notifications from your domain

Page 98: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Proprietary + Confidential

Notifications : One signal

Free : But oneSignal will collect data on your site

“Web pages visited that have implemented the SDK , and information about those visits (e.g., session duration,

time-stamp, referring URLs) ...“

Page 99: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Proprietary + Confidential

Notifications : Firebase

Need to write server side code

No dashboard but a REST API

Customizable

Free

Notifications from your domain

Page 100: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Proprietary + Confidential

Notifications : Home Made

Need to write server side code

You have to create your API

Customizable

Free

Notifications from your domain

Page 101: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Proprietary + Confidential

Notifications : Firebase

Create an account

Add the firebase client library

Request user permission and token

Create service worker

Initialize Firebase

Send notifications

Page 102: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Proprietary + Confidential

Notifications : One signal

code

Page 103: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Proprietary + Confidential

Notifications : One signal, customization

code

Page 104: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Proprietary + Confidential

Notifications : One signal

Page 105: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Proprietary + Confidential

Notifications : One signal, subscribe to a topic

Page 106: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Proprietary + Confidential

Notifications : One signal, create a segment

Page 107: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Proprietary + Confidential

Wrap-up

PWA :

The web is back

No reason to not implement the basics of PWAs

Forget 90% of native apps

Page 108: Welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · Service worker has special rules code ut the Service Worker at the root level The max scope

Proprietary + Confidential

Title here

console.log( “Thanks” );