时间戳

首页 > 解决方案 > React PWA - 你如何检测请求的数据是从缓存还是从服务器提供

reactjs - React PWA - 你如何检测请求的数据是从缓存还是从服务器提供

问题描述

我正在构建一个 PWA 应用程序，通过用户操作调用“转到离线”下载数据。因此，一旦单击按钮，就会获取数据并将其保存到浏览器 indexdb 存储中。我正在使用工作箱和 CRA2。我按照这篇博客文章使用 cra 应用程序自定义工作箱配置。

现在说没有 PWA，当页面请求数据时，响应调用动作，例如：

export async function fetchProjectStatuses(
  dispatch,
  params = {},
  raiseError = false
) {
  try {
    dispatch(requestProjectStatuses());

    const data = await fetchProjectStatusesApi();

    dispatch(receiveProjectStatuses(data));
    return data;
  } catch (err) {
    if (raiseError) {
      throw err;
    } else {
      dispatch(requestProjectStatusesFailed(err));
    }
  }
}

并fetchProjectStatusesApi定义为：

import axios from "axios";

const fetchAllUrl = () => `/project_statuses.json`;

export async function fetchProjectStatusesApi(config, params = {}) {
  const url = fetchAllUrl();

  const { data } = await axios.get(url, {
    headers: { Accept: "application/json" }
  });

  return data;
}

这行得通。现在离线时，我正在尝试编写如下内容：

import { registerRoute } from "workbox-routing";

registerRoute(
  new RegExp("/project_statuses\\.json"),
  async ({ url, event, params }) => {
    try {
      const response = await fetch(event.request);
      const responseBody = await response.text();
      return new Response(responseBody);
    } catch (err) {
      // get from DB
    }
  }
);

那么我该如何编写处理程序，以便它将数据转发到 fetchProjectStatusesApi（如果存在网络），否则从 DB 获取数据。我知道如何从本地 IDB 中提取日期。唯一我无法弄清楚的事情：

  1. 如何检测应用程序处于脱机状态，因此数据必须来自本地数据库
  2. 如果应用程序在线，我如何将 fetch 的响应转发到从 api 函数调用的 axios。

我是第一次写，所以还不知道。任何帮助将不胜感激。

谢谢你。

标签： reactjscreate-react-appprogressive-web-appsworkbox

解决方案

推荐阅读