Есть ли способ узнать, получаете ли вы кэшированные данные от сервисного работника? - PullRequest
Новая
       20

Есть ли способ узнать, получаете ли вы кэшированные данные от сервисного работника?

0 голосов
/ 14 мая 2019

Я работаю над приложением типа авторинга / CMS.Приложение позволяет одновременно редактировать различные «блоки» данных.Он поддерживает в автономном режиме, используя appache и indexDB.При таком подходе я знаю, поступают ли мои данные из сети или из кэша.Теперь я хотел бы перенести вещи, чтобы использовать сервисных работников и новый API кеша.

Мне нужен способ узнать, были ли мои данные (запрос) поданы из кеша или сети, чтобы я мог информировать пользователейони, возможно, просматривают устаревшие данные, поэтому любые изменения могут переопределять данные, о которых они не знают.IMO, это было бы довольно распространенным делом, но оказалось, что это не так просто ...

В настоящее время я пытаюсь заставить все работать, используя WorkBox, но я был бы более чем счастлив с нативнымрешение.Используя Workbox, я попытался установить новый заголовок ответа, но Chrome жалуется на 

const apiStrategy = workbox.strategies.cacheFirst({
    cacheName: 'data-cache',
    cacheExpiration: {
        maxEntries: 100,
        maxAgeSeconds: 3600 * 24
    },
    cacheableResponse: { statuses: [200] }
});

workbox.routing.registerRoute(
    new RegExp('/api/'),
    async ({event, url}) => {
        const cachedResponse = await apiStrategy.handle({event, url});
        if (cachedResponse) {
            const responseClone = cachedResponse.clone();
            responseClone.headers.set('x-sw-cache', 'yes');
            return responseClone;
        }
        return cachedResponse;
    }
);

Так есть ли способ узнать, пришел ли ответ из сети или из кэша?

Ответы [ 2 ]

0 голосов
/ 19 мая 2019

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

workbox.routing.registerRoute(
    new RegExp('/api/'),
    new workbox.strategies.NetworkFirst({
        cacheName: 'data-cache',
        cacheExpiration: {
            maxEntries: 100,
            maxAgeSeconds: 3600 * 24
        },
        cacheableResponse: { statuses: [ 200 ] },
        plugins: [
            {
                cacheWillUpdate: ({ response }) => {
                    return newResponse(response.clone(), (headers) => {
                        headers.set("x-sw-cache", 'yes');
                        return headers;
                    });
                }
            }
        ]
    })
);


const newResponse = (res, headerFn) => {
    const cloneHeaders = () => {
        const headers = new Headers();
        for (const kv of res.headers.entries()) {
            headers.append(kv[0], kv[1]);
        }
        return headers;
    };

    const headers = headerFn ? headerFn(cloneHeaders()) : res.headers;

    return new Promise(function (resolve) {
        return res.blob().then(function (blob) {
            resolve(new Response(blob, {
                status: res.status,
                statusText: res.statusText,
                headers: headers
            }));
        });
    });
};

Функция newReponse взята из Как изменить заголовки ответа? спасибо @mjs!

Теперь я могупроверьте заголовок x-sw-cache, чтобы сообщить моим пользователям, что они могут просматривать данные о состоянии.:)

0 голосов
/ 18 мая 2019

если вы посмотрите в инструментах разработчика браузера (например, chrome), переключитесь на вкладку сети, которая будет отображаться как (из ServiceWorker).Также, если вы включите отладку, выводит все, что вам нужно знать в консоли.

...