React PWA - Как вы определяете, следует ли запрашивать данные из кэша или с сервера? - PullRequest
Новая
       80

React PWA - Как вы определяете, следует ли запрашивать данные из кэша или с сервера?

0 голосов
/ 19 апреля 2020

Я создаю приложение PWA, в которое я загружаю данные с помощью вызова действия пользователя, «Go to offline». Таким образом, после нажатия кнопки данные выбираются и сохраняются в хранилище 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, если сеть присутствует, иначе получал данные из БД. Я знаю, как вытащить дату из местного IDB. Единственное, что я не могу понять:

  1. Как определить, что приложение не в сети, поэтому данные должны поступать из локальной базы данных
  2. Если приложение находится в сети, как мне переслать ответ от fetch to ax ios, который вызывается из функции API.

Я пишу это впервые, так что понятия не имею. Будем благодарны за любую помощь.

Спасибо.

...