Workbox / Vue: создание собственного варианта существующего обработчика стратегии кэширования - PullRequest
Новая
       43

Workbox / Vue: создание собственного варианта существующего обработчика стратегии кэширования

0 голосов
/ 09 марта 2020

Справочная информация:

Я создаю PWA (одностраничное приложение) SPA (Progressive Web App), используя Vue. js. У меня есть удаленная PostgreSQL база данных, обслуживающая таблицы по HTTP с помощью PostgREST. У меня есть рабочий Workbox Service Worker и IndexedDB, которые содержат локальную копию таблиц базы данных. Я также зарегистрировал несколько маршрутов в моем service-worker.js; пока все в порядке ....

Я позволяю кэшу Workbox GET-вызовы, которые возвращают таблицы из службы REST. Например: https://www.example.com/api/customers вернет объект json клиентов. 

workbox.routing.registerRoute('https://www.example.com/api/customers', workbox.strategies.staleWhileRevalidate())

На этом этапе мне нужно, чтобы Workbox выполнил шаблон stale-while-revalidate, но до:

  1. Не использовать кеш, а вместо этого вернуть локальную версию этой таблицы, которую я сохранил в IndexedDB. (часть кэша)
  2. Выполните вызов REST и обновите локальную версию, если она изменилась. (сетевая часть)

Я почти уверен, что в этой стратегии рабочего ящика нет настраиваемой опции для этого. Поэтому я написал бы код для этого, который должен быть довольно простым. Извлечение кеша просто для возврата содержимого запрошенной таблицы из IndexedDB. Для части обновления я думаю добавить номер версии данных для сравнения. И, таким образом, решите, нужно ли мне обновлять локальную базу данных.

В любом случае, сейчас мы приближаемся к актуальному вопросу:

Вопрос:

Действительно ли это хороший способ использования маршрутов / кэширования Workbox, или я сейчас неправильно использую технологию, потому что я использую IndexedDB в качестве кеша?

и

Как я могу сделать свою собственную версию стратегия StaleWhileRevalidate? Я был бы рад понять, как просто сделать копию существующей версии Workbox и иметь возможность импортировать ее и использовать в моем Vue. js Service Worker. Оттуда я могу внести свои собственные необходимые изменения кода.

Чтобы немного проще ответить на этот вопрос, это основные подвопросы:

  • Прежде всего, StaleWhileRevalidate.ts (см. ссылку ниже) является файлом .ts (TypeScript?). Могу (должен) я просто импортировать это как модуль? Я, вероятно, могу. но затем я получаю ошибки:
  • Когда я импортирую свой пользовательский файл CustomStaleWhileRevalidate.ts в свой main. js, я получаю ошибки во всех текущих операторах импорта, потому что (конечно) каталог workbox-core/_private/ не не существует.

Как к этому подойти?

Это текущая реализация на Github: https://github.com/GoogleChrome/workbox/blob/master/packages/workbox-strategies/src/StaleWhileRevalidate.ts

1 Ответ

0 голосов
/ 09 марта 2020

Я не думаю, что использование встроенной стратегии StaleWhileRevalidate является правильным подходом здесь. может быть в состоянии выполнить то, что вы описываете, используя StaleWhileRevalidate вместе с рядом пользовательских обратных вызовов плагинов , чтобы переопределить поведение по умолчанию ... но, честно говоря, вы бы закончили изменить так много с помощью плагинов, что начинать с нуля было бы разумнее.

Вместо этого я бы порекомендовал вам написать собственную handlerCallback функцию, которая реализует именно логику c Вы хотите, и возвращает Response. 

// Your full logic goes here.
async function myCustomHandler({event, request}) {
  event.waitUntil((() => {
    const idbStuff = ...;
    const networkResponse = await fetch(...);
    // Some IDB operation go here.
    return finalResponse;
  })());
}

workbox.routing.registerRoute(
  'https://www.example.com/api/customers',
  myCustomHandler
);

Вы могли бы сделать это и без Workbox, но если вы используете Workbox для решения некоторых ваших несвязанных потребностей в кэшировании, это, вероятно, проще всего чтобы также зарегистрировать этот лог c через маршрут Workbox.

...