Progressive Web Applications

Only a temporary hype or a real chance to replace native applications?
- Overview
- Problems
- Benefits
- Statistics
- Technical checklist
- Framework support
- DEMO with Angular code examples

Transcript

1. Only a temporary hype or a real chance to replace native applications? Robert Witkowski, Senior Software Engineer, ASC LAB Progressive Web Applications
2. What is it? An application that correctly uses browser cache mechanisms.
3. 3 • Progressive - Work for every user, regardless of browser choice. • Responsive - Fit any form factor: desktop, mobile, tablet, or forms yet to emerge. • Connectivity independent - Service workers allow work offline, or on low quality networks. • App-like - Feel like an app to the user with app-style interactions and navigation. • Fresh - Always up-to-date thanks to the service worker update process. Overview
4. 4 • Safe - Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with. • Re-engageable - Make re-engagement easy through features like push notifications. • Installable - Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store. • Linkable - Easily shared via a URL and do not require complex installation. • One code-base (web app) Overview
5. 5 • No directory of trusted applications (ala Google Play, Apple Store) • It is not possible to add a video, description, photos, and star ratings • 3D/HD games, high graphics-oriented apps – performance problems • New native device features might not be available immediately (examples: fingerprint scanner, FaceID) Problems
6. Is this new? No, but now everything is better done. Users, devices and browsers are ready for it!
7. Who is already doing?
9. https://www.pwastats.com/ What are the business benefits?
10. What are the business benefits? AliExpress • 104% more users from browsers • 82% increase „conversion rate” on iOS • 2x more visited sites per session per user • 74% increase time spent per page per session Flipkart • 3x increase time spent on the site • 40% increase re-engagement rate • 70% increase conversion through „Add to Homescreen” button • 3x less data consumption
11. What are the business benefits? Trivago • 67% users who go offline while browsing, continue browse when they come back online • 150% increase time for people who add its PWA to the home screen Tinder • Cut load times from 11.91 seconds to 4.69 seconds • 90% smaller than native Android app Uber • 50k gzipped app load 3 seconds on 2G networks
12. 12 Where can I use? https://caniuse.com/#search=service%20workers
13. 13 https://jakearchibald.github.io/isserviceworkerready/
18. 18 TECH
19. 19 Technical checklists • Be served over HTTPS • Pages are responsive on tablets & mobile devices • The start URL (at least) loads while offline • Metadata provided for Add to Home screen • First load fast even on 3G • Site works cross-browser • Page transitions don't feel like they block on the network • Each page has a URL https://developers.google.com/web/progressive-web-apps/checklist
21. 21 Recommendation for storing data offline • For URL addressable resources - use the Cache API (part of Service Worker), for all other data - use IndexedDB. • Web Storage (e.g LocalStorage) is synchronous, has no Web Worker support and is size-limited (only strings). Async LS have been kicked around in the past, current focus is on getting IndexedDB 2.0 in a good state. • Cookies have their uses but are synchronous, lack Web Worker support and are size-limited.
22. 22 IndexedDB - how much can you store? • Chrome and Opera: Your storage is per origin (rather than per API) until the browser quota is reached. Manage by Quota Management API. • Firefox: no limits (prompts after 50MB) • Mobile Safari: 50MB max. • Desktop Safari: unlimited (prompts after 5MB) • IE10+: 250MB max (prompts at 10MB.) • Edge: for volume size 8- 32GB = 500MB, >32GB = 4% of volume size https://medium.com/dev-channel/offline-storage-for-progressive-web-apps-70d52695513c https://love2dev.com/blog/what-is-the-service-worker-cache-storage-limit/
23. 23 Service workers • It’s a JavaScript file that runs separately (separate daemon instance) from the main browser thread in the background, intercepting network requests, caching resources, and providing a base for multiple APIs including push notifications, background sync, and caching.
24. 24 Service workers • Because the service worker is not blocking (it's designed to be fully asynchronous) synchronous XHR and localStorage cannot be used in a service worker. • The service worker can't access the DOM directly. To communicate with the page, the service worker uses the postMessage(). • You cannot rely on a global state persisting between events. If there is information that you need to persist and reuse across restarts, you can use IndexedDB databases. • This is not related to the standard browser Cache-Control mechanism.
25. 25 PWA with Really great support!
26. 26 https://github.com/facebook/create-react-app/blob/master/packages/react- scripts/template/README.md#making-a-progressive-web-app
27. 27 https://blog.pusher.com/getting-started-pwa-vue/
28. 28 DEMO https://github.com/asc-lab/ claim-reporter-pwa-example
29. 29 Angular PWA using Angular CLI yarn global add @angular/cli ng new pwa-example --service-worker cd pwa-example ng add @angular/pwa
30. 30 Understanding what happened - package.json
31. 31 Understanding what happened - angular.json
32. 32 Understanding what happened - ngsw-config.json Default caching behavior for: • static assets files • favicon.ico • index.html • CSS bundles • JS bundles • API calls (not added by default)
33. 33 Understanding what happened - ngsw-config.json installMode • prefetch – good for main app files • lazy – cached only if requested updateMode • prefetch – downloaded ahead of time if new version is available https://angular.io/guide/service-worker-config
34. 34 Understanding what happened – app.module.ts • ServiceWorkerModule (added injectable SwUpdate/SwPush) • Register AnSW in the browser if available
35. 35 Lauching an Angular PWA • ng serve doesn’t work with service workers • need a small web server npm install –g http-server ng build --prod http-server –c-1 dist\pwa-example\ • -c-1 disable server caching
37. 37 One-Click Install (Add to Home Screen button) • manifest.json • Link manifest.json in index.html
38. 38 One-Click Install (Add to Home Screen button) • Add manifest.json to angular.json • HTTPS is required!
39. 39 One-Click Install (Add to Home Screen button) REMEMBER! It will only work on mobile browsers. This is 'Add to Home Screen', not 'Add to Desktop'.
40. 40 Deploying new version • After reload ASW check new version ngsw.json on server
46. 46 Examples from the largest companies • https://www.google.com/maps?force=pwa • https://m.uber.com/looking • https://mobile.twitter.com/home • https://m.aliexpress.com/ • https://onet.pl/ • https://tinder.com/ • https://www.trivago.pl/ • https://www.forbes.com
47. 47 References/useful links • https://caniuse.com • https://whatwebcando.today/ • https://jakearchibald.github.io/isserviceworkerready/ • https://jakearchibald.com/2014/offline-cookbook/ • https://developers.google.com/web/tools/workbox/ • http://localforage.github.io/localForage/ • https://www.npmjs.com/package/@ngx-pwa/local- storage • https://html5test.com/compare/browser/ie-11/chrome- 68/edge-18/firefox-60.html