54
Progressive Web Apps: the future of apps Bruce Lawson Opera Software

Bruce Lawson: Progressive Web Apps: the future of Apps

Embed Size (px)

Citation preview

Page 1: Bruce Lawson: Progressive Web Apps: the future of Apps

Progressive Web Apps: the future of apps

Bruce Lawson Opera Software

Page 2: Bruce Lawson: Progressive Web Apps: the future of Apps

Native Apps are a bridging technology

(like Flash)

Page 3: Bruce Lawson: Progressive Web Apps: the future of Apps

Why did apps come about?

• The Web wasn’t powerful enough

• Device integration

Page 4: Bruce Lawson: Progressive Web Apps: the future of Apps

There’s an API for that• Geolocation

• Touch

• Accelerometer

• Web Audio

• <canvas>, WebGL

• WebRTC

Page 5: Bruce Lawson: Progressive Web Apps: the future of Apps

It's an App World. The Web Just Lives in It

“Today, the U.S. consumer spends an average of 2 hours and 38 minutes per day on smartphones and tablets. 80% of that time (2 hours and 7 minutes) is spent inside apps and 20% (31 minutes) is spent on the mobile web.”

blog.flurry.com April, 2013

Page 6: Bruce Lawson: Progressive Web Apps: the future of Apps
Page 7: Bruce Lawson: Progressive Web Apps: the future of Apps
Page 8: Bruce Lawson: Progressive Web Apps: the future of Apps
Page 9: Bruce Lawson: Progressive Web Apps: the future of Apps

User Experience is a feature too!

Page 10: Bruce Lawson: Progressive Web Apps: the future of Apps

Progressive Web Apps

• “install” to the home screen

• have their own icon (defined by the web developer)

• can launch full-screen, portrait or landscape

• but “live” on the Web

Page 11: Bruce Lawson: Progressive Web Apps: the future of Apps
Page 12: Bruce Lawson: Progressive Web Apps: the future of Apps

Manifest filestores metadata for your web app: icons, description, colors, and related info that lets browsers create high-quality experiences for the launcher icon, task switcher, and splash screen.

Page 13: Bruce Lawson: Progressive Web Apps: the future of Apps

To tell the browser about our Web Manifest,

we add this to the <head>

<link rel="manifest" href="/manifest.json">

Page 14: Bruce Lawson: Progressive Web Apps: the future of Apps

{ "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true"}

Page 15: Bruce Lawson: Progressive Web Apps: the future of Apps

{ "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", “start_url": "/simple-demo/?home=true"}

Page 16: Bruce Lawson: Progressive Web Apps: the future of Apps

{ "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true"}

Page 17: Bruce Lawson: Progressive Web Apps: the future of Apps

{ "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true"}

Page 18: Bruce Lawson: Progressive Web Apps: the future of Apps

{ "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true"}

Page 19: Bruce Lawson: Progressive Web Apps: the future of Apps

{ "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", “start_url": "/simple-demo/?home=true"}

Page 20: Bruce Lawson: Progressive Web Apps: the future of Apps

{ "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", “start_url": "/simple-demo/?home=true"}

Page 21: Bruce Lawson: Progressive Web Apps: the future of Apps

{ "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true"}

Page 22: Bruce Lawson: Progressive Web Apps: the future of Apps

{ "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true"}

Page 23: Bruce Lawson: Progressive Web Apps: the future of Apps

{ "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true"}

Page 24: Bruce Lawson: Progressive Web Apps: the future of Apps

{ "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true"}

Page 25: Bruce Lawson: Progressive Web Apps: the future of Apps

{ "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true"}

Page 26: Bruce Lawson: Progressive Web Apps: the future of Apps

{ "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true"}

Page 27: Bruce Lawson: Progressive Web Apps: the future of Apps

{ "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true"}

Page 28: Bruce Lawson: Progressive Web Apps: the future of Apps

{ "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true"}

Page 29: Bruce Lawson: Progressive Web Apps: the future of Apps

{ "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true"}

Page 30: Bruce Lawson: Progressive Web Apps: the future of Apps

{ "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", “start_url": "/simple-demo/?home=true"}

Page 31: Bruce Lawson: Progressive Web Apps: the future of Apps

{ "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "fullscreen", "orientation": "portrait", "start_url": "/simple-demo/?home=true"}

Page 32: Bruce Lawson: Progressive Web Apps: the future of Apps

{ "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "browser", "orientation": "portrait", "start_url": "/simple-demo/?home=true"}

Page 33: Bruce Lawson: Progressive Web Apps: the future of Apps

{ "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true"}

Page 34: Bruce Lawson: Progressive Web Apps: the future of Apps

{ "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true"}

CSS

@media (display-mode: standalone) {h3:after {content: " in

standalone mode!"}}

Page 35: Bruce Lawson: Progressive Web Apps: the future of Apps

{ "name": "Air Horner", "short_name": "Air Horner", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#2196F3", "background_color": "#2196F3", "display": "fullscreen", "orientation": "portrait", "start_url": "/?home=true"}

Page 36: Bruce Lawson: Progressive Web Apps: the future of Apps

{ "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#990000", "background_color": "#DFCFAF", "display": "fullscreen", "orientation": "landscape", "start_url": "/inbox-attack/?home=true"}

https://andreasbovens.github.io/inbox-attack/

Page 37: Bruce Lawson: Progressive Web Apps: the future of Apps

{ "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true"}

Simple way to keep track of launch trends

Page 38: Bruce Lawson: Progressive Web Apps: the future of Apps

Tools

• Manifest Generator http://brucelawson.github.io/manifest/

• Manifest validator manifest-validator.appspot.com

Page 39: Bruce Lawson: Progressive Web Apps: the future of Apps

Opera differences• HTTP-hosted sites will only display with browser UI,

regardless of what the manifest states

• When the user follows a link that takes the user out of the domain of the installed app, a new tab is spawned, with browser chrome. (Chrome shows a small address at the top of a standalone-app. We prefer to make it more obvious to the user that they have gone outside your app.)

• Opera doesn’t (yet) support background_color; this will be added in a forthcoming release.

Page 40: Bruce Lawson: Progressive Web Apps: the future of Apps

Going Offline

Page 41: Bruce Lawson: Progressive Web Apps: the future of Apps
Page 42: Bruce Lawson: Progressive Web Apps: the future of Apps

Service Worker• Service Worker allows developers to cache assets

when connected, and intercept failed calls to network when offline, so user experience can be maintained.

• Faster loading of assets, even when online.

• https://developers.google.com/web/fundamentals/primers/service-worker/

• https://www.smashingmagazine.com/2016/02/making-a-service-worker/

Page 43: Bruce Lawson: Progressive Web Apps: the future of Apps
Page 44: Bruce Lawson: Progressive Web Apps: the future of Apps
Page 45: Bruce Lawson: Progressive Web Apps: the future of Apps
Page 46: Bruce Lawson: Progressive Web Apps: the future of Apps

{ "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true"}

Page 47: Bruce Lawson: Progressive Web Apps: the future of Apps

Better Engagement

Page 48: Bruce Lawson: Progressive Web Apps: the future of Apps

Push notifications

• Web Apps with Service Workers can also use Push Notifications to drive engagement, even when the browser/ app isn’t open.

• https://developers.google.com/web/fundamentals/getting-started/push-notifications/?hl=en

Page 49: Bruce Lawson: Progressive Web Apps: the future of Apps

Beyond the Rack

• 72% increase in time spent for users visiting via a push notification

• 26% increase in average spend per visit by members arriving via a push notification

• +50% repeat visits within 3 months

Page 50: Bruce Lawson: Progressive Web Apps: the future of Apps

Where does this work?

• Opera for Android

• Chrome for Android

• Firefox for Android (soon)

• Safari/ iOS (non-standard)

Page 51: Bruce Lawson: Progressive Web Apps: the future of Apps

Progressive Web Apps• live on the server so no update distribution lag

• require no app store or gatekeeper

• can work offline

• are a normal website on browsers such as Opera Mini, Safari, Windows phones

• searchable, indexable, linkable

Page 52: Bruce Lawson: Progressive Web Apps: the future of Apps

Flipkart Lite

• 40% returning visitors week over week

• +63% conversions from Home screen visits

• 3x time spent on FlipKart Lite

Page 53: Bruce Lawson: Progressive Web Apps: the future of Apps

The UX of apps + the reach of the Web

=The Future

Page 54: Bruce Lawson: Progressive Web Apps: the future of Apps

[email protected]

• twitter.com/brucel

• www.brucelawson.co.uk