时间戳

首页 > 解决方案 > Workbox 6 缓存一个 json 文件

json - Workbox 6 缓存一个 json 文件

问题描述

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

我试图获取特定文件，但收到错误 NetworkFirst.js:115 Uncaught (in promise) no-response: no-response ::

[{"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
      }),
    ],
  })
);
*/

标签： jsonworkbox

解决方案

解决方案 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 Worker 覆盖。 https://stackoverflow.com/a/38393563/267706

“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,
      }),
    ],
  })
);

推荐阅读