welcome to the webinarservices.google.com/fh/files/misc/ne_speed_race_webinar_pwa.pdf · service...
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/1.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/2.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/3.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/4.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/5.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/6.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/7.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/8.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/9.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/10.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/11.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/12.jpg)
![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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/13.jpg)
![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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/14.jpg)
![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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/15.jpg)
![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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/16.jpg)
![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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/17.jpg)
![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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/18.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/19.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/20.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/21.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/22.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/23.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/24.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/25.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/26.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/27.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/28.jpg)
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.
![Page 29: 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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/29.jpg)
A service worker at the root level
code
I created a Service Worker a the root of my project
![Page 30: 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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/30.jpg)
A service worker at the root level
code
Be sure to not cache your Service Worker
![Page 31: 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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/31.jpg)
A service worker at the root level
code
You can always serve you SW at root level but have it in your project’s folder
![Page 32: 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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/32.jpg)
Listening events in the Service Worker
code
In my sw.js
I listen for fetch events
![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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/34.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/35.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/36.jpg)
A basic offline page
![Page 37: 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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/37.jpg)
The most basic offline page
code
We listen the fetch eventIf it fails we send a custom response
![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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/38.jpg)
![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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/39.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/40.jpg)
Let’s create an
offline HTML inside
our sw.js
![Page 41: 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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/41.jpg)
Service worker? What's that?
code
When offline we send back
offlineHTML
![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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/42.jpg)
![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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/43.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/44.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/45.jpg)
![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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/46.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/47.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/48.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/49.jpg)
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 50: 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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/50.jpg)
The cache API : create a cache
code
cache.open()
will open or create a cache
![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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/51.jpg)
The cache we created
![Page 52: 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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/52.jpg)
The cache API : Let’s add assets to our cache
code
We wait for our SW to be installed
![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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/53.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/54.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/55.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/56.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/57.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/58.jpg)
![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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/59.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/60.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/61.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/62.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/63.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/64.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/65.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/67.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/68.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/69.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/70.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/71.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/72.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/73.jpg)
“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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/74.jpg)
![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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/75.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/76.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/77.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/78.jpg)
“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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/79.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/80.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/81.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/82.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/83.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/84.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/85.jpg)
![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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/86.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/87.jpg)
TheUxWorkShops.comPassword : speedRace
![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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/89.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/90.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/91.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/92.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/93.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/94.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/95.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/96.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/97.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/98.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/99.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/100.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/101.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/102.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/103.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/104.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/105.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/106.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/107.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062507/5fcdf3570d115d2114575008/html5/thumbnails/108.jpg)
Proprietary + Confidential
Title here
console.log( “Thanks” );