Progressive Web Apps – the universal benefits

Slide 1

Slide 1 text

The universal beneﬁts Radimir Bitsov @radibit Progressive Web Apps

Slide 2

Slide 2 text

@radibit

Slide 3

Slide 3 text

@radibit Radimir Bitsov Front-end engineer who ❤ web performance, accessibility, and interface animation.

Slide 4

Slide 4 text

@radibit @radibit GitHub · Twi er · CodePen

Slide 5

Slide 5 text

@radibit A11y Meetup Berlin #3

Slide 6

Slide 6 text

@radibit What is Progressive Web App?

Slide 7

Slide 7 text

@radibit

Slide 8

Slide 8 text

@radibit https://www

Slide 9

Slide 9 text

@radibit https :// www

Slide 10

Slide 10 text

“Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform web applications.” h ps://developer.mozilla.org/en-US/Apps/Progressive

Slide 11

Slide 11 text

“These apps work everywhere and provide several features that give them the same user experience advantages as native apps.” h ps://developer.mozilla.org/en-US/Apps/Progressive

Slide 12

Slide 12 text

@radibit “These apps aren’t packaged and deployed through stores, they’re just websites that took all the right vitamins.” Alex Russell,   Senior Staﬀ So ware Engineer, Google Progressive Web Apps: Escaping Tabs Without Losing Our Soul

Slide 13

Slide 13 text

@radibit PWA is secure

Slide 14

Slide 14 text

@radibit PWA is responsive  ⌚

Slide 15

Slide 15 text

@radibit PWA is fresh

Slide 16

Slide 16 text

@radibit Wait, Service Worker?

Slide 17

Slide 17 text

@radibit Service Worker A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction like push notiﬁcations and background sync. Service Workers: an Introduction Application Service Worker Cache Network

Slide 18

Slide 18 text

@radibit No Service Worker Installing Service Worker lifecycle The Service Worker Lifecycle

Slide 19

Slide 19 text

@radibit No Service Worker Installing Activated Error Service Worker lifecycle The Service Worker Lifecycle

Slide 20

Slide 20 text

@radibit No Service Worker Installing Activated Error Idle Terminated Fetch / Message Service Worker lifecycle The Service Worker Lifecycle

Slide 21

Slide 21 text

@radibit Service Worker resources

Slide 22

Slide 22 text

@radibit Service Worker resources

Slide 23

Slide 23 text

@radibit Service Worker resources

Slide 24

Slide 24 text

@radibit PWA is offline first

Slide 25

Slide 25 text

@radibit PWA is discoverable

Slide 26

Slide 26 text

@radibit Wait, Web App Manifest?

Slide 27

Slide 27 text

@radibit Web App Manifest A JSON ﬁle that gives information about our app such as name, description, theme color, icons for the home screen, and a splash screen. Its purpose is to install web apps to the home screen of a device, providing users with quicker access and a richer experience. Web App Manifest

Slide 28

Slide 28 text

@radibit Tools ⚒

Slide 29

Slide 29 text

@radibit PWA Builder A tool that takes data form your site and uses that to generate cross- platform Progressive Web App. h ps://www.pwabuilder.com/

Slide 30

Slide 30 text

@radibit Sonarwhal A tool that can analyze your website and generate a report which can help you to ﬁx potential performance bo lenecks, accessibility and security issues. h ps://sonarwhal.com/

Slide 31

Slide 31 text

If you’re building web apps with performance, accessibility, and security in mind using some of the modern web features, you’re already creating a PWA.

Slide 32

Slide 32 text

@radibit Why PWA?

Slide 33

Slide 33 text

@radibit comScore Mobile Metrix, U.S., Age 18+, June 2016 Mobile web engagement A research on the top 1000 mobile apps vs. the top 1000 mobile web sites 186.6 9.3 Average minutes per visitor Mobile Web Apps

Slide 34

Slide 34 text

@radibit comScore Mobile Metrix, U.S., Age 18+, August 2017 Mobile web is attracting larger audiences A research on the top 500 mobile apps vs. the top 500 mobile web sites 7.0 15.7 Average monthly unique visitors (Million) Mobile Web Apps

Slide 35

Slide 35 text

@radibit Pinterest PWA Performance Case Study Same experience, reduced download cost Comparing Pinterest PWA to the native apps 9.6 MB 56 MB Android 150 KB iOS PWA

Slide 36

Slide 36 text

@radibit Quick and seamless installation process Progressive Web Apps: a love story

Slide 37

Slide 37 text

There is no bigger more popular platform than the Web. PWA combines the ease of access and reach of the Web, along the immersive experience of the native apps.

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text