“Service Workers & their role in PWAs” — Ipsha Bhidonia
Recapping an excellent PHP UK Conference talk on the inner workings of Progressive Web Apps
At the PHP UK Conference in London, I saw a bunch of really good talks in addition to delivering one of my own. This was one of my favourites though, partly because the talk was good but also because the topic, Progressive Web Apps (PWAs), is so relevant to the work that we do on the web today. Ipsha Bhidonia really put this across well in the opening of her talk, telling us that it’s a great time to be developing PWAs.
Progressive Web Apps
“Progressive Web Apps are experiences that combine the best of the web and the best of apps,” Ipsha shared, setting the tone for the topic. We know that users love the web, being able to access content simply by clicking on a link with no downloading or waiting. However, the features of native apps — including notifications, homescreen icons, etc. — lead to a more engaging experience for users. Progressive Web Apps let us work with the best of both worlds and deliver an experience for our users that is more “use and install” than “install and use.”
Ipsha shared a great list of features or characteristics that constitute a PWA:
- Progressive — adapts to changing network conditions, enhancing functionality as the connection improves
- App-like — feels like an app as you move between screens
- Homescreen — can add a shortcut to the homescreen and easily find it again, like an app
- Linkable — can share a link to a page, like a website
- Discoverable — because it’s really just a website, it can be discovered via a browser rather than an app store
- Re-engageable — if the user grants permission, push notifications can be sent
- Responsive — fits your phone, laptop, or any device in between
- Connectivity-independent — still works even on flaky or non-existent connections
- Safe — modern features such as Service Workers require HTTPS
The talk then went on to look at a couple of technical features that really help to deliver these features.
Service Workers
Ipsha explained that the Service Worker sits as a proxy between the browser and the app itself. (Check out her slide deck for some great diagrams!) Service Workers are written in JavaScript and provide ways to respond to a bunch of events (“hooks”) that can happen in the browser.
The Service Worker goes through three distinct stages. First, we register the worker. Then comes the install event, which involves caching specified content or data to be used by the Service Worker once it is in use. Once the installation is complete, the worker can become active.
Service Workers are great for improving the offline experience. FlipKart, Ipsha pointed out, is a great example of an application that has (limited) functionality available even when the user is offline. In this situation the request comes in and hits the Service Worker. If there’s a connection, the Service Worker can contact the server to get the content required; if not, it uses its cache to serve up appropriate alternatives. These might be placeholders or cached content that could be out of date, but are likely to be better than nothing! For example, when Chrome is offline and you request some content, Chrome serves you up the downasaur instead.
Pro tip: Next time you see that familiar screen in Chrome, take a minute to play the secret game hidden there. Press the spacebar to start the game and jump over cacti, or the down arrow to duck under pterodactyls.
Push Notifications
Using Service Workers and the HTTP/2 Push Service, Ipsha outlined how we can send notifications to users of the PWAs we create. This is opt-in for the user; not all users will want this, but they control their own settings and can choose to grant permission. The Service Worker sets up a relationship with a Push Service. Then, when we want to notify the user, the Push Service sends an event to the Service Worker.
When the event arrives, the Service Worker code reacts, using the local Notification API to show the message to the user. Although it’s the major browser and handset manufacturers that provide the Push Service platforms, all browsers can use all services (more information in this How Push Works article from Google).
Excellent Resources
I’ve been excited about PWAs for a while, particularly the connectivity-independent aspect of it, which I’ve explored with the Offline First community at Offline Camp. Therefore, some of the resources Ipsha shared at the end of the talk were already familiar to me. All of them are excellent and worth checking out:
- PWA.rocks — a showcase of existing PWAs
- PWA Stats — a community-driven list of stats and news related to Progressive Web Apps
- Lighthouse — an open-source tool supported by Google which helps you improve the quality of webpages by auditing for performance, accessibility, progressive web apps, and more
- Is Service Worker Ready? — a site from Jake Archibald which tracks the implementation status of Service Worker across major browsers
- The Service Worker Cookbook — a collection of practical examples of Service Worker usage on modern web sites, compiled by Mozilla
I loved the list and shared the links in a tweet on the day, and other folks in the session shared additional resources:
With that, I’ll wrap up by agreeing with Ipsha — this is a great time to be working on PWAs and improving the mobile experience for everyone!
