Advanced Service Worker / PWA with Google Workbox Patrik - - PowerPoint PPT Presentation

▶
advanced service worker pwa
SMART_READER_LITE
LIVE PREVIEW

Advanced Service Worker / PWA with Google Workbox Patrik - - PowerPoint PPT Presentation

Mar 20, 2024 349 likes •703 views

Advanced Service Worker / PWA with Google Workbox Patrik Bschenstein, Senior Consultant patrik.boeschenstein@trivadis.com @patrikbo JUG Zurich, January 2019 BASEL BERN BRUGG DSSELDORF FRANKFURT A.M. FREIBURG I.BR. GENF HAMBURG

slide-1
SLIDE 1

BASEL BERN BRUGG DÜSSELDORF FRANKFURT A.M. FREIBURG I.BR. GENF HAMBURG KOPENHAGEN LAUSANNE MANNHEIM MÜNCHEN STUTTGART WIEN ZÜRICH

Advanced Service Worker / PWA with Google Workbox

Patrik Böschenstein, Senior Consultant patrik.boeschenstein@trivadis.com @patrikbo

JUG Zurich, January 2019

slide-2
SLIDE 2

Agenda

Google Workbox 2 1/15/2019

Why should I care? PWA, Service Worker, Manifest Google Workbox

slide-3
SLIDE 3

Why should I care

Google Workbox 3 1/15/2019

Performance Resilience Enhance PWA

slide-4
SLIDE 4

Why Web for Apps?

Google Workbox 4 1/15/2019

App: Concerned

  • About app permissions
  • Amount of storage
  • Privacy (what is the app doing?)

Web

  • Low Friction
  • Less storage
  • Twitter Light PWA: 1MB
  • Twitter Native app (Android): 28 MB
  • Twitter Native app (IOS): 124 MB
  • Privacy on device is not an issue
slide-5
SLIDE 5

Web for Apps means low friction

Google Workbox 5 1/15/2019

Lose 20% on each step Low Friction is the webs secret weapon

https://airhorner.com/

slide-6
SLIDE 6

Web App vs. Native App

Google Workbox 6 1/15/2019

App type: Web Native Push Notification Yes Yes Full Screen, Icon on Desktop Yes Yes Offline Working Yes Yes Phonebook/Contacts(*), Alarms No Yes System Settings No Yes Runs on Desktop Yes maybe No App store Yes No Installation experience Yes No 1 source code for all devices Yes No Web dev knowledge to build app Yes No

slide-7
SLIDE 7

F I R E Fast (rendering) Integrated (in UI, payment) Reliable (slow connection) Engaging (push)

Progressive Web App (PWA)

Google Workbox 7 1/15/2019

Progressive Enhancement: “Combine features offered by most modern browsers with the benefits of a mobile experience.” (Wikipedia)

slide-8
SLIDE 8

Service Worker

Google Workbox 8 1/15/2019

  • “Background Thread”, works offline, in closed browser
  • Network proxy (intercept requests)
  • Handles “Push Notification” in background
  • Fast & reliable (if properly configured)
  • Not disruptive in old browsers (but no benefits)
  • Available in all major browsers (not IE11)
slide-9
SLIDE 9

Web App Manifest

Google Workbox 9 1/15/2019

Metadata for PWA

  • Icons
  • Description
  • Colors
  • Related Infos

<link rel="manifest" href="/manifest.json"> Useful tools:

  • Generator, based on your site: https://www.pwabuilder.com/
  • Validator: https://manifest-validator.appspot.com/
slide-10
SLIDE 10

Web App Manifest (manifest.json)

Google Workbox 10 1/15/2019

{ "short_name": "Demo", "name": "My Demo PWA", "icons": [ { "src": "/images/icons-192.png", "type": "image/png", "sizes": "192x192" }, { "src": "/images/icons-512.png", "type": "image/png", "sizes": "512x512" } ], "start_url": "/maps/?source=pwa", "display": "fullscreen", "theme_color": "#3367D6" "background_color": "#3367D6", }

Check details from Mozilla Or https://w3c.github.io/ manifest/

slide-11
SLIDE 11

Wrap up / Compare Terms

Google Workbox 11 1/15/2019

PWA: “a set of rules”

  • Desktop icon
  • Immediate start
  • Seamless UI
  • Push Notifications

Web App Manifest

  • Json Configuration File for app-like behavior

Service workers

  • Technology to allow this instance experience

https://developers.google.com/web/progressive-web-apps/

slide-12
SLIDE 12

Google Workbox

Google Workbox 12 1/15/2019

slide-13
SLIDE 13

What is Google Workbox

Google Workbox 13 1/15/2019

  • Helper for creating PWA
  • Build Tools
  • Runtime Libraries
  • Helps to implement Service Worker
  • Adopt useful cash strategies
  • Avoid implementation errors
  • Avoid boilerplate
  • Cache management
  • remove complexity  add flexibility
  • Replaces sw_precache and sw_toolbox

https://developers.google.com/web/tools/workbox/

slide-14
SLIDE 14

sw.js

Google Workbox 14 1/15/2019

importScripts('https://storage.googleapis.com/work box-cdn/releases/3.6.3/workbox-sw.js'); workbox.routing.registerRoute( new RegExp('.*\.js'), workbox.strategies.cacheFirst() );

slide-15
SLIDE 15

sw.js: cache images

Google Workbox 15 1/15/2019

workbox.routing.registerRoute( // Cache image files /.*\.(?:png|jpg|jpeg|svg|gif)/, // Use the cache if it's available workbox.strategies.cacheFirst({ cacheName: 'image-cache', plugins: [ new workbox.expiration.Plugin({ // Cache only 20 images maxEntries: 20, // Cache for a maximum of a week maxAgeSeconds: 7 * 24 * 60 * 60, }) ], }) );

slide-16
SLIDE 16

PreCache

Google Workbox 16 1/15/2019

workbox.precaching.precacheAndRoute([ '/styles/index.658245.css', '/scripts/main.195241.js', { url: '/index.html', revision: '383676' }, ]); Download files before Service worker is installed

slide-17
SLIDE 17

Strategy: Stale-While-Revalidate

Google Workbox 17 1/15/2019

slide-18
SLIDE 18

Cache First (Cache Falling Back to Network)

Google Workbox 18 1/15/2019

slide-19
SLIDE 19

Strategy: Network First (Network Falling Back to Cache)

Google Workbox 19 1/15/2019

slide-20
SLIDE 20

Other Strategies

Google Workbox 20 1/15/2019

  • Network Only
  • Cache Only

https://developers.google.com/web/tools/workbox/modules/workbox-strategies

slide-21
SLIDE 21

Configuration file

Google Workbox 21 1/15/2019

module.exports = { globDirectory: ".", globPatterns: ["**/*.{css,js,html}"], swDest: "sw.js", runtimeCaching: [ { urlPattern: /http:\/\/localhost\:3000\/users/, handler: "networkFirst" } ]};

slide-22
SLIDE 22

Generated ServicWorker (sw.js)

Google Workbox 22 1/15/2019

importScripts( "https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox- sw.js"); self.__precacheManifest = [ { "url": "index.html“, "revision": "3cc9ceb28924598f87bdc6ea0bfa23ef“ }, { "url": "workbox-config.js", "revision": "79289b03d935e54b891fb3134aa3b33d“ } ].concat(self.__precacheManifest || []); workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

slide-23
SLIDE 23

Working modes

Google Workbox 23 1/15/2019

  • Workbox CLI
  • WebPack Plug-In
  • Node module
slide-24
SLIDE 24

Node module

Google Workbox 24 1/15/2019

// We will use injectManifest mode const {injectManifest} = require('workbox-build') // Sample configuration with the basic options var workboxConfig = {...} // Calling the method and output the result injectManifest(workboxConfig).then(({count, size}) => { console.log(`Generated ${workboxConfig.swDest}, which will precache ${count} files, ${size} bytes.`) }) "build-prod": "ng build --prod && node workbox-build-inject.js"

slide-25
SLIDE 25

Angular ServiceWorker vs. Workbox

Google Workbox 25 1/15/2019

Angular CLI

  • Pros:
  • Install is easy: ng add @angular/pwa
  • Cons:
  • Angular >= 5 only
  • Website changes must be handled manually

Workbox

  • Pros:
  • Easy to install, Easy to use
  • Automatically handle web site changes
  • Know-how protection: Works in every web project
  • Debugging, bug hunting
slide-26
SLIDE 26

Demo Time

Google Workbox 26 1/15/2019

slide-27
SLIDE 27

Demo

Google Workbox 27 1/15/2019

  • 1. Implement workbox
  • Installation CLI
  • Create scripts in 2 steps:
  • 1. Wizard  Config-file
  • 2. Config-file  Service Worker
  • Implement Service Worker
  • 2. Activate Proxy
  • 3. WebPack PlugIn
  • 4. Workbox with Angular or Ionic
slide-28
SLIDE 28

Lessons learnt

Google Workbox 28 1/15/2019

  • Workbox warnings
  • Use localhost, not IP address (or use https)
  • Do not reuse DNS/ports
  • Firefox “work offline”: localhost is never offline
  • Do not use ”ng serve”
  • Restart browser
slide-29
SLIDE 29

PWA analysis with Google Lighthouse

Google Lighthouse 29 1/15/2019

Auditing, performance metrics, and best practices for Progressive Web Apps Standalone or in Chrome Run on mobile device (via remote debugging)

Lab Data Field Data Pros Easy, Reproducible Real world data Cons Not real world Limited result set

Speed Tools overview: https://g.co/dev/SpeedToolsOverview

slide-30
SLIDE 30

Save the World

Google Workbox 30 1/15/2019

http://offlinefirst.org/

“We live in a disconnected & battery powered world, but our technology and best practices are a leftover from the always connected & steadily powered past.”

Maureen McElaney, JSConf EU 2017

https://www.youtube.com/watch?v=GOdmPaBJqwA

slide-31
SLIDE 31

Summary

Google Workbox 31 1/15/2019

Implement Service Workers With Workbox

  • Fast and easy to implement
  • Flexible configuration
  • Less copy paste
  • Guides through the modern web experience
  • Encourage to use new features
slide-32
SLIDE 32

Key takeaways

Google Workbox 32 1/15/2019

  • PWA “a set of rules”
  • For PWA use Google Workbox
  • To save the world can be fun
slide-33
SLIDE 33

Thank you! Questions ?

Patrik Böschenstein Senior Consultant patrik.boeschenstein@trivadis.com Twitter: @patrikbo

1/15/2019 Google Workbox 33