ServiceWorker / 缓存中的通配符 API

Question

我正在使用 ServiceWorker 并且在开发模式下工作得很好，我的问题是在生产模式下我的包名称是使用哈希生成的，例如1234das3123ad5.bundle.js，所以 service worker 没有缓存它。我的软件代码如下：

self.addEventListener('install', function(event) {
  // pre cache a load of stuff:
  event.waitUntil(
    caches.open('mycache').then(function(cache) {
      return cache.addAll([
        '/dist/bundle.js',
        '/dist/app.css',
        '/dist/index.html',
        'https://cdnjs.cloudflare.com/ajax/libs/antd/2.7.2/antd.css'
      ]);
    })
  )
});

在 Cache API 的文档中，我没有看到任何关于如何实现它的示例。

显然我可以缓存 dist 文件夹下的所有内容，例如：

self.addEventListener('install', function(event) {
  // pre cache a load of stuff:
  event.waitUntil(
    caches.open('mycache').then(function(cache) {
      return cache.addAll([
        '/dist/',
      ]);
    })
  )
});

但我认为它不是一个优雅的、长期好的解决方案。这是一种在缓存中使用通配符的方法吗？类似于 '/dist/*.bundle.js' ?

Answer 1

Web 没有文件夹的概念，特别是浏览器无法知道所有以前缀开头的有效 URL。

您站点的其余部分必须以某种方式处理 URL 修改资产的更改，那么为什么不在您的 service worker 中使用相同的解决方案呢？

这就是我为我的博客所做的 - Django 的静态文件管理器添加了正确的 URLs https://jakearchibald.com/sw.js

Answer 2

这里有一个简单的 Node 脚本，可以为您创建文件名数组，前提是您需要 web/public 目录中每个文件的列表。注意：您想从 public 目录中的终端运行执行此操作。

var fs = require('fs');
var path = require('path');
var util = require('util');
var walk = function(dir, done) {
    var results = [];
    fs.readdir(dir, function(err, list) {
        if (err) return done(err);
        var i = 0;
        (function next() {
            var file = list[i++];
            if (!file) return done(null, results);
            //file = dir + '/' + file;
            file = path.resolve(dir, file);
            fs.stat(file, function(err, stat) {
                if (stat && stat.isDirectory()) {
                    walk(file, function(err, res) {
                        results = results.concat(res);
                        next();
                    });
                }
                else {
                    file = file.replace('/home/ubuntu/workspace/public', '');
                    results.push(file);
                    next();
                }
            });
        })();
    });
};
var mydir = path.resolve(__dirname);
walk(mydir, function(err, results) {
    if (err) throw err;
    console.log(util.inspect(results, { maxArrayLength: null }));
});

Answer 3

我在使用 vue3 pwa 时遇到了一些问题。所以这不是一个真正的答案，而是一个有价值的回复。

使用 vue3，生成的 service worker 文件包括：

importScripts(
  "/precache-manifest.\<something-something\>.js"
);

和生成的 precache-manifest.js 文件列出了在执行“vue-cli-serve 构建”时构建的所有 js、css 和字体内容，例如类似于：

self.__precacheManifest = (self.__precacheManifest || []).concat([
  {
    "revision": "f715169493da60af08a445c4f7990905",
    "url": "/.htaccess"
  },
  {
    "revision": "87260e830ed912c46685c0a5432addf2",
    "url": "/.well-known/web-app-origin-association"
  },
<snip>

工作箱脚本然后获取此列表并缓存提到的文件。

ServiceWorker / 缓存中的通配符 API

Wildcards in ServiceWorker / Cache API

javascript

caching

service-worker

cacheapi