Question

我正在为我的应用程序研究服务人员。这份服务人员食谱（https://serviceworke.rs）对我很有帮助。

我正在配置“缓存，更新和刷新”策略，但不知道如何将Webpack哈希名称添加到服务工作者文件。

为此，我知道有几种选择

工作箱（https://github.com/GoogleChrome/workbox）
sw-precache（https://github.com/GoogleChromeLabs/sw-precache）
sw-precache-webpack-plugin（https://github.com/goldhand/sw-precache-webpack-plugin#readme）

但是我只想制作没有插件或第3个工具的服务工作者文件，并将webpack chunkhash文件名放入我的服务工作者文件中。

my-sw.js

var CACHE = 'cache-update-and-refresh';

self.addEventListener('install', function(evt) {
  console.log('The service worker is being installed.');
  evt.waitUntil(caches.open(CACHE).then(function (cache) {
    cache.addAll([
      './controlled.html',
      './asset',

      // here is problem. how to put this?
      /**
       main.72b835f75acd535f504c.js,
       vendor.d6b44fd0b72071c85ce2.js,
       aboutUs.d31139a7f363d5254560.js,
       ...etc...
      **/
    ]);
  }));
});

self.addEventListener('fetch', function(evt) {
  console.log('The service worker is serving the asset.');
  evt.respondWith(fromCache(evt.request));
  evt.waitUntil(
    update(evt.request)
    .then(refresh)
  );
});

function fromCache(request) {
  return caches.open(CACHE).then(function (cache) {
    return cache.match(request);
  });
}

function update(request) {
  return caches.open(CACHE).then(function (cache) {
    return fetch(request).then(function (response) {
      return cache.put(request, response.clone()).then(function () {
        return response;
      });
    });
  });
}

// Sends a message to the clients.
function refresh(response) {
  return self.clients.matchAll().then(function (clients) {
    clients.forEach(function (client) {
      var message = {
        type: 'refresh',
        url: response.url,
        eTag: response.headers.get('ETag')
      };
      client.postMessage(JSON.stringify(message));
    });
  });
}

如何将Webpack哈希名称添加到服务工作者文件？

0 个答案: