Progressive web apps with polymer
7 likes1,542 views
Progressive Web Apps use new web platform technologies like manifest files and service workers to deliver app-style experiences to users on the mobile web. By adding features normally only available to native apps, like home screen shortcuts, push notifications, and offline access, Progressive Web Apps improve user engagement. For example, one Progressive Web App saw time spent increase 3x and returning visitor rates rise by 63% after adding these capabilities. While browser support for the required technologies is still evolving, Progressive Web Apps provide a path for the mobile web to better compete with native apps.
![<meta name="theme-color" content="#303F9F">
<link rel="manifest" href="manifest.json">
HTML
{
"short_name": "Air Horner",
"name": "Air Horner",
"start_url": "/",
"display": "standalone",
"icons": [{
"src": "icons/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"density": "4.0"
}],
"orientation": "portrait",
"gcm_sender_id": "129757602160"
}
JSON Manifest
With Manifests
Metadata delegated to one file
Extensible & crawlable](https://image.slidesharecdn.com/progressivewebappswithpolymer-160413100429/85/Progressive-web-apps-with-polymer-29-320.jpg)
Progressive web apps with polymer
- 1. Progressive Web Apps with Polymer @marcushellberg / vaadin
- 2. State of the web on mobile
- 3. 86% 14% TIME SPENT ON SITES TIME SPENT ON APPS “Apps continued to cement their lead, and commanded 86% of the average US mobile consumer’s time” Flurry 2014/04/01
- 4. Source: comScore Mobile Metrix, U.S., Age 18+, June 2015 vs.13% 87% Mobile web Apps
- 5. What's holding back the web on mobile?
- 6. THIS S**T
- 7. IT'S 2016
- 8. No other platform tries to run desktop apps on phones
- 9. NOPE.
- 11. The web has no app model
- 14. The problem is friction
- 15. Load store Click install Accept permissions Download, wait... Find in store Use Let’s say I intrigued ~1000 of you 800 640 512 410 328 262 “In a consumer mobile app, every step you make a user perform before they get value out of your app will cost you ~20% of users...” http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html
- 17. ...but what if I can get users directly into a store/install flow? Click install 800 Accept permissions 640 Download, wait 512 Find, Use 410
- 19. 80%OF TIME SPENT IS IN USERS’ TOP 3 APPS Source: comScore Mobile Metrix, U.S., Age 18+, June 2015
- 21. 86% 14% TIME SPENT ON SITES TIME SPENT ON APPS 14% 40% GAMING & ENT. 28% SOCIAL 20% OTHER 66% SITES 6% APPS 28% SITES & APPS PRIMARY CHANNEL FOR COMMERCIAL TASKS USER TIME SPENT ON MOBILE DEVICES
- 22. average apps used per month by a mobile user 27 sites navigated to per month by the average Chrome for Android user 100+ Source: Nielsen Mobile Report June 2015
- 23. Today's Mobile Web: Broad Reach, Low Engagement Top 1000 mobile apps vs. top 1000 mobile web properties 10.9 Monthly unique visitors (MM) 3.3 Average minutes per visitor Mobile webApps 8.9 201.8 Source: comScore Mobile Metrix, U.S., Age 18+, June 2015
- 24. What's missing? 1.Home screen access 2.Push Notifications 3.Offline support
- 25. 1. Home screen access
- 28. Currently, On EVERY PAGE
- 29. <meta name="theme-color" content="#303F9F"> <link rel="manifest" href="manifest.json"> HTML { "short_name": "Air Horner", "name": "Air Horner", "start_url": "/", "display": "standalone", "icons": [{ "src": "icons/icon-192.png", "sizes": "192x192", "type": "image/png", "density": "4.0" }], "orientation": "portrait", "gcm_sender_id": "129757602160" } JSON Manifest With Manifests Metadata delegated to one file Extensible & crawlable
- 31. Time Spent on Flipkart Lite 3x 70 seconds 210 seconds
- 32. Returning Visitors week over week 40%
- 35. 1. Works even if browser closed 2. Requires Service Worker 3. Needs permission, not Install
- 37. +50% repeat visits within 3 months
- 38. 26% increase in average spend per visit by members arriving via a push notification 72% increase in time spent for users visiting via a push notification
- 43. Event-driven Best-effort while executing event handlers Shut down between events Idle SWs can be reclaimed to limit memory use Only one active instance 1:N SW/tabs. Node-like I/O via events
- 46. Service Workers Are Network Progressive Enhancement Progressive Apps work without SW for first load & old browsers.
- 48. 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 Sessions Load time (in seconds) Bouncerate(%) Sessions Bounce rate 13% bounce rate 20% bounce rate 58% bounce rate
- 50. Are we there yet?
- 56. "Becoming a more frequent request. We should do it." https://trac.webkit.org/wiki/FiveYearPlanFall2015
- 60. ...
- 65. Speed tip: don't block the initial render
- 68. Vulcanize all the things
- 71. 2. Setting up caching
- 75. Caching strategies networkFirst – check network first, fall back on cache fastest – hit both network and cache at the same time, return faster networkOnly – bypass cache
- 77. 2. Data sync
- 78. Service Worker?
- 86. Finally: a few tips
- 88. chrome://inspect
- 91. Resources Poylmer Starter Kit developers.google.com/web/tools/polymer-starter-kit Polymer Slack polymer-slack.herokuapp.com Getting Started With Progressive Web Apps tutorial addyosmani.com/blog/getting-started-with-progressive-web-apps SW Toolbox github.com/GoogleChrome/sw-toolbox
- 92. Questions?