Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Progressive Web Apps - Techdays Finland

784 views

Published on

PWA are a hot topic and it is important to understand that they are a different approach to apps than the traditional way of packaging something and letting the user install it. In this keynote you'll see some of the differences.

Published in: Education
  • Be the first to comment

Progressive Web Apps - Techdays Finland

  1. 1. Progressive Web Apps Speaker Name
  2. 2. Partner Application Experience
  3. 3. Apps in the Enterprise Photo by Janson G: pixabay.com/en/spaceship-model-isolated-enterprise-2749360/
  4. 4. Progressive Web Apps
  5. 5. twitter.com/codepo8/status/954311316113690624
  6. 6. “But, what is a PWA?”, I hear you ask. Yeah, OK, a developer can dream…
  7. 7. A PWA is Discoverable Installable Linkable Network Independent Safe Re-engageable Progressive Responsive App-Like Fresh
  8. 8. Asking that much is a bit of a stretch…
  9. 9. Let’s make this simpler… A PWA is a web-technology based application. It mixes the best of the web and the app space.
  10. 10. Let’s make this simpler… A PWA has a unique URL. This can be used as a distribution model. The link.
  11. 11. Let’s make this simpler… PWAs are progressive. They don’t work and behave the same everywhere.
  12. 12. Let’s make this simpler… PWAs are progressive. They improve over time and with the ability of the host environment.
  13. 13. Let’s make this simpler… If you choose to install PWAs they behave like we expect apps to behave. Without any of the annoying bits…
  14. 14. Bridging the gap between apps and web needed good technology
  15. 15. PWAs use the current web, progressively aka.ms/webcando
  16. 16. Additionally, we needed two new technologies.
  17. 17. Web Manifest
  18. 18. Service Workers
  19. 19. We talk far too much about the nuts and bolts.
  20. 20. E Engaging Let’s concentrate on how our apps appear to the user. F Fast I Integrated R Reliable
  21. 21. Let’s talk about things that need work…
  22. 22. Speed
  23. 23. E Engaging F Fast I Integrated R Reliable Empty shells are fast, but not useful... twitter.com/codepo8/status/954308397809184768
  24. 24. E Engaging F Fast I Integrated R Reliable PWAs should be faster, not slower...
  25. 25. Integration
  26. 26. E Engaging F Fast I Integrated R Reliable PWAs should play well with the OS…
  27. 27. E Engaging F Fast I Integrated R Reliable Alas, it is the web and user choice...
  28. 28. E Engaging F Fast I Integrated R Reliable We have some work to do...
  29. 29. E Engaging F Fast I Integrated R Reliable Great integrations less mentioned aka.ms/pwa-on-win10
  30. 30. E Engaging F Fast I Integrated R Reliable Search engine integration...
  31. 31. E Engaging F Fast I Integrated R Reliable From web to app store via manifest...
  32. 32. E Engaging F Fast I Integrated R Reliable Yes, the manifest matters...
  33. 33. Reliability
  34. 34. E Engaging F Fast I Integrated R Reliable Embracing the web shareability...
  35. 35. E Engaging F Fast I Integrated R Reliable Avoiding known annoyances
  36. 36. E Engaging F Fast I Integrated R Reliable Availability in the worst scenarios...
  37. 37. E Engaging F Fast I Integrated R Reliable Let’s be mindful of Service Workers… homebrewery.naturalcrit.com/share/SyZ4Sxms5b
  38. 38. Engagement
  39. 39. E Engaging F Fast I Integrated R Reliable Engaging, not annoying…
  40. 40. E Engaging F Fast I Integrated R Reliable Not all re-use is advisable...
  41. 41. E Engaging F Fast I Integrated R Reliable Going too basic isn‘t helping either...
  42. 42. E Engaging F Fast I Integrated R Reliable Let’s build progressive interfaces…
  43. 43. E Engaging F Fast I Integrated R Reliable Same app, different environment…
  44. 44. This isn’t new - our web best practices apply… E Engaging F Fast I Integrated R Reliable
  45. 45. PWA tooling is great! (as always, it is tough to build tools for an open stack)
  46. 46. ServiceWorker Cookbook (Mozilla) aka.ms/serviceworkers
  47. 47. Workbox (Google) aka.ms/workbox
  48. 48. Lighthouse (Google) aka.ms/google-lighthouse
  49. 49. Sonar (Microsoft) aka.ms/sonartool
  50. 50. Not everybody cares about the nuts and bolts… twitter.com/headjs_ru/status/955333399564161024
  51. 51. PWA Builder (Microsoft) aka.ms/pwa-builder
  52. 52. PWA Builder (Microsoft) aka.ms/pwa-builder
  53. 53. Why is it hard to find great examples?
  54. 54. Why indeed?
  55. 55. developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_11_1.html
  56. 56. Our PWA messaging is at times awful and short-sighted E Engaging F Fast I Integrated R Reliable
  57. 57. Moaning travels upwards and takes a long time to arrive. Photo by Janson G: pixabay.com/en/spaceship-model-isolated-enterprise-2749360/
  58. 58. It is tough to find PWAs on FIRE (that aren’t demos)
  59. 59. PWA Stats (Cloud Four) aka.ms/pwa-stats
  60. 60. ▪ Web App Manifests should suggest quality: we found 1.5 million manifests across 800k domains. Most are not ready. We will be looking for non-boilerplate manifests that include a name, description, and at least one icon that is larger than 512px square. ▪ Sites should be secure (“HTTPS”) ▪ Service Workers should be an enhancement: we expect experiences to degrade gracefully if Service Worker is unsupported. ▪ Sites should consider automated testing for quality. ▪ PWAs must be compliant with Microsoft Store policies: PWA need to be high quality aka.ms/pwa-on-win10
  61. 61. Please help the PWA effort
  62. 62. Don’t assume your experience is normal E Engaging F Fast I Integrated R Reliable
  63. 63. Give feedback and take part in tools and docs E Engaging F Fast I Integrated R Reliable
  64. 64. Keep up-to-date before telling people about PWAs. E Engaging F Fast I Integrated R Reliable
  65. 65. Promote and celebrate great examples. E Engaging F Fast I Integrated R Reliable
  66. 66. I try to stop people to package awful websites into containers - again.
  67. 67. Please, help!
  68. 68. Thank you! Thank you! Chris Heilmann @codepo8

×