Bruce Lawson: Progressive Web Apps: the future of Apps

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

2. Native Apps are a bridging technology (like Flash)

3. Why did apps come about? • The Web wasn’t powerful enough • Device integration

4. There’s an API for that • Geolocation • Touch • Accelerometer • Web Audio • <canvas>, WebGL • WebRTC

5. 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.ﬂurry.com April, 2013

9. User Experience is a feature too!

10. Progressive Web Apps • “install” to the home screen • have their own icon (deﬁned by the web developer) • can launch full-screen, portrait or landscape • but “live” on the Web

12. Manifest ﬁle stores 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.

13. To tell the browser about our Web Manifest, we add this to the <head> <link rel="manifest" href="/manifest.json">

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

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

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

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

34. { "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!"} }

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

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

37. { "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

38. Tools • Manifest Generator http://brucelawson.github.io/ manifest/ • Manifest validator manifest-validator.appspot.com

39. 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.

40. Going Ofﬂine

42. Service Worker • Service Worker allows developers to cache assets when connected, and intercept failed calls to network when ofﬂine, 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/

47. Better Engagement

48. 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

49. Beyond the Rack • 72% increase in time spent for users visiting via a push notiﬁcation • 26% increase in average spend per visit by members arriving via a push notiﬁcation • +50% repeat visits within 3 months

50. Where does this work? • Opera for Android • Chrome for Android • Firefox for Android (soon) • Safari/ iOS (non-standard)

51. Progressive Web Apps • live on the server so no update distribution lag • require no app store or gatekeeper • can work ofﬂine • are a normal website on browsers such as Opera Mini, Safari, Windows phones • searchable, indexable, linkable

52. Flipkart Lite • 40% returning visitors week over week • +63% conversions from Home screen visits • 3x time spent on FlipKart Lite

53. The UX of apps + the reach of the Web =The Future

54. • brucel@opera.com • twitter.com/brucel • www.brucelawson.co.uk

Bruce Lawson: Progressive Web Apps: the future of Apps

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Bruce Lawson: Progressive Web Apps: the future of Apps

Similar to Bruce Lawson: Progressive Web Apps: the future of Apps (20)

More from brucelawson

More from brucelawson (20)

Recently uploaded

Recently uploaded (20)

Bruce Lawson: Progressive Web Apps: the future of Apps