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

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

Это для приложения Angular, которое имеет 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);

angularjs service-worker web-technologies sw-precache
person mkhatib    schedule 24.02.2016    source источник

Ответы (2)


arrow_upward
13
arrow_downward

Вы можете использовать для этого 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
}
person Jeff Posnick    schedule 24.02.2016
comment
Джефф, я получаю ошибки, используя резервную навигацию. Я использую аутентификацию firebase для входа в систему с помощью провайдера facebook. Поэтому, когда я нажимаю «Войти в систему» ​​с помощью facebook с параметром navigationFallback, установленным в index.html, возникает множество неожиданных ошибок. Как внести в черный список URL-адрес для входа в Facebook или других провайдеров? - person jasan; 04.09.2016
comment
Существует белый список, а не черный: github.com /GoogleChrome/sw-precache/blob/master/ - person Jeff Posnick; 04.09.2016
comment
Джефф Я отображаю компонент 404 каждый раз, когда вводится маршрут (url), который не определен в моем приложении. ‹Путь маршрута='*' компонент = {Error404} /›. использование белого списка для утверждения моих определенных маршрутов будет работать, но я не могу отображать неопределенные пути в автономном режиме - person jasan; 04.09.2016
comment
В sw-precache поддерживается только одна резервная страница (по крайней мере, на данный момент; мы надеемся, что поддержка реальной маршрутизации на несколько страниц появится в будущем). Похоже, вам придется написать дополнительный код и использовать importScripts() для его включения, если вам нужна логика помимо того, что sw-precache поддерживает прямо сейчас. - person Jeff Posnick; 06.09.2016

arrow_upward
0
arrow_downward

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

person Marco Castelluccio    schedule 24.02.2016