Copyright ⓒ All Right Reserved by Buzzvil Progressive Web App Migrating Web site into something like mobile app Nathan Yang 2021.03.03 

Copyright ⓒ All Right Reserved by Buzzvil Side project Why I was interested • A short ad time! 

Copyright ⓒ All Right Reserved by Buzzvil Side project Why I was interested 1% Backend 99% Frontend • What I felt during development • Desire to show it on mobile too with mobile app, but.. maybe 1% 99% App Development • What I found: Hybrid App, PWA • So I chose PWA.. Why not hybrid app? • Hybrid App seemed like making a new app, while PWA is more like adding more feature to existing web site 

Copyright ⓒ All Right Reserved by Buzzvil PWA This will be about.. • Why PWA : I’ll try to convince you • How does PWA look like : Let’s see what it actually is • What is PWA : Let’s know what it is • Diving into Service Worker : with code ref • Useful things with PWA • Pros and Cons of PWA • More to discover And also about… 

Copyright ⓒ All Right Reserved by Buzzvil Why PWA? Real world example • https://www.pwastats.com/ 

Copyright ⓒ All Right Reserved by Buzzvil How does PWA look like? Real world example 

Copyright ⓒ All Right Reserved by Buzzvil What is PWA? web apps that use emerging web browser APIs and features along with traditional progressive enhancement strategy to bring a native app-like user experience to cross-platform web applications. • a web app that gives native app-like user experience using browser api • MDN said.. A web app with native app-like user experience pwa native app 

Copyright ⓒ All Right Reserved by Buzzvil What is PWA? • Show cached resources on offline status • Re-engageable: Push notifications, sense specific time • installable: Add to Home screen • Something else that simple web site cannot do native app-like user experience.. like what? 

Copyright ⓒ All Right Reserved by Buzzvil What web app is PWA? A set of technology, more like design pattern In order to call a Web App a PWA, technically speaking it should have the following features: Secure contexts (HTTPS), one or more Service Workers, and a manifest file. 

Copyright ⓒ All Right Reserved by Buzzvil What web app is PWA? simple outlook Manifest icon, app name, … no address bar, background color, … Service Worker ? making native app-like experience with HTTPS 

Copyright ⓒ All Right Reserved by Buzzvil Manifest file • Simple file to define outlook of web app • Let’s have a look - Manifest file example (link from MDN) 

Copyright ⓒ All Right Reserved by Buzzvil Service Worker What does service worker do? • Cache data and show on offline • Hijack network request and respond with custom response • Show notification on device • Other advanced usages Important tool for functionality of PWA 

Copyright ⓒ All Right Reserved by Buzzvil Service Worker What is service worker? – It is worker • Core tech for PWA to work like native app • According to MDN.. A service worker is an event-driven worker registered against an origin and a path. • And Worker is… The Worker interface of the Web Workers API represents a background task that can be created via script, which can send messages back to its creator. 

Copyright ⓒ All Right Reserved by Buzzvil Service Worker What is service worker? – more details • And also.. A service worker is run in a worker context: it therefore has no DOM access, and runs on a different thread to the main JavaScript that powers your app, so it is non-blocking. It is designed to be fully async; as a consequence, APIs such as synchronous XHR and Web Storage can't be used inside a service worker. 

Copyright ⓒ All Right Reserved by Buzzvil Service Worker What is service worker? – more details main thread (DOM, …) listen event service worker thread render html, … fully async API, events, network, … 

Copyright ⓒ All Right Reserved by Buzzvil Service Worker Service Worker Flow Register Install Waiting Activate • we should know about life cycle of service worker to actually use it 

Copyright ⓒ All Right Reserved by Buzzvil Service Worker Register Register Install Waiting Activate serviceWorkerContainer.register(scriptURL, options) .then(function(serviceWorkerRegistration) { ... }); • If successful, a service worker registration ties the provided scriptURL to a scope url, which is subsequently used for navigation matching. if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js', {scope: './foo/bar/'}) .then(function(registration) { console.log('Service worker registration succeeded:', registration); }); } 

Copyright ⓒ All Right Reserved by Buzzvil Service Worker Register - ServiceWorkerRegistration Register Install Waiting Activate serviceWorkerContainer.register(scriptURL, options) .then(function(serviceWorkerRegistration) { ... }); • ServiceWorkerRegistration? (ref) • A user agent must persistently keep a list of registered service worker registrations unless otherwise they are explicitly unregistered. • If successful, service worker is executed in ServiceWorkerGlobalScope (ref) 

Copyright ⓒ All Right Reserved by Buzzvil Service Worker Register - ServiceWorkerRegistration Register Install Waiting Activate serviceWorkerContainer.register(scriptURL, options) .then(function(serviceWorkerRegistration) { ... }); Service Worker Registration scope (./foo/bar/) Service Worker Service Worker waiting active installing terminated if not used kept by user (permanent) 

Copyright ⓒ All Right Reserved by Buzzvil Service Worker Register - ServiceWorkerRegistration Register Install Waiting Activate serviceWorkerContainer.register(scriptURL, options) .then(function(serviceWorkerRegistration) { ... }); 

Copyright ⓒ All Right Reserved by Buzzvil Service Worker Install Register Install Waiting Activate • Usually for preparing offline caching capabilities • Before activate, after register • we can do something like this (ref) 

Copyright ⓒ All Right Reserved by Buzzvil Service Worker Activate Register Install Waiting Activate • A service worker is now taking control of a page • It’ll possibly hijack, filter network request and might return customized response • more explanation: link 

Copyright ⓒ All Right Reserved by Buzzvil Service Worker with activated service worker - fetch 

Copyright ⓒ All Right Reserved by Buzzvil Service Worker wait, that sounds dangerous! - HTTPS • Service Worker is powerful, we can use it for good • Man in the middle (MITM) can also use it for good • For security reason, service worker works on HTTPS only Man in the middle attack? 

Copyright ⓒ All Right Reserved by Buzzvil Service Worker What about “waiting”? Register Install Waiting Activate • When service worker is currently handling a page, and new service worker is sucessfully installed • We can skip this with skipWaiting() on service worker or on browser setting • New service worker will replace old service worker when old service worker is terminated • more explanation: link v1 sw(“old”) v2 sw(“new”) 

Copyright ⓒ All Right Reserved by Buzzvil What web app is PWA? simple outlook Manifest main thread (activated, current scope’s) service worker thread API, events, network, … using HTTPS 

Copyright ⓒ All Right Reserved by Buzzvil Useful things with PWA Add to Home Screen (A2HS) • But to use PWA as native-app like experience, it needs to be added to Home screen • Here’s demo (from mdn) • How? If certain condition – installability criteria – is met, browser supports “add to home screen” • For example, Chrome (link) • Samsung Browser is similar (link) 

Copyright ⓒ All Right Reserved by Buzzvil Useful things with PWA • Service Worker Cookbook : https://serviceworke.rs/ • Web APIs : https://developer.mozilla.org/en-US/docs/Web/API 

Copyright ⓒ All Right Reserved by Buzzvil Pros of PWA Why we would use it – any argument is welcome Pros • They work offline • Accessing them on different platforms is not a problem • Much cheaper and faster to develop than a different native solution for each platform ref: link • They adapt to different screen sizes • Interaction and navigation resembles native apps so it is easy for the user to understand how to use a PWA • No installation process which can be appreciated by impatient users 

Copyright ⓒ All Right Reserved by Buzzvil Cons of PWA Why we would not use it – any argument is welcome ref: link • They are not available on the app stores – so their marketing can be much less effective • *They use much more battery power *: questionable • Weaker performance on iOS and less support for Apple devices • Limitations when it comes to hardware and OS features Cons 

Copyright ⓒ All Right Reserved by Buzzvil More to discover.. Quite out of my area • Progressive loading (link) 

Copyright ⓒ All Right Reserved by Buzzvil Thank you Nathan Yang 2020.03.03