PWAs, are we there yet?!
•Download as PPTX, PDF•
2 likes•940 views
Progressive web applications are the new hip and all the cool kids are on board. They are slowly becoming an industry standard for building web applications. With reliability, speed and immersive user experience in mind, PWAs help you reach a broader audience. But what are the gotchas? Let's explore some of the limitations we might encounter compared to native applications. Which traditionally native features are now available for PWAs to use and which are in development? All browsers are on the same page, supporting features like Service Workers is key but which are differences in API implementation and what bugs should we be aware of? After this session you'll walk away with a clear idea on which is the current state of PWAs, its limitations as well as its strengths.
Recommended
Recommended
More Related Content
Similar to PWAs, are we there yet?!
Similar to PWAs, are we there yet?! (20)
More from Simona Cotin
More from Simona Cotin (14)
Recently uploaded
Recently uploaded (20)
PWAs, are we there yet?!
- 6. @simona_cotin Simona Cotin Dev Advocate @ Microsoft @simona_cotin
- 7. @simona_cotin Intro to PWA Dive into main concepts Angular <3 Pwa PWA vs Native Gotchas Tools
- 9. @simona_cotin –Wikipedia “Progressive web apps (PWAs) are web applications that are regular web pages or websites, but can appear to the user like traditional applications or native mobile applications.”
- 10. @simona_cotin –Alex Russell “..they’re just websites that took all the right vitamins”
- 11. @simona_cotin
- 12. @simona_cotin
- 14. @simona_cotin
- 15. @simona_cotin
- 16. @simona_cotin
- 19. @simona_cotin
- 20. @simona_cotin
- 23. @simona_cotin Baseline “Appyness” •Service workers •Web manifest •Delivered over HTTPS
- 24. @simona_cotin –Netlify “Service workers are proxies that sit between the web page and the network, providing cached versions of the site when no network connectivity is available.” Service Workers 🏋🏋♀️
- 25. @simona_cotin –Dean Alan Hume, https://www.amazon.com/Progressive-Apps-Dean-Alan- Hume/dp/1617294586 “Think of your web requests as planes taking off. Service Worker is the air traffic controller that routes the requests. It can load from the network or even off the cache” Service Workers 🏋🏋♀️
- 39. @simona_cotin
- 40. @simona_cotin –Mozilla “The web app manifest provides information about an application (such as name, author, icon, and description) in a JSON text file. The purpose of the manifest is to install web applications to the homescreen of a device, providing users with quicker access and a richer experience. ”
- 41. @simona_cotin
- 43. @simona_cotin Service workers need to be served over HTTPS
- 45. @simona_cotin
- 46. @simona_cotin Create service workers using the angular cli
- 47. @simona_cotin
- 48. @simona_cotin
- 49. @simona_cotin
- 50. @simona_cotin
- 51. @simona_cotin
- 52. @simona_cotin
- 53. @simona_cotin
- 54. @simona_cotin
- 55. @simona_cotin
- 56. @simona_cotin
- 57. @simona_cotin
- 58. @simona_cotin
- 59. @simona_cotin 🏋
- 60. @simona_cotin
- 62. @simona_cotin State of the Web
- 63. @simona_cotin State of the Web
- 66. @simona_cotin Software ✓Push notification ✓Save to home screen ✓Fullscreen ✓Offline ✓Clipboard 👎 👎 👎
- 67. @simona_cotin Not supported ✋ ๏Contacts, calendar ๏Alarms ๏Calls, sms
- 79. @simona_cotin Gotchas 🏋🏋♀️ Safari will delete cache after a couple of weeks
- 82. @simona_cotin Gotchas 🏋🏋♀️ State Safari doesn’t keep state when app goes in background
- 84. @simona_cotin
- 85. @simona_cotin
- 86. @simona_cotin
- 87. @simona_cotin
- 88. @simona_cotin
- 89. @simona_cotin
- 90. @simona_cotin –https://developers.google.com/web/progressive-web-apps/ “A new way to deliver amazing user experiences on the web”
Editor's Notes
- https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/
- to fit any form factor, desktop, mobile, tablet, or forms yet to emerge.
- Your app should still work offline, or on low quality networks.
- Feel like an app to the user with app-style interactions and navigation.
- Always up-to-date thanks to the service worker update process.
- Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with.
- Are identifiable as “applications” thanks to W3C Manifests and Service Worker registration scope allowing search engines to find them
- Make re-engagement easy through features like push notifications.
- Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.
- Easily shared via a URL and do not require complex installation.
- So how do make this happen, in code?
- So let’s dive into each of these and understand what they are. https://www.netlify.com/blog/2017/10/31/service-workers-explained/
- So let’s dive into each of these and understand what they are. https://www.netlify.com/blog/2017/10/31/service-workers-explained/
- If you’re wondering what’s the current support for service workers, its fully supported in Firefox, Chrome, Chrome for android and Samsung internet and it’s in development for edge https://jakearchibald.github.io/isserviceworkerready/
- And if we were to look at a diagram of how this works, we have the web page and the service worker on the same side of the wire, and then over the network we can go retrieve data from the server or we can get that from a cache that sits on the same side as service workers
- So in a request-response model, we first make a request from the web page, the request is intercepted by the service worker, which then inspects it, works hard to understand where is should go, and decided to retrieve data from the network
- Or it can decide to first retrieve the data from the cache and return that to the user and only after that go over the network and update if necessary.
- And a service worker has a scope and a lifecycle that we can tap into
- A service worker has a lifecycle that is completely separate from your web page. A service workers life starts after it registers, it gets into the installing stage and from there it can either error or get activated. And then it can move into idle if nothing happens and either terminated of fetch.
- For a service worker to exist we need to first register it. And we do that by calling the register method on the service worker object available in the browser. But before that we need to check if we have support for service workers.
- If you’re wondering what’s the current support for service workers, its fully supported in Firefox, Chrome, Chrome for android and Samsung internet and it’s in development for edge https://jakearchibald.github.io/isserviceworkerready/
- If you’re wondering what’s the current support for service workers, its fully supported in Firefox, Chrome, Chrome for android and Samsung internet and it’s in development for edge https://jakearchibald.github.io/isserviceworkerready/
- https://developer.mozilla.org/en-US/docs/Web/Manifest https://developers.google.com/web/fundamentals/web-app-manifest/
- • Connectivity independent - Service workers allow work offline, or on low quality networks. • Fresh - Always up-to-date thanks to the service worker update process. • Discoverable - Are identifiable as “applications” thanks to W3C manifests[6] and service worker registration scope allowing search engines to find them. • Safe - Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with. • Installable - Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.
- And this is what makes our basic progressive web app.
- So let’s see what happens when we take that to Angular
- There are a few options here that can help us get started
- And in our app module we import our service worker and then register. And what you don’t see here is that we are only enabling the service worker for production. Can you guess why? Well, as you might’ve imagined, because the service worker caches things you really don’t want in you development process to not have the latest version of your app.
- The Angular CLI creates a service worker configuration file, called ngsw-config.json. The configuration file controls how the service worker caches files and data resources.
- https://whatwebcando.today/
- Add chrome, safari, edge, Mozilla, Samsung internet icons Geolocation - supported in all (http://caniuse.com/#feat=geolocation ) Cam. + microphone - supported n all (https://caniuse.com/#feat=stream ) Web Bluetooth - only in chrome & Samsung internet ( https://caniuse.com/#feat=web-bluetooth ) Vibration - only in firefox, chrome, Samsung internet (https://caniuse.com/#feat=vibration ) Device orientation and accelerometer - edge, firefox, iOS safari, Samsung (https://caniuse.com/#feat=deviceorientation ) partial support Battery status only in chrome (https://caniuse.com/#feat=battery-status)
- Nfc supported in Firefox Ambient in edge and Firefox Proximity - supported in firefox
- Push - all but safari https://caniuse.com/#feat=push Homescreen Clipboard https://caniuse.com/#search=clipboard Service workers - https://caniuse.com/#search=service%20worker
- Push - all but safari https://caniuse.com/#feat=push Homescreen Clipboard https://caniuse.com/#search=clipboard Service workers - https://caniuse.com/#search=service%20worker
- Push - all but safari https://caniuse.com/#feat=push Homescreen Clipboard https://caniuse.com/#search=clipboard Service workers - https://caniuse.com/#search=service%20worker
- Push - all but safari https://caniuse.com/#feat=push Homescreen Clipboard https://caniuse.com/#search=clipboard Service workers - https://caniuse.com/#search=service%20worker
- Note that these are the exact same native notifications that we receive for example on our mobile phones home screen or desktop, but they are triggered via a web application instead of a native app.
- https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/offline-for-pwa
- http://www.pwabuilder.com/
- https://github.com/pinterest/service-workers A mock service worker environment generator.
- https://github.com/tastejs/hacker-news-pwas
- https://github.com/angular/angular-cli
- • Reliable - Load instantly and never show the downasaur, even in uncertain network conditions. • Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling. • Engaging - Feel like a natural app on the device, with an immersive user experience.