PWA Updates in Chrome 68

Slide 1

Slide 1 text

PWA Updates in Chrome 68 PWA DESKTOP

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Add to Home Screen Changes

Slide 4

Slide 4 text

Chrome < 68 - Banner notiﬁcation - Meets the add to home screen criteria   => SHOW - Not call preventDefault() on the beforeinstallprompt event  => SHOW - Calling prompt() on the beforeinstallprompt event  => SHOW

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Chrome > ?

Slide 9

Slide 9 text

- 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

Slide 10

Slide 10 text

Handle 'beforeinstallprompt' Event

Slide 11

Slide 11 text

Calling prompt() event

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Why we have all of changes about notiﬁcation

Slide 15

Slide 15 text

PWA DESKTOP

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

Make a PWA with @PWA

Slide 19

Slide 19 text

Make a PWA with @PWA

Slide 20

Slide 20 text

App Window Elements

Slide 21

Slide 21 text

App Menu

Slide 22

Slide 22 text

Design Consideration

Slide 23

Slide 23 text

Design Consideration

Slide 24

Slide 24 text

Design Consideration

Slide 25

Slide 25 text

Design Consideration

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text