bruce lawson: progressive web apps: the future of apps

Progressive Web Apps: the future of apps

Bruce Lawson Opera Software

Native Apps are a bridging technology

(like Flash)

Why did apps come about?

• The Web wasn’t powerful enough

• Device integration

There’s an API for that• Geolocation

• Touch

• Accelerometer

• Web Audio

• <canvas>, WebGL

• WebRTC

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

User Experience is a feature too!

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

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.

To tell the browser about our Web Manifest,

we add this to the <head>

{ "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"}

{ "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"}

{ "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"}

{ "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"}

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

standalone mode!"}}

{ "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"}

{ "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/

Simple way to keep track of launch trends

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

• Manifest validator manifest-validator.appspot.com

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.

Going Offline

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/

Better Engagement

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

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

Where does this work?

• Opera for Android

• Chrome for Android

• Firefox for Android (soon)

• Safari/ iOS (non-standard)

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

Flipkart Lite

• 40% returning visitors week over week

• +63% conversions from Home screen visits

• 3x time spent on FlipKart Lite

The UX of apps + the reach of the Web

=The Future

• brucel@opera.com

• twitter.com/brucel

• www.brucelawson.co.uk

bruce lawson: progressive web apps: the future of apps

Technology

progressive web apps - next big thing?

progressive web apps and the windows ecosystem ·...

progressive web apps with angular 2

progressive web apps by millicent convento

progressive apps

progressive web apps for startups

progressive web apps - lightning talk

building modern progressive web apps with polymer ·...

progressive web apps. what, why and how

turbolinks 5 + pwa (progressive web apps)

progressive web apps [pt_br]

progressive web apps for beginners

progressive web apps - overview & getting started

demystifying progressive web apps

building modern progressive web apps with polymer

progressive web apps for beginners -...

progressive web apps #thedevconfsp

progressive web apps and wordpress

jws masterclass progressive web apps

google and progressive apps