sw-tools, a library to rule the Service Workers

Today I would like to write about a JavaScript library that we recently published in NPM. It is designed to include a Service Worker with very interesting functionality on a website.

But why?

When Workbox by Google was published, we thought it was a great idea to control a Service Worker without knowing almost anything about them. Reading about what Service Workers can do, we saw that Workbox includes only basic functionality. That is why we decided to create our own library to control Service Workers.

What can it do?

• Automatically manages the cache depending on the type of resource requested.
• Prefetching of the pages that the user will visit.
• Lazy loading of YouTube images and videos (original idea by Arthur Corenzan on dev.to).
• Full page offline usage.

How does it work

The installation and configuration of the library is done in four simple steps.

1. Download and install from NPM.
   

   npm install @veiss-com/sw-tools --save-dev
   

2. Copy the Service Worker (sw.min.js) to the root directory of the project.

3. Include the library in the web JavaScript.

4. Initialize and configure the Service Worker.
   

   var swTools = new swTools('/sw.min.js');
   

Visit NPM to see the configuration options.

We know it is not perfect and can be improved. Therefore, we would like to know your opinion. Any thoughts, corrections, etc. it's welcome.

veiss-com / sw-tools

An utility library to easily configure a Service Worker

Service Worker tools

Dependency free Service Worker helper library to simplify the usage of some of its most common features. Includes tools such as: cache management, prefetching, offline responses, deferring, ...

Developed and maintained by Veiss Comunicación.

Index

• Installation
• Features
  • Cache management
    • Cache types
    • Excluding elements
    • Limiting the cache size
  • Content loading policies
    • HTML
    • Static content
  • Prefetch
    • Slow connections
  • The save-data header
  • Offline
  • Content deferring
    • Image defer
    • Lazy loading YouTube videos
  • Google Analytics events
• Configuration example
• License

Installation

1. Install the library via NPM.

   npm install @veiss-com/sw-tools --save-dev

2. Copy sw.min.js from lib folder to the web root.

3. Include swTools.min.js from lib folder in your website.

4. Add the library configuration to your JavaScript.

   var swTools = new swTools('/sw.min.js');

Features

Cache management

Cache types

The library divides cache elements in 3 different caches:

• static: css, js, json, video, ...
• content: HTML pages.
• image

Excluding elements

Form pages and…

View on GitHub