Question

我正在使用ServiceWorker并且在开发模式下工作得很好，我的问题是在生产模式下我的包名是使用哈希生成的，例如1234das3123ad5.bundle.js，因此服务工作者不会缓存它。我的sw代码如下：

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/',
      ]);
    })
  )
});

但我发现它不是一个优雅，长期良好的解决方案。这是在Cache中使用通配符的方法吗？像'/dist/*.bundle.js'？

这样的东西

Answer 1

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

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

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

Answer 2

这是一个简单的Node脚本，它将为您创建文件名数组，前提是您需要Web /公共目录中每个文件的列表。注意：您想从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 }));
});

ServiceWorker / Cache API中的通配符

2 个答案: