PWA Updates in Chrome 68

687ac25540fe35fcb5e828f75c4a6079?s=47 Jimmy Moon
September 16, 2018

PWA Updates in Chrome 68

Let's dive into new behavior for A2HS(Add to Home Screen). You can also get understand of making PWA as an app for Desktop installable and powerful

687ac25540fe35fcb5e828f75c4a6079?s=128

Jimmy Moon

September 16, 2018
Tweet

Transcript

  1. PWA Updates in Chrome 68 PWA DESKTOP

  2. Today ... - Add to Home Screen(A2HS) Changes - PWA

    Desktop Hand-on - Service Worker Caching Changes
  3. Add to Home Screen Changes

  4. Chrome < 68 - Banner notification - Meets the add

    to home screen criteria 
 => SHOW - Not call preventDefault() on the beforeinstallprompt event
 => SHOW - Calling prompt() on the beforeinstallprompt event
 => SHOW
  5. Chrome >= 68 - Mini-inforbar - It will always be

    displayed as meets the `add to home screen criteria` 
 => SHOW - If dismissed by a user, will not be shown for a period of time (~3 month)
 => HIDE
  6. Chrome >= 68 - A2HS Dialog - Calling prompt() within

    a user gesture 
 => SHOW - User tabs the mini-inforbar
 => SHOW - Clicks 'Add to Home screen' from the Chrome menu
 => SHOW
  7. None
  8. Chrome > ?

  9. - The web app is not installed - User engagement

    heuristic (for at least 30 seconds) - Web app manifest - short_name or name - icons (192px and a 512px) - start_url - display (fullscreen, standalone, or minimal-ui) - HTTPS with service workers Criteria
  10. Handle 'beforeinstallprompt' Event

  11. Calling prompt() event

  12. None
  13. None
  14. Why we have all of changes about notification

  15. PWA DESKTOP

  16. https://developers.google.com/web/updates/2018/05/dpwa

  17. None
  18. Make a PWA with @PWA

  19. Make a PWA with @PWA

  20. App Window Elements

  21. App Menu

  22. Design Consideration

  23. Design Consideration

  24. Design Consideration

  25. Design Consideration

  26. Service Worker Caching Changes https://github.com/vuejs-templates/pwa/issues/70

  27. updateViaCache('none' | 'all' | 'imports')

  28. updateViaCache('none' | 'all' | 'imports') none all imports sw.js HTTP

    cache ignored Looking at Cache HTTP cache ignored imports scripts HTTP cache ignored Looking at Cache Looking at Cache
  29. - New in Chrome 68 | Web | Google Developers

    - Changes to Add to Home Screen Behavior | Web | Google Developers - Add to Home Screen | Web Fundamentals | Google Developers - https://pwa.cafe/ - Fresher service workers, by default | Web | Google Developers References