11

我正在使用 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/',
      ]);
    })
  )
});

但我不觉得它是一个优雅的、长期的、好的解决方案。这是一种在缓存中拥有通配符的方法吗？像'/dist/*.bundle.js'什么？

4

2 回答 2

6

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

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

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

于 2017-02-19T08:11:29.743 回答
1

这是一个简单的 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 }));
});
于 2018-07-07T20:28:47.137 回答