文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >工作框6缓存json文件

问工作框6缓存json文件
EN

Stack Overflow用户
提问于 2021-04-18 08:57:07
回答 1查看 576关注 0票数 0

工作框6.我试图向服务工作者缓存存储中添加一个json文件，但失败了。收到的任何建议都很感激。使用文档中的代码，我可以缓存所有其他文件类型。

我试图获取特定的文件，但是得到了错误NetworkFirst.js:115未应答:无响应：

代码语言：javascript
复制
[{"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文件的代码

代码语言：javascript
复制
  workbox.routing.registerRoute(
  ({url}) => url.origin === 'https://jnchapman.tk/results_202104_003.json',
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: 'json',
  })
);

全sw.js文件

代码语言：javascript
复制
/* 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
      }),
    ],
  })
);
*/
json
workbox
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-04-18 20:13:39

解A

我已经找到了解决这个问题的方法，建议使用.json文件，但是，如果没有提示，最好是一个更好的解决方案。

我使用workbox向导生成了precache。

代码语言：javascript
复制
const { precacheAndRoute } = workbox.precaching;

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

我还添加了显示脱机页面的代码。

代码语言：javascript
复制
const strategy = new CacheFirst();
const urls = [
  '/offline.html'
];


warmStrategyCache({ urls, strategy });

offlineFallback();

摘要

完全的解决办法就在这里。这是一个简单的网站的几个html页面，从来没有改变名称，所以使用缓存使用NetworkFirst。没有路由代码。所有其他内容都有唯一的文件名，在更新内容时会发生更改，因此使用StaleWhileRevalidate缓存。对offline.html页面也进行了有效的指导。

代码语言：javascript
复制
/* 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没有被服务工作者涵盖。https://stackoverflow.com/a/38393563/267706

“XMLHttpRequest已被废弃，它在Service作用域中不可用。您可以使用获取API，而不是XMLHttpRequest。”

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

现在，下面的工作。我的webiste上的任何.json文件都会被缓存。

代码语言：javascript
复制
/* 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,
      }),
    ],
  })
);
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/67146780

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档