$30 off During Our Annual Pro Sale. View Details »

PWA Updates in Chrome 68

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

Jimmy Moon

September 16, 2018
Tweet

More Decks by Jimmy Moon

Other Decks in Programming

Transcript

  1. PWA Updates in Chrome 68
    PWA DESKTOP

    View Slide

  2. Today ...
    - Add to Home Screen(A2HS) Changes
    - PWA Desktop Hand-on
    - Service Worker Caching Changes

    View Slide

  3. Add to Home Screen
    Changes

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  7. View Slide

  8. Chrome > ?

    View Slide

  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

    View Slide

  10. Handle 'beforeinstallprompt' Event

    View Slide

  11. Calling prompt() event

    View Slide

  12. View Slide

  13. View Slide

  14. Why we have all of
    changes about notification

    View Slide

  15. PWA DESKTOP

    View Slide

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

    View Slide

  17. View Slide

  18. Make a PWA with @PWA

    View Slide

  19. Make a PWA with @PWA

    View Slide

  20. App Window Elements

    View Slide

  21. App Menu

    View Slide

  22. Design Consideration

    View Slide

  23. Design Consideration

    View Slide

  24. Design Consideration

    View Slide

  25. Design Consideration

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide