如何从 PWA 中的 URL 缓存 json？

问题描述

我已经创建了我的第一个 PWA 页面，但是来自 URL 的数据有问题。在我的页面上，我从 URL 加载 json 并且这在“在线”时工作得很好，但我不知道如何缓存这些数据并在我的页面作为“离线”工作时加载它。我必须在哪里从 URL 添加这些数据？ 这是我加载数据的javascript：

fetch('https://www.json-generator.com/api/json/get/cfTRolENrC?indent=2')
.then(res => res.json())
.then(data => obj = data)
.then(() =>{
  var x = document.getElementById("ad");
console.log(obj);
x.innerHTML = obj[0].name;     
      });

这是我的 sw.js：

self.addEventListener("install",e =>{
    e.waitUntil(
        caches.open("static").then(cache => {
            return cache.addAll(["./","./src/master.css","./images/icon.png"]);
        })
    );
});
self.addEventListener("fetch",e =>{
    e.respondWith(
        caches.match(e.request).then(response => {
            return response || fetch(e.request);
        })
    );
});

解决方法

如果有人遇到同样的问题。您只需将 JSON URL 添加到您的静态链接（您在其中提供指向 css、img 等的链接）。它应该是这样的：

self.addEventListener("install",e =>{
    e.waitUntil(
        caches.open("static").then(cache => {
            return cache.addAll(["./","./src/master.css","./images/icon.png","https://www.json-generator.com/api/json/get/cfTRolENrC?indent=2"]);
        })
    );
});
self.addEventListener("fetch",e =>{
    e.respondWith(
        caches.match(e.request).then(response => {
            return response || fetch(e.request);
        })
    );
});