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

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