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.
14. @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 🏋🏋♀️
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 🏋🏋♀️
29. @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.
”
So let’s dive into each of these and understand what they are.
https://www.netlify.com/blog/2017/10/31/service-workers-explained/
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.
• 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.
So let’s see what happens when we take that to Angular
http://www.pwabuilder.com/
https://github.com/pinterest/service-workers
A mock service worker environment generator.