Как я могу настроить Polymer's platinum-sw-*, чтобы НЕ кэшировать один URL-путь?

Question

Как я могу настроить Polymer для платины-sw-cache или platinum-sw-fetch для кэширования всех URL-путей, кроме /_api, который является URL-адресом для API Hoodie? Я настроил элемент platinum-sw-fetch для обработки пути /_api, а затем platinum-sw-cache для обработки остальных путей следующим образом:

<platinum-sw-register auto-register
                      clients-claim
                      skip-waiting
                      on-service-worker-installed="displayInstalledToast">
  <platinum-sw-import-script href="custom-fetch-handler.js"></platinum-sw-import-script>
  <platinum-sw-fetch handler="HoodieAPIFetchHandler"
                 path="/_api(.*)"></platinum-sw-fetch>
  <platinum-sw-cache default-cache-strategy="networkFirst"
                     precache-file="precache.json"/>
  </platinum-sw-cache>
</platinum-sw-register>

custom-fetch-handler.js содержит следующее. Его цель - просто вернуть результаты запроса так, как это сделал бы браузер, если бы работник службы не обрабатывал запрос.

var HoodieAPIFetchHandler = function(request, values, options){
  return fetch(request);
}

Кажется, что не работает правильно, что после того, как пользователь 1 вошел в систему, затем вышел из системы, затем пользователь 2 вошел в систему, а затем на вкладке "Сеть" в Chrome Dev Tools я вижу, что Hoodie регулярно продолжает делать запросы ОБА пользователям. Конечные точки API, такие как:

http://localhost:3000/_api/?hoodieId=uw9rl3p
http://localhost:3000/_api/?hoodieId=noaothq

Вместо этого он должен отправлять запросы только ОДНОЙ из этих конечных точек API. На вкладке "Сеть" каждый из этих URL-адресов появляется два раза подряд, а в столбце "Размер" первый запрос говорит "(из ServiceWorker)", а второй запрос указывает размер ответа в байтах, если это актуально.

Другая проблема, которая кажется связанной, заключается в том, что когда я вхожу в систему как пользователь 2 и отправляю форму, приложение записывает данные в базу данных пользователя 1 на стороне сервера. Это заставляет меня думать, что проблема в том, что приложение не может обойти кеш для маршрута / _api.

Разве я не должен был использовать платину-sw-cache и платину-sw-fetch в одном элементе platinum-sw-register, поскольку в документации указано, что они являются альтернативами друг другу?

Answer 1

В общем, то, что вы делаете, должно работать, и это законный подход.

Если есть HTTP-запрос, который соответствует пути, определенному в <platinum-sw-fetch>затем будет использован этот пользовательский обработчик и обработчик по умолчанию (в данном случае networkFirst реализация) не будет работать. На HTTP-запрос можно ответить только один раз, поэтому нет никакой вероятности, что несколько обработчиков вступят в силу.

Я проверил несколько местных образцов и подтвердил, что мой <platinum-sw-fetch> Обработчик правильно перехватывал запросы. При локальной отладке полезно добавить console.log() в вашем пользовательском обработчике и проверьте эти журналы через chrome://serviceworker-internals Проверьте интерфейс или используйте тот же интерфейс для установки некоторых точек останова в вашем обработчике.

Ожидается то, что вы видите на вкладке "Сеть" на контролируемой странице - сетевые взаимодействия сервисного работника регистрируются там, независимо от того, происходят ли они из вашего пользовательского интерфейса. HoodieAPIFetchHandler или по умолчанию networkFirst обработчик. Сетевые взаимодействия с точки зрения контролируемой страницы также записываются в журнал - они не всегда соотносятся один с одним с активностью работника сервиса, поэтому регистрация обоих случаев иногда оказывается полезной.

Поэтому я бы порекомендовал подробнее изучить причину, по которой ваше приложение делает несколько запросов. Всегда сложно думать о кэшировании персонализированных ресурсов, и есть несколько способов, с помощью которых вы можете столкнуться с проблемами, если в конечном итоге вы кэшируете ресурсы, персонализированные для другого пользователя. Посмотрите на строку кода, которая запускает второй /_api/ запросите и посмотрите, поступает ли он из кэшированного ресурса, который необходимо очистить, когда ваши пользователи выходят из системы. <platinum-sw> использует sw-toolbox библиотека под капотом, и вы можете использовать его uncache() метод непосредственно в ваших пользовательских скриптах обработчика для выполнения обслуживания кеша.