Как добавить имя хеша веб-пакета в рабочий файл сервиса? - PullRequest
0 голосов
/ 06 ноября 2018

Я изучаю работника службы для моего приложения. Эта поваренная книга работника службы (https://serviceworke.rs) очень полезна для меня.

Я настраиваю стратегию «Кэширование, обновление и обновление», но не могу знать, как добавить имя хеша веб-пакета в рабочий файл сервиса.

Для этого есть несколько вариантов, я знаю,

  1. Рабочая коробка (https://github.com/GoogleChrome/workbox)
  2. sw-precache (https://github.com/GoogleChromeLabs/sw-precache)
  3. sw-precache-webpack-plugin (https://github.com/goldhand/sw-precache-webpack-plugin#readme)

но я просто хочу сделать файл сервисного работника без плагина или 3-х инструментов и добавить имя файла chunkhash webpack в мой файл сервисного работника.

мой-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));
    });
  });
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...