Workbox 6 缓存一个 json 文件

Question

Workbox 6. 我正在尝试将 json 文件添加到服务工作者缓存存储但失败了。非常感谢收到任何建议。使用文档中的代码，我可以缓存所有其他文件类型。

我已尝试获取特定文件，但出现错误 NetworkFirst.js:115 未捕获（承诺）无响应：无响应 ::

[{"url":"https://jnchapman.tk/index.html"}]
    at Object._handle (https://storage.googleapis.com/workbox-cdn/releases/6.1.5/workbox-strategies.prod.js:1:5425)
    at async Object.Wt (https://storage.googleapis.com/workbox-cdn/releases/6.1.5/workbox-strategies.prod.js:1:3926)

要缓存的代码 .json 文件

  workbox.routing.registerRoute(
  ({url}) => url.origin === 'https://jnchapman.tk/results_202104_003.json',
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: 'json',
  })
);

整个sw.js文件

/* eslint-env es6 */
/* eslint-disable */
/* https://developers.google.com/web/tools/workbox/modules/workbox-sw */
importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.1.5/workbox-sw.js');


const { registerRoute } = workbox.routing;
const { CacheFirst } = workbox.strategies;
const { CacheableResponse } = workbox.cacheableResponse;
const { ExpirationPlugin } = workbox.expiration;
const { warmStrategyCache } = workbox.strategies;
//const { StaleWhileRevalidate } = workbox.strategies;

// This can be any strategy, CacheFirst used as an example.

/*
const strategy = new CacheFirst();
const urls = [
  '/offline.html'
];


warmStrategyCache({ urls, strategy });

offlineFallback();
*/

const HTML_CACHE = "html";
const JS_CACHE = "javascript";
const STYLE_CACHE = "stylesheets";
const IMAGE_CACHE = "images";
const FONT_CACHE = "fonts";

self.addEventListener("message", (event) => {
  if (event.data && event.data.type === "SKIP_WAITING") {
    self.skipWaiting();
  }
});

workbox.routing.registerRoute(
  ({ event }) => event.request.destination === 'document',
  new workbox.strategies.NetworkFirst({
    cacheName: HTML_CACHE,
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 10,
      }),
    ],
  })
);

workbox.routing.registerRoute(
  ({ event }) => event.request.destination === 'script',
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: JS_CACHE,
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 15,
      }),
    ],
  })
);

workbox.routing.registerRoute(
  ({ event }) => event.request.destination === 'style',
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: STYLE_CACHE,
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 15,
      }),
    ],
  })
);

workbox.routing.registerRoute(
  ({ event }) => event.request.destination === 'image',
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: IMAGE_CACHE,
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 15,
      }),
    ],
  })
);

workbox.routing.registerRoute(
  ({ event }) => event.request.destination === 'font',
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: FONT_CACHE,
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 15,
      }),
    ],
  })
);


// Cache the Google Fonts stylesheets with a stale-while-revalidate strategy.
workbox.routing.registerRoute(
  ({url}) => url.origin === 'https://jnchapman.tk/results_202104_003.json',
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: 'json',
  })
);

// Cache .json file
/*
workbox.routing.registerRoute(
  ({ url }) => url.origin === 'https://jnchapman.tk/results_202104_003.json',
  new workbox.strategies.NetworkFirst({
    cacheName: 'json',
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 15,
      }),
    ],
  })
);
*/


/*
workbox.routing.registerRoute(
  urlPattern: /\.(?:png|jpg|jpeg|svg)$/,
  /\.(?:json)$/,
  new workbox.strategies.NetworkFirst({
    cacheName: 'HTML_CACHE2',
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 1,
        maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
      }),
    ],
  })
);
*/

Answer 1

解决方案 A

我通过预缓存 .json 文件找到了解决问题的方法但是，我们将不胜感激没有预缓存的更好解决方案。

我使用工作箱向导生成了预缓存。

const { precacheAndRoute } = workbox.precaching;

precacheAndRoute([{url:"results_202104_003.json",revision:"091fb3fb63a405c4130126aff653eaec"}]);

我还添加了显示离线页面的代码

const strategy = new CacheFirst();
const urls = [
  '/offline.html'
];


warmStrategyCache({ urls, strategy });

offlineFallback();

总结

完整的解决方法在这里。这是针对几个 html 页面的简单网站，这些页面从不更改名称，因此使用 NetworkFirst 使用缓存。没有路由代码。所有其他内容都有唯一的文件名，这些文件名会在内容更新时更改，因此使用 StaleWhileRevalidate 进行缓存。 offline.html 页面也被有效地预缓存。

/* eslint-env es6 */
/* eslint-disable */
/* https://developers.google.com/web/tools/workbox/modules/workbox-sw */
importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.1.5/workbox-sw.js');


const { registerRoute } = workbox.routing;
const { CacheFirst } = workbox.strategies;
const { CacheableResponse } = workbox.cacheableResponse;
const { ExpirationPlugin } = workbox.expiration;
const { warmStrategyCache } = workbox.recipes;
const { offlineFallback } = workbox.recipes;
//const { cacheFirst} = workbox.cacheFirst;
//const { StaleWhileRevalidate } = workbox.strategies;

// This can be any strategy, CacheFirst used as an example.

const { precacheAndRoute } = workbox.precaching;

precacheAndRoute([{url:"results_202104_003.json",revision:"091fb3fb63a405c4130126aff653eaec"}]);


const strategy = new CacheFirst();
const urls = [
  '/offline.html'
];


warmStrategyCache({ urls, strategy });

offlineFallback();


const HTML_CACHE = "html";
const JS_CACHE = "javascript";
const STYLE_CACHE = "stylesheets";
const IMAGE_CACHE = "images";
const FONT_CACHE = "fonts";
const JSON_CACHE = "json";

self.addEventListener("message", (event) => {
  if (event.data && event.data.type === "SKIP_WAITING") {
    self.skipWaiting();
  }
});

workbox.routing.registerRoute(
  ({ event }) => event.request.destination === 'document',
  new workbox.strategies.NetworkFirst({
    cacheName: HTML_CACHE,
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 10,
      }),
    ],
  })
);

workbox.routing.registerRoute(
  ({ event }) => event.request.destination === 'script',
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: JS_CACHE,
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 15,
      }),
    ],
  })
);

workbox.routing.registerRoute(
  ({ event }) => event.request.destination === 'style',
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: STYLE_CACHE,
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 15,
      }),
    ],
  })
);

workbox.routing.registerRoute(
  ({ event }) => event.request.destination === 'image',
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: IMAGE_CACHE,
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 15,
      }),
    ],
  })
);

workbox.routing.registerRoute(
  ({ event }) => event.request.destination === 'font',
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: FONT_CACHE,
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 15,
      }),
    ],
  })
);

workbox.routing.registerRoute(
  ({ event }) => event.request.destination === 'json',
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: JSON_CACHE,
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 15,
      }),
    ],
  })
);

方案B

我发现 Ajax Service Workers 没有涵盖。

“XMLHttpRequest 已被弃用，它在 Service Worker 范围内不可用。您可以使用 Fetch API 而不是 XMLHttpRequest。”

切换到使用 Fetch 加载 .json 文件

现在以下工作。我网站上的任何 .json 文件都会被缓存。

/* eslint-env es6 */
/* eslint-disable */
/* https://developers.google.com/web/tools/workbox/modules/workbox-sw */
importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.1.5/workbox-sw.js');


const { registerRoute } = workbox.routing;
const { CacheFirst } = workbox.strategies;
const { CacheableResponse } = workbox.cacheableResponse;
const { ExpirationPlugin } = workbox.expiration;
const { warmStrategyCache } = workbox.recipes;
const { offlineFallback } = workbox.recipes;
const { precacheAndRoute } = workbox.precaching;


const strategy = new CacheFirst();
const urls = [
  '/offline.html'
];


warmStrategyCache({ urls, strategy });

offlineFallback();


const HTML_CACHE = "html";
const JS_CACHE = "javascript";
const STYLE_CACHE = "stylesheets";
const IMAGE_CACHE = "images";
const FONT_CACHE = "fonts";
const JSON_CACHE = "json";

self.addEventListener("message", (event) => {
  if (event.data && event.data.type === "SKIP_WAITING") {
    self.skipWaiting();
  }
});


workbox.routing.registerRoute(
  /.*\.json/,
  new workbox.strategies.NetworkFirst({
    cacheName: JSON_CACHE,
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 2,
      }),
    ],
  }),
);

workbox.routing.registerRoute(
  ({ event }) => event.request.destination === 'document',
  new workbox.strategies.NetworkFirst({
    cacheName: HTML_CACHE,
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 10,
      }),
    ],
  })
);

workbox.routing.registerRoute(
  ({ event }) => event.request.destination === 'script',
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: JS_CACHE,
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 15,
      }),
    ],
  })
);

workbox.routing.registerRoute(
  ({ event }) => event.request.destination === 'style',
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: STYLE_CACHE,
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 15,
      }),
    ],
  })
);

workbox.routing.registerRoute(
  ({ event }) => event.request.destination === 'image',
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: IMAGE_CACHE,
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 15,
      }),
    ],
  })
);

workbox.routing.registerRoute(
  ({ event }) => event.request.destination === 'font',
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: FONT_CACHE,
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 15,
      }),
    ],
  })
);

Workbox 6 缓存一个 json 文件

Workbox 6 cache a json file

json

workbox