保存在缓存 api 响应 WORKBOX 中

问题描述

我想在缓存中保存一些来自 API 的数据，以防我失去显示数据的连接

我有一个工作部件列表，所以如果我脱机，我想继续查看这些部件，因为当我再次进入组件时，它会调用 API 并再次调用它们，因为没有连接，这里将其保留为白色是将它们从缓存中取出

import {precacheAndRoute} from 'workBox-precaching';
import {clientsClaim,skipwaiting} from 'workBox-core';
import {registerRoute} from 'workBox-routing';
import {CacheFirst,NetworkFirst,NetworkOnly,StaleWhileRevalidate} from 'workBox-strategies';
import {CacheableResponsePlugin} from "workBox-cacheable-response";
import {BackgroundSyncPlugin} from 'workBox-background-sync';
import {Queue} from 'workBox-background-sync';


declare const self: ServiceWorkerGlobalScope;

skipwaiting();
clientsClaim();

const queue = new Queue('cola');

const bgSyncPlugin = new BackgroundSyncPlugin('api-cola',{
    onSync: async ({queue}) => {
    let entry;
    while ((entry = await queue.shiftRequest())) {
      try {
        let clone = entry.request.clone();
        await fetch(clone);
        console.error("Replay successful for request",entry.request);
      } catch (error) {
        console.error("Replay Failed for request",entry.request,error);

        // Put the entry back in the queue and re-throw the error:
        await queue.unshiftRequest(entry);
        throw error;
      }
    }
    console.log("Replay complete!");
  }
});

registerRoute(
  /\/api\/.*\/*.PHP/,new NetworkOnly({
    plugins: [bgSyncPlugin]
  }),'POST'
);

registerRoute(
  ({url}) => url.origin === 'https://xxx.xxx.com' &&
              url.pathname.startsWith('/api/'),new CacheFirst({
    cacheName: 'api-cache',plugins: [
      new CacheableResponsePlugin({
        statuses: [0,200,404],})
    ]
  })
);

registerRoute(
  /assets\/images\/icons\/icon-.+\.png$/,new CacheFirst({
    cacheName: 'icons'
  })
);
precacheAndRoute(self.__WB_MANIFEST);

当您在返回连接时离线时，同步已完成，并且工作正常。

解决方法

我注意到您正在使用运行时缓存，这意味着应用程序或用户必须在离线之前的某个时间调用 api，以便缓存中的资源可用。如果您事先知道网址，也许 warm strategy cache 对您有用。

我还注意到您正在缓存响应，即使它们返回 404 代码，因此它们也不会正确显示。