Использование sw-precache с клиентскими URL-маршрутами для одностраничного приложения

Как настроить sw-precache для обслуживания? index.html для нескольких динамических маршрутов?

Это для углового приложения, которое имеет index.html в качестве точки входа. Текущая настройка позволяет приложению быть доступным в автономном режиме только через /, Так что если пользователь перейдет на /articles/list/popular в качестве точки входа в автономном режиме они не смогут просматривать его и получат сообщение о том, что вы не в сети. (хотя в Интернете они будут обслуживаться одинаково index.html файл на все запросы в качестве точки входа)

Можно ли использовать dynamicUrlToDependencies для этого? Или это нужно сделать, написав отдельный скрипт SW? Что-то вроде следующего сделало бы?

function serveIndexCacheFirst() {
  var request = new Request(INDEX_URL);
  return toolbox.cacheFirst(request);
}

toolbox.router.get(
   '(/articles/list/.+)|(/profiles/.+)(other-patterns)', 
    serveIndexCacheFirst);
Источник

2 ответа

Решение

Ты можешь использовать sw-precache для этого без необходимости настраивать кэширование во время выполнения через sw-toolbox или катите свое собственное решение.

navigateFallback Параметр позволяет указать URL-адрес, который будет использоваться в качестве "запасного" при каждом переходе к URL-адресу, которого нет в кэше. Это работник службы, эквивалентный настройке URL-адреса с одной точкой входа на вашем HTTP-сервере, с подстановочным знаком, который направляет все запросы на этот URL-адрес. Это очевидно для одностраничных приложений.

Там также есть navigateFallbackWhitelist опция, которая позволяет ограничить navigateFallback Поведение для запросов навигации, которые соответствуют одному или нескольким шаблонам URL. Это полезно, если у вас есть небольшой набор известных маршрутов, и вы хотите, чтобы только те вызывали запасной вариант навигации.

Есть пример использования этих опций как части app-shell-demo это в том числе с sw-precache,

В вашей конкретной настройке вы можете захотеть:

{
  navigateFallback: '/index.html',
  // If you know that all valid client-side routes will begin with /articles
  navigateFallbackWhitelist: [/^\/articles/],
  // Additional options
}
Источник

Да, я думаю, что вы можете использовать dynamicUrlToDependenciesкак указано в документации directoryIndex вариант: https://github.com/GoogleChrome/sw-precache.

Источник
Другие вопросы по тегам