How to Use Service Workers in Progressive Web Apps

Service workers are scripts that run in the background in the user’s browser, enabling features like push notifications and background synchronization. There are many ways you can use them as a developer, and I’ve compiled all of those methods here, along with an explanation of the overall scope and resources you’ll need to develop any type of Progressive Web App (PWA). ). focusing only on service workers.

I’ve been working in web development and app development as a project manager and developer for several years, and service technicians, and the rest of what PWAs are, namely an app shell loaded by an app manifest, are one of the most promising concepts I’ve seen. Progressive web apps, when paired with service workers, provide better performance and an overall better user experience.

Service Technician Basics

Here is the basic rundown on service workers. But if you’ve never encountered Progressive Web Apps before, or need to read up on the subject, visit Google’s developer pages for an introduction.

The service worker interacts with the client’s browser page and HTTP Get/Post/Set requests. This means that you can intercept these requests and let them pass to their original endpoint or modify them according to your needs. An obvious use for this is to have a service technician check if the customer has internet access.

If not, the service worker script can redirect the requested URL to a cached version of that URL. And because Progressive Web Apps use an app shell, everything is cached for you.

This means that a service worker can tell the client to fetch the cached version of the page instead of failing to connect to the internet.

The example above is just a small part of what developers have done with service workers. It’s also one of the most popular uses, but it’s possible to do much more than just cache content. For example, you can run a virtual server on a service worker and a Node.js stack or run the script as a load balancer.

Service Worker Registration

Each service worker must be registered in the client’s browser. As with any other JavaScript, you load the service-worker.js script into your HTML code. Once running, it will open its own instance, so there will be no access to distributed object model elements.

Once registered and activated, there are no additional requirements for the service worker itself. But just saving it isn’t enough, because at this point it doesn’t do anything. So here are some of the features for which developers use service workers.

Basic Features

  • Caching
    Managing cached content is one of the most common uses of service workers. To get started, consult the Google Chrome or Mozilla documentation. Here is a complete cache, update, and refresh example.
  • Offline
    Enabling offline functionality is probably the most sought after feature for service technicians. Some examples just show how to load a simple static HTML page, while others create mini-games such as Sudoku in their offline pages.
  • Content Delivery Networks
    Managing CDNs and other external content can be tricky. Often developers refuse externally hosted content due to SSL and same-origin policies, but you can actually import scripts from CDNs.

Intermediate features

  • Push notifications
    Delivering push notifications is a great way to interact with customers and visitors. See the Web Push Book to learn more.
  • Performance improvement
    There are many showcases on Google’s developer sites that show real data from sites running PWAs with service technicians. Tweaking performance further with HTTP2 Push can be a great choice.
  • Loading cached content for new users
    You can even write code for new visitors to retrieve cached content and app cache, rather than traditional browser caching, where everything is downloaded through get requests.

Advanced features

  • load balancing
    While you might not automatically think of a service worker as a load balancer, there are already implementations of this in real applications, although a service worker isn’t the most obvious choice for the job. .
  • Background synchronization
    Background synchronization is another extremely powerful feature. For more, read Dean Hume’s guest post on the subject.
  • geo-fencing
    Since you can run tasks in the background, you can even play around with native app-like features, such as this example geo-fence.

Developing service workers

There are a few things you need to know before developing service workers. Here are some commonly used resources and tools you can use.

Debugging

For developers, many people have added more or less permanent console debuggers to help with troubleshooting, because serviceworker.js runs its own browser instance, separate from the page you’re on. Examples include:

Libraries and tools

  • sw toolbox
    This library, maintained by the Google Chrome team, provides a set of tools to manage content caching, third-party resources, and more. Read “Getting started with sw-toolbox” and “Improving user experience with sw-toolbox” for an in-depth look at using this library.
  • sw-precache
    Developed by the Google Chrome development team, this set of tools allows you to manage resource pre-caching and has an option for cache-first, which also serves new cache users, thereby improving performance and charging speeds.
  • sw-offline-google-analytics
    This not only makes it easy to implement Google Analytics in offline mode, but also shows how to temporarily manage the data. It works by temporarily storing the data and retrying connection attempts to push the data, if successful.

Resources

  • Manifest generator
    The web app manifest is a simple JSON file containing key data related to the progressive web app. Although not directly related to the service worker, this generator tool can be useful when combining the service worker with the application shell.
  • Specifying the web application manifest
    Service Technicians and Progressive Web Apps are subject to daily validations and changes, so it’s wise to refer to the official documentation as often as possible to keep up to date.
  • Pinterest Service Workers GitHub Repo
    It is a collection of utilities for creating, testing and experimenting with service agents.

Polyfills

  • Although this example cache polyfill is deprecated in the sense that the latest versions of Chrome and Opera use Cache.andAll, it can still be used as an example for implementing other polyfills.
  • Another great example comes from Maximiliano Firtman, who created a polyfill example to experiment with how much code you can already run on iOS, versus what Apple needs to implement.
  • Google’s Polymer App Toolbox provides a solid foundation for building comprehensive progressive web apps.

Security issues

By default, PWAs require a secure HTTPS connection to prevent man-in-the-middle attacks. This is somewhat ironic, since you could think of the Service Worker as a man-in-the-middle script itself.

This requirement also aligns very well with what Google envisions for the future of web pages, which is an SSL-secured web space.

Defining the scope is also important and should ideally only cover the files needed to serve everything vital and necessary to display the sites, instead of just including a full web framework such as Laravel or Ruby on Rails . Try looking at a span map on record if you’re dealing with a larger frame implementation.

Note that you can’t use a content delivery network for the service worker itself, and while you can import via importScripts(), most developers I’ve talked to prefer to keep things with the same origin , as opposed to a distant origin. There are of course fixes for CDNs and other clever rerouting techniques.

And after

For a few companies, this technology will make a huge difference in terms of results, due to increased performance and conversion rates. But for most websites and online businesses, it will be a slow process and service workers will be adopted over time.

As we continue to focus more on good UX and optimal performance, I expect to see PWAs and service workers seeping into the internet ecosystem, quietly improving the browsing experience of the internet. ‘user.

Of course, if at some point Apple asks the Safari browser team to implement this API integration, you’ll see an increase as people and companies that have resisted before begin to enter this arena.

You are now ready to start

The global addition of service workers and progressive web apps is a great implementation for HTML browsers, and this API gives you immense access to in-browser functions that don’t just focus on one domain.

It’s time to start. See my recommended links below for more reading and inspiration. I look forward to your comments and questions.

keep learning

Comments are closed.