Постобработка содержимого страницы с помощью staleWhileRevalidate

У меня есть работник службы, использующий workbox 2.0.0, и для некоторых страниц я использую стратегию кэширования workboxSW.strategies.staleWhileRevalidate ():

const customFilter = {

cachedResponseWillBeUsed: function (input) {
    try {
        console.log('cacheResponseWillBeUsed for : ' + input.request.url);
        // modify the response body here
    } catch (e) {
        console.error(e);
    }

    return input.cachedResponse;
},

requestWillFetch: function (input) {
    try {
        console.log('requestWillFetch for ' + input.request.url);
    } catch (e) {
        console.error(e);
    }

    return input.request;
},

fetchDidFail: function (input) {
    console.log('A fetch request for ' + input.request.url + ' failed.');
}
}

const cachingStrategy = workboxSW.strategies.staleWhileRevalidate({
    plugins: [
        customFilter
    ]
});

workboxSW.router.registerRoute(
    new RegExp('\/(.*)/suffix/?$'),
    cachingStrategy
);

Все идет хорошо, и я могу оперативно обновлять ответы, полученные из кеша. Но я хотел бы изменить на лету ВСЕ ответы, в том числе когда они получены из сети в первый раз (мне нужно вставить в них какой-то javascript).

Из моего тестирования cachedResponseWillBeUsed позволяет только постобработку ответа из кеша (в соответствии с именем метода), но я еще не нашел способа получить доступ к сетевым ответам (в противном случае я все еще использую стратегию staleWhileRevalidate).

Любой совет?

Большое спасибо


workbox
person Weeblr    schedule 03.09.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы правы в том, что нет RequestWrapper события жизненного цикла, соответствующего успешно возвращаемому сетевому запросу. (Если вы хотите, чтобы он был добавлен как fetchDidSucceed или что-то подобное, не стесняйтесь открыть функцию просьба!)

Вы можете обойти это, написав свой собственный обработчик, который вызывал strategies.staleWhileRevalidate, а затем делал что-то с ответом перед его возвратом, например:

const staleWhileRevalidate = workboxSW.strategies.staleWhileRevalidate({
  plugins: [...],
});

const cachingStrategy = async (params) => {
  const response = await staleWhileRevalidate(params);
  // Do something to response, like get its body, modify it,
  // and create a new response with the updated body.
  const modifiedResponse = modify(response);
  return modifiedResponse;
};

workboxSW.router.registerRoute(
    new RegExp('\/(.*)/suffix/?$'),
    cachingStrategy
);
person Jeff Posnick    schedule 07.09.2017
comment
Именно этим я и закончил (хотя на то, чтобы понять это, потребовалось немного времени). - person Weeblr; 07.09.2017
comment
Извините, слишком быстро нажмите "Ввод". Использование cachedResponseWillBeUsed для изменения ответа оказалось не очень хорошей идеей. Если вы это сделаете, вы больше не сможете использовать параметры cacheExpiration WorkBox, поскольку вы можете зарегистрировать только один метод cachedResponseWillBeUsed. Так что специальный метод фильтрации ответа был бы действительно хорошей идеей. - person Weeblr; 07.09.2017