Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Progressive Web Applications

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

B30c151ccb4d043a2028691515db4130?s=128

Robert Witkowski

September 19, 2018
Tweet

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?

  8. 8

  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/

  14. 14

  15. 15

  16. 16

  17. 17

  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
  20. 20

  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
  36. 36

  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
  41. 41

  42. 42

  43. 43

  44. 44

  45. 45

  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