如何缓存签名文件（服务工作者）

Question

Several front-end applications implement a signature template in the files to control the cache, and each change in the file that signature changes. How do I get the Service Worker to handle these signatures and cache?

Signature Examples:

• sw-d58e3582afa99040e27b92b13c8f2280.js
• sw.js?_gc=20180101

I'm working on an application that is already ready, trying to implement service worker for certain features to become available offline.

Example, in this section I need to say what I will cache, however, the application changes the signatures of the file to control the cache. (today it's like this)

 caches.open('my-cache').then(function(cache) { return cache.addAll([ '/index.html', '/styles.css', '/main.js' ]);}) 

The application is always changing "styles.css" to "styles.css? V = 1527624807103_1" (timestamp) As far as I understand, "styles.css" is not the same as "styles.css? V = 1527624807103_1".

Answer 1

You should not version or add a signture parameter to the URL used for your actual, top-level service worker file. As explained in " The Service Worker Lifecycle ":

It can land you with a problem like this:

1. index.html registers sw-v1.js as a service worker.
2. sw-v1.js caches and serves index.html so it works offline-first.
3. You update index.html so it registers your new and shiny sw-v2.js.

If you do the above, the user never gets sw-v2.js , because sw-v1.js is serving the old version of index.html from its cache. You've put yourself in a position where you need to update your service worker in order to update your service worker.

As for the actual URLs that are included inside of your service worker file, which may legitimately contain versioning/hashes/signatures, your best bet is to use a tool that integrates with your build process and will generate the list of URLs based on the latest versions of each file that should be precached.

Workbox is one such tool, and there are others, like sw-precache (a precursor to Workbox), and offline-plugin .