Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South Korea

Proprietary + Confidential

Introduction to Progressive Web Apps

@robertnyman

Confidential & ProprietaryHello everyone!

안녕하세요!

Confidential & Proprietary

로버트입니다

I am Robert

Confidential & ProprietaryI’m from Sweden - 저는 스웨덴에서 왔어요


9 million people

If I lived in South Korea, I would:

- Be 60.49% less likely to be unemployed - Spend 67.99% less money on health care - Use 34.47% less electricity - Be 11.11% less likely to be murdered

50 million people

If you lived in Sweden, you would:

- Have 28.87% more free time - Make 23.19% more money - Consume 30.7% less oil - Live 2.09 years longer

South Korea - Sweden

Confidential & ProprietarySomething I recognize

Confidential & ProprietaryI am an IT professional


The web

A brief history lesson

HTML + HTTP and Documents

19911993

19961997

2004 2007 20142005 2008

A brief history lesson2016

Common Gateway Interface

19911993

19961997

2004 2007 20142005 2008

A brief history lesson 2016

Peak CGI

19911993

19961997

2004 2007 20142005 2008


XMLHTTP

web.archive.org/web/20070623125327/http://www.alexhopmann.com/xmlhttp.htm

19911993

19961997

2004 2007 20142005 2008


Gmail

19911993

19961997

2004 2007 20142005 2008


AJAX

19911993

19961997

2004 2007 20142005 2008


Mobile hits town with the iPhone

19911993

19961997

2004 2007 20142005 2008


Mobile == Apps

19911993

19961997

2004 2007 20142005 2008


Service Worker

19911993

19961997

2004 2007 20142005 2008


?

19911993

19961997

2004 2007 201420162005 2008

A brief history lesson

Confidential & ProprietaryWeb declared dead in 2010

Confidential & ProprietaryWeb very much alive in 2016

Confidential & ProprietaryNov 2015, 800 million users

Confidential & ProprietaryApr 2016, 1 Billion users

Confidential & ProprietaryWeb is all browsers


Native & the web

Confidential & ProprietaryWeb traffic twice as much as native

Confidential & ProprietaryOnly 10% time spent in browser

Confidential & ProprietaryThings could be easier

Confidential & ProprietaryReducing friction

Every Step Costs You 20% of Users

- Gabor Cselle

http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html


Impact of speed on bounce rates

Source: SOASTA; September, 2015

2.4 2.7 3.0 3.3 3.6 3.9 4.2 4.5 4.8 5.1 5.4 5.7 6.0 6.3 6.6 6.9 7.2 7.5 7.8 8.1 8.4 8.7 9.0 9.3 9.6 9.9

180,000

140,000

100,000

60,000

0

20,000

58

45

32

19

0

6

Sess

ions

Load time (in seconds)

Boun

ce ra

te (%

)

Sessions Bounce rate

13%bounce

rate

20%bounce

rate

58%bounce

rate

Performance


RAIL: Instant loading and smooth navigation

For first visitors, load pages in <10s on 3G net

Aspirational goal: <3s to first paint

For repeat visitors, loading of page in <500 ms Always scrolling at 60 frames/second Content shouldn’t jump as images are loaded

Performance


SLICE


Build instantly engaging sites and apps without the need for a

mandatory app download

SLICE

Confidential & ProprietarySecure

Confidential & ProprietaryLinkable

Confidential & ProprietaryIndexable

Confidential & ProprietaryComposable

Confidential & ProprietaryEphemeral


Why do developers need a native app?


Performance Offline access Periodic background processing Notifications Sensors OS-specific features

From Brett Cannon


https://nothingbutsnark.svbtle.com/going-allin-on-the-mobile-web


Performance Offline access Periodic background processing Notifications Sensors OS-specific features



Progressive Web Apps


Reliable: Fast loading, works on flaky networksFast: Smooth animation, scrolling and navEngaging and integrated

On the home screen, no URL bar, icons, splash Re-engaging with push notifications

Consistent experience across browsers(still in progress, though)

The Progressive Web App Experience



Client-side proxy in JavaScript

Net requests, but also push & sync

Service Workers


Confidential & ProprietaryProgressive Web Apps


Web App Manifests


<meta name="theme-color" content="#303F9F"><link rel="manifest" href="manifest.json">


Web App Manifests


{ "short_name": "Air Horner", "name": "Air Horner", "start_url": "/", "display": "standalone", "orientation": "portrait", "icons": [{ "src": "icons/icon-192.png", "sizes": "192x192", "type": "image/png" }]}


Add to Homescreen and launch in full-screen mode

User who visits 2x in a given time period will be prompted with “add to homescreen”

One tap to add to homescreen

Opens full screen (no URL bar)



Web push notifications

System level notifications, like apps

Ask to notify users with specific information

Can send notifications even when page closed



Progressive Web App technologies

Required Recommended Features

Service Worker Push notifications

Web App Manifest App shell caching

Splash screen

Advanced Offline Support

Smooth navigation

“Progressive enhancement” with cross browser support



PWAs can work across browsers

PWAs should work across all modern browsers

Service Worker available in Chrome, Opera, and Firefox; “High priority roadmap” for Microsoft Edge, Safari and UC Web exploring

7



Security - HTTPS

Alex Martinez unsplash.com Security - HTTPS

https://unsplash.com/photos/CwH2-7IPWEE

Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem

Do you know if any ISP’s or other services are injecting Ads or anything else in to your site? Paul Kinlan | bit.ly/content-injection

“”

Source: https://paul.kinlan.me/detecting-injected-content/Security - HTTPS

http://bit.ly/content-injection

Features

Service workers ● Offline ● Push ● Background Sync ● ....???


Features

Add to homescreen HTTP2 Brotli getUserMedia() Geolocation



Adding HTTPS to your web site



letsencrypt.org

letsencrypt.readthedocs.org



Deployment


Deployment


Source: http://bit.ly/ssl-config-gen

bit.ly/ssl-config-gen


bit.ly/ssl-labs


Localhost


DevTools


More Info

Security Docs

bit.ly/security-docs

HTTPS: The Green Lock and Beyond

bit.ly/green-lock-beyond


http://bit.ly/security-docs

http://bit.ly/green-lock-beyond


Use cases


Flipkart: Early results

App

3x time spent on site, from 1 minute to 3.5 minutes

Seeing 40% visitors return week over week

Users love smooth experience on 2G & flaky networks

Use cases


Google Developer Experts


GitHub contributions to open source projects

StackOverflow reputation

Conference Speaker

Event Organizer

Well versed in the fundamentals of Web Development

Familiarity with new standards as they’re coming into web browsers



robertnyman.com

[email protected]

@robertnyman감사합니다!

Thank you!

Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South Korea

Technology