Workbox 6缓存json文件

工作箱6。我正在尝试将json文件添加到service worker缓存存储中，但失败。感谢您的建议。 使用文档中的代码，我可以缓存所有其他文件类型

我已尝试提取特定文件，但出现错误 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
      }),
    ],
  })
);
*/

---

解决方案A

我通过预编译.json文件找到了解决这个问题的方法 但是，如果能找到一个更好的解决方案，而不进行预处理，我们将不胜感激

我使用workbox向导生成了预缓存

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不在服务人员的范围之内。

XMLHttpRequest已被弃用，它在服务工作者作用域中不可用。您可以使用Fetch API代替XMLHttpRequest

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

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

现在，下面的工作。 我的webiste上的任何.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,
      }),
    ],
  })
);