Почему мои работники службы не работают в автономном режиме - PullRequest
Новая
       2

Почему мои работники службы не работают в автономном режиме

0 голосов
/ 15 февраля 2020

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

cache.addAll не хотел работать с моим const FILES_TO_CACHE, но работал, когда я вставлял их напрямую. Таким образом, повторный код.

Вот мой файл рабочего сервиса: 

const FILES_TO_CACHE = [
  "/",
  "/index.html",
  "/style.css",
  "/db.js",
  "/index.js",
  "/manifest.webmanifest"
];

const CACHE_NAME = "static-cache-v2";
const DATA_CACHE_NAME = "data-cache-v1";

// install
self.addEventListener("install", function(evt) {
  evt.waitUntil(
    caches.open(CACHE_NAME).then(cache => {
      console.log("Your files were pre-cached successfully!");
      return cache.addAll([
        "/",
        "/index.html",
        "/style.css",
        "/db.js",
        "/index.js",
        "/manifest.webmanifest"
      ]);
    })
  );

  self.skipWaiting();
});

// activate
self.addEventListener("activate", function(evt) {
  console.log("activated");
  evt.waitUntil(
    caches.keys().then(keyList => {
      return Promise.all(
        keyList.map(key => {
          if (key !== CACHE_NAME && key !== DATA_CACHE_NAME) {
            console.log("Removing old cache data", key);
            return caches.delete(key);
          }
        })
      ).catch(err => console.log(err));
    })
  );

  self.clients.claim();
});

// fetch
self.addEventListener("fetch", function(evt) {
  console.log("fetched", evt.request.url);

  if (evt.request.url.includes("/api/")) {
    evt.respondWith(
      caches
        .open(FILES_TO_CACHE)
        .then(cache => {
          return fetch(evt.request)
            .then(response => {
              // If the response was good, clone it and store it in the cache.
              if (response.status === 200) {
                cache.put(evt.request.url, response.clone());
              }

              return response;
            })
            .catch(err => {
              // Network request failed, try to get it from the cache.
              return cache.match(evt.request);
            });
        })
        .catch(err => console.log(err))
    );

    return;
  }
});

ссылка в html: 

<script>
      if ("serviceWorker" in navigator) {
        navigator.serviceWorker.register("/service-worker.js").then(function() {
          console.log("Service Worker Registered");
        });
      }
    </script>

У меня также есть манифест, связанный в файле HTML.

Заранее благодарим за любую помощь, которую вы можете оказать!

1 Ответ

1 голос
/ 16 февраля 2020

Если вы посмотрите на последнюю строку кода здесь: 

// fetch
self.addEventListener("fetch", function(evt) {
  console.log("fetched", evt.request.url);

  if (evt.request.url.includes("/api/")) {

, то увидите, что есть очень простая ошибка - ваш работник службы * ТОЛЬКО отвечает на запросы, начинающиеся с " / API /». Если они этого не делают, SW не касается их. Таким образом, только вызовы "/ api /" работают в автономном режиме (что не имеет никакого смысла :-), apis в основном динамические c, верно?).

(Возможно, есть еще одна ошибка в код, конечно, но это хороший момент, чтобы начать вносить изменения.)

...