Download to read offline
Uploaded bySimona Cotin
Pwa, are we there yet?!
The document provides an introduction to Progressive Web Apps (PWAs), highlighting their characteristics and benefits, such as connectivity independence and the ability to be installed on a device's home screen. It discusses key components like service workers and web manifests, which enhance user experience by enabling offline capabilities and faster access. Additionally, it compares PWAs with native applications, noting the hardware and software features supported by each.
More Related Content
Similar to Pwa, are we there yet?!
Pwa, are we there yet?!
- 2.
- 3.
- 4.
- 5.
- 6. @simona_cotin Intro to PWA Diveinto main concepts Angular <3 Pwa PWA vs Native Tools
- 7.
- 8. @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.”
- 9. @simona_cotin –Alex Russell “..they’re justwebsites that took all the right vitamins”
- 10.
- 11.
- 12.
- 13. @simona_cotin Baseline “Appyness” •Service workers •Webmanifest •Delivered over HTTPS
- 14. @simona_cotin –Netlify “Service workers areproxies that sit between the web page and the network, providing cached versions of the site when no network connectivity is available.” Service Workers 🏋🏋♀️
- 15. @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 🏋🏋♀️
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29. @simona_cotin –Mozilla “The web appmanifest 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. ”
- 30.
- 31.
- 32.
- 33. @simona_cotin Create service workers usingthe angular cli
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50. @simona_cotin Software ✓Push notification ✓Save tohome screen ✓Fullscreen ✓Offline ✓Clipboard 👎 👎 👎
- 51. @simona_cotin Not supported ✋ ๏Contacts,calendar ๏Alarms ๏Calls, sms
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61. @simona_cotin –https://developers.google.com/web/progressive-web-apps/ “A new wayto deliver amazing user experiences on the web”
- 62.
- 63.
Editor's Notes
- #10 https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/
- #12 So how do make this happen, in code?
- #15 So let’s dive into each of these and understand what they are. https://www.netlify.com/blog/2017/10/31/service-workers-explained/
- #17 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
- #18 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
- #19 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.
- #20 And a service worker has a scope and a lifecycle that we can tap into
- #22 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.
- #23 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.
- #30 https://developer.mozilla.org/en-US/docs/Web/Manifest https://developers.google.com/web/fundamentals/web-app-manifest/
- #32 • 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.
- #33 So let’s see what happens when we take that to Angular
- #57 http://www.pwabuilder.com/
- #59 https://github.com/pinterest/service-workers A mock service worker environment generator.
- #60 https://github.com/tastejs/hacker-news-pwas
- #61 https://github.com/angular/angular-cli