Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Progressive web apps with polymer

1.339 Aufrufe

Veröffentlicht am

This presentation explores the why and how of progressive web applications. It discusses the technical and business problems that PWA attempt to solve and shows how you can build a Progressive Web App using Polymer.
A big thanks to Alex Russell for allowing me to use some of his content.

Demo app can be found here: https://github.com/vaadin/expense-manager-demo
Vaadin Elements: https://vaadin.com/elements

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

Progressive web apps with polymer

  1. 1. Progressive Web Apps with Polymer @marcushellberg / vaadin
  2. 2. State of the web on mobile
  3. 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. 4. Source: comScore Mobile Metrix, U.S., Age 18+, June 2015 vs.13% 87% Mobile web Apps
  5. 5. What's holding back the web on mobile?
  6. 6. THIS S**T
  7. 7. IT'S 2016
  8. 8. No other platform tries to run desktop apps on phones
  9. 9. NOPE.
  10. 10. The web has no app model
  11. 11. example.com/ example.com/parts/item vs.
  12. 12. The problem is friction
  13. 13. 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
  14. 14. ...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
  15. 15. fiksu.com/resources/fiksu-indexes
  16. 16. 80%OF TIME SPENT IS IN USERS’ TOP 3 APPS Source: comScore Mobile Metrix, U.S., Age 18+, June 2015
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. What's missing? 1.Home screen access 2.Push Notifications 3.Offline support
  21. 21. 1. Home screen access
  22. 22. Progressive Web Apps!
  23. 23. Currently, On EVERY PAGE
  24. 24. <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
  25. 25. Time Spent on Flipkart Lite 3x 70 seconds 210 seconds
  26. 26. Returning Visitors week over week 40%
  27. 27. +63% Conversions from Homescreen visits
  28. 28. 2. Push notifications
  29. 29. 1. Works even if browser closed 2. Requires Service Worker 3. Needs permission, not Install
  30. 30. Respectful Prompts Succeed
  31. 31. +50% repeat visits within 3 months
  32. 32. 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
  33. 33. 3. Offline support
  34. 34. Enter service worker
  35. 35. 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
  36. 36. example.com GET /app.html HTTP/1.1 HOST example.com ... HTTP/1.1 200 OK Date: Thu, 19 Feb 2015 05:21:56 GMT ...
  37. 37. example.com // sw.js onfetch = function(e) { if(e.request.url == "app.html") { e.respondWith( caches.match(e.request) ); } if(e.request.url == "content.json") { // go to the network for updates, // meanwhile, use cached content fetch(...).then(function(r) { r.asJSON().then(function(json) { e.client.postMessage(json); }); }); } }; GET /app.html HTTP/1.1 HOST example.com ... GET /content.json HTTP/1.1 HOST example.com ... GET /content.json HTTP/1.1 HOST example.com ... HTTP/1.1 200 OK Date: Thu, 19 Feb 2015... ...
  38. 38. Service Workers Are 
 Network Progressive Enhancement Progressive Apps work without SW for first load & old browsers.
  39. 39. 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
  40. 40. Are we there yet?
  41. 41. "Becoming a more frequent request. We should do it." https://trac.webkit.org/wiki/FiveYearPlanFall2015
  42. 42. ...
  43. 43. 1. Application shell
  44. 44. Speed tip: don't block the initial render
  45. 45. Vulcanize all the things
  46. 46. 2. Setting up caching
  47. 47. Created by gulpfile cache-config.json index.html
  48. 48. 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
  49. 49. 2. Data sync
  50. 50. Service Worker?
  51. 51. 4. Push notifications
  52. 52. https://github.com/notwaldorf/caturday-post
  53. 53. https://github.com/vaadin/expense-manager-demo
  54. 54. Finally: a few tips
  55. 55. chrome://flags/#bypass-app-banner-engagement-checks
  56. 56. chrome://inspect
  57. 57. 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
  58. 58. Questions?
  59. 59. thanks! marcus@vaadin.com @marcushellberg ſ @marcus

×