Я разрабатываю прогрессивное веб-приложение. Я хочу, чтобы кэшировать две версии страницыКак определить, является ли запрос URL-адреса ajax в API-интерфейсе сервис-работника
В случае использования в автономном режиме, мне нужно, чтобы обнаружить ли запрос для нормальной или Ajax, поэтому я могу вернуть правильные данные.
Я бы рекомендовал использовать разные URL-адреса для различных типов запросов, как это предлагается в комментариях.
Это означает, что существует способ определения того, передан ли заданный запрос обработчику fetch сервисного работника для полной навигации («нормальный» в вашей терминологии) или для ресурса, динамически загружаемого страницей («Ajax» в вашей терминологии).
self.addEventListener('fetch', event => {
if (event.request.mode === 'navigate') {
// This is a navigation request, so respond with a
// complete HTML document.
} else if (event.request.mode === 'same-origin') {
// This is a same-origin request for a resource, so
// respond appropriately depending on event.request.url, etc.
}
});
Есть несколько других possible values для event.request.mode, как 'cors', но вы бы увидеть их только тогда, когда вы делаете запросы кросс-происхождения ресурсов.
Это будет сложно сделать так. Но я не думаю, что вам это нужно. Как точно строится ваш сайт? Это архитектура оболочки приложения (статический макет и т. Д.), Который извлекает фактический контент через AJAX? Если да, то, я думаю, у вас уже есть схема URL-адресов для вызовов контента и вызовов оболочки, не так ли? – NOtherDev
У вас не было бы двух отдельных URL-адресов? Один для самой страницы и другой URL-адрес API, из которого извлекается контент? Пример: index.html делает запрос/api/people. В этом случае вы можете кэшировать index.html и его статические ресурсы, а затем сохранять ответ от API. Подробнее: https://medium.com/dev-channel/offline-storage-for-progressive-web-apps-70d52695513c#.hgd3yzp5s –