PWA All the Things (Dec 2018)

Did you know Progressive Web Apps are about more than just mobile apps? Yep. As modern browsers increasingly support the underlying technology required for PWAs, any website can begin to take advantage of benefits PWAs offer: offline support, faster loading sites and more "native-like" experiences. In this session, you'll get a quick introduction to the primary concepts necessary to PWA-ify a website (like Service Worker), and learn how to begin building and debugging PWAs like a pro.

Transcript

1. PWA All the Things @toddanglin ! ?
2. Todd Anglin VP, Product @ @toddanglin anglin@progress.com
3. What are PWAs (really)? Why do we need them? And, what ever happened to Responsive Web Apps?
4. Evolution of the web Web 1.0 Responsive Web Design Progressive Web Apps Foundation Design for all Screens Design for offline
5. Pillars of PWA 1. Reliable 2. Fast 3. Engaging 1. Progressive 2. Responsive 3. Connectivity independent 4. App-like 5. Safe 6. Discoverable 7. Re-engageable 8. Installable 9. Linkable
6. "Progressive Web Apps use modern web capabilities to deliver an app- like user experience." "Progressive Web Apps work everywhere but are supercharged in modern browsers. ."
7. Common Myths PWAs are a "Google" thing
8. Common Myths PWAs only work on Android
9. Common Myths PWAs only make sense on mobile
10. Common Myths PWAs will replace mobile apps
11. DEMO Let's look at some PWAs
12. Works Offline Loads Fast "App-like"
13. Service Workers web app manifest "App-like"
14. Application Shell My App My App Settings Account Something else My App 80º Orlando 20º Boston Shell Content Cached on first visit Loaded from network
15. Approaches to PWA 1. App Shell + Server-Side Render (SSR) for Entry Pages 2. App Shell + Client-Side Render (CSR) for Content 3. Full SSR SSR == Server-Side Rendering
16. PWA "minimum requirements" HTTPS Service Worker Web App Manifest
17. Image source: "Your First Progressive Web App", Google Developers • App shell method • Make it work offline • Using Angular
18. Demo Create baseline Angular Weather App
19. Lighthouse • Check PWA readiness • Detect common problems • Audit performance
20. Demo Lighthouse
21. Service Worker § It's just a separate JavaScript file § Special type of web worker focused on controlling network requests § Runs separate from main thread § Can run in the background (when no tab open) § No direct DOM access § Communicates with main thread via postMessages § One service worker "per scope" § Updated (at least) every 24 hours
22. Service Worker Server Your page Service Worker GET request HTTPS Cache Browser
23. Service Worker Server Your page GET request HTTPS Older Browser if ('serviceworker' in navigator)
25. Service Worker fetch cache API for retrieving content from the network API for storing/retrieving cached app content/data
27. Service Worker Lifecycle First Install 1. register 2. install 3. activate 4. idle Updates 1. install 2. waiting 3. activate 4. idle navigator.serviceWorker.register('./service-worker.js')
28. DEMO Starting our PWA with a Service Worker
29. Caching
30. Cache strategies § Cache Only § Network Only § Cache First, Fallback on Network § Cache First, Then Network § Cache and Network Race § Network First, Fallback on Cache § Generic Fallback
31. Cache Only For "static" resources that change with "versions" of your site Page Cache Service Worker 1 2 3
32. Network Only For resources that cannot (or should not) be cached Page Network Service Worker 1 2 3
33. Cache First, Fallback on Network Primary offline-first pattern: load from cache if available, otherwise fetch Page Cache Service Worker Network x 1 2 3 4
34. Network First, Fallback on Cache Load new content by default, or show cache if offline Page Cache Service Worker Network x 1 2 3 4
35. Cache First, Then Network Display cached resource immediately, then update when network responds Page Cache Service Worker Network 1 1 2 2 3
36. Cache and Network Race For cases where disk access may be slower than network response Page Cache Service Worker Network 1 2 2 3 x 3
37. Generic Fallback For stuff that's not available in the cache OR on the network Page Cache Service Worker Network 1 2 3 x 5 x 4
39. § JavaScript library to handle service worker boilerplate workbox.routing.registerRoute( new RegExp('^https://fonts.(?:googleapis|gstatic).com/(.*)'), workbox.strategies.cacheFirst(), ); workbox.routing.registerRoute( /\.(?:js|css)$/, workbox.strategies.staleWhileRevalidate(), );
40. § PWA schematic automatically creates and manages service worker $ ng add @angular/pwa --project *project-name* $ ng build --prod
41. ngsw-config.json assetGroups § Static resources versioned with your app § App shell, images, styles, etc § installMode/updateMode § lazy § prefetch dataGroups § Caching policy for resources not versioned with your app § API responses § cacheConfig § maxSize (# of entries) § maxAge § timeout § strategy § performance § freshness
42. DEMO Using Angular PWA
43. Web App Manifest § Evolution of mobile meta tags § Control PWA's home screen icon, splash screen, theme colors, start URL § Helps PWA feel more "app like" (on Android) <link rel="manifest" href="/manifest.json">
44. Image Source: Addy Osmani, https://addyosmani.com/blog/getting-started-with-progressive-web-apps/ Web App Install banner Requires: • Web App Manifest • HTTPS • Registered Service Worker • 2 visits, at least 5 min between visits
45. Image Source: Addy Osmani, https://addyosmani.com/blog/getting-started-with-progressive-web-apps/ Home screen icon & splash screen Define: • App icon • App name • App theme color • Splash screen background color • Orientation limits
47. • name • short_name • icons • dir • lang Control Home Screen • start_url • display • fullscreen, standalone, minimal-ui, browser • orientation • any, natural, landscape, portrait, landscape-preferred, landscape-secondary, portrait- preferred, portrait-secondary • background_color • theme_color Control App Behavior • description • related_ applications • prefer_ related_ applications • scope Extras
48. DEMO Adding web app manifest
49. PWA Frameworks ReactPWA Angular CLI (!) vue-pwa-boilerplate Polymer App Toolbox Kendo UI Ionic
50. Migrating an Existing Site § It's possible! § Best to start with a SPA architecture
51. Additional Web APIs § Background Sync § Payment Request API § Web Push Notifications § Web VR
52. Background Sync // Register your service worker: navigator.serviceWorker.register('/sw.js'); // Then later, request a one-off sync: navigator.serviceWorker.ready.then(function(swRegistration) { return swRegistration.sync.register('myFirstSync'); }); self.addEventListener('sync', function(event) { if (event.tag == 'myFirstSync') { event.waitUntil(doSomeStuff()); } }); In app js: In service worker:
56. Apple Pay JS Image source: https://developers.bluesnap.com/docs/apple-pay
57. [2] Requires full browser to be running to receive messages [3] Apple has custom API for desktop Safari
58. PWA All the things?
59. PWA Limits Safari Older Browsers Native APIs
60. iOS & Safari § Some PWA features coming soon § BUT some potentially problematic differences
61. Notable limits on iOS § Limited to 50 MB (files and data) § No background sync (or background execution) § No ability to lock screen orientation § No app splash screen § No “installation” UX § Less control over status bar styling § PWAs ”restart” every time the user switches apps § PWAs don’t work in non-default iOS browsers (Chrome, Brave, etc) § Auto-purged PWA cache for infrequently used apps
62. When should you add PWA? When should you go native?
63. • Largely read-only • Simple user interactions • Mostly dynamic content • No need to access device APIs • No need for encrypted device storage • Web distribution • Frequently used • More complex user interactions • Need for access to device APIs • Need for encrypted storage • App store distribution PWA
64. Thanks! @toddanglin anglin@progress.com