Как включить автономную поддержку при использовании HTML5 истории API

Question

Каковы рекомендации (и как это сделать) для поддержки режима офлайн при использовании html5 истории api для переписывания URL-адресов?

Например, (гипотетически) у меня есть приложение PWA SPA на https://abc.xyz, в которое встроена интернационализация. Поэтому, когда я посещаю эту ссылку, маршрутизатор Vue (который в идеале может быть любой структурой - vue, реагировать, угловым и т. д.) перенаправляетme to https://abc.xyz/en.

Это прекрасно работает, когда я нахожусь в сети (конечно, веб-сервер также обрабатывает это перенаправление, так что приложение работает, даже если вы непосредственно посещаете указанную ссылку).

Однако, когда я не в сети, это другая история.Работник сервиса правильно кэширует все ресурсы, поэтому при посещении URL https://abc.xyz все загружается, как и ожидалось.Однако теперь, если я вручную наберу URL-адрес для https://abc.xyz/en,, приложение не сможет загрузиться.

Есть ли какие-нибудь указатели о том, как этого добиться?

Ссылка на тот же вопрос в github: https://github.com/vuejs-templates/pwa/issues/188

Answer 1

Да, это возможно довольно тривиально с сервисными работниками.Все, что вам нужно сделать, это правильно настроить navigateFallback свойство sw-precache.Он должен указывать на кешируемый ресурс , который вы хотите, чтобы сервисный работник получал, если он обнаружил пропадание кэша.

В шаблоне, который вы разместили, вам будет хорошо, если вы настроите свойПлагин SWPrecache Webpack выглядит следующим образом:

new SWPrecacheWebpackPlugin({
    ...
    navigateFallback: '/index.html'
    ...
})

Опять же, абсолютно обязательно, чтобы вещь, которую вы помещаете внутрь navigateFallback, уже кэшировалась сервисным работником, иначе это произойдет молча.

Вы можете проверить, правильно ли все настроено, проверив две вещи в вашем веб-пакете, сгенерированном service-worker.js:

1. Массив precacheConfig содержит ['/index.html', ...]
2. в перехватчике выборки работника службы(внизу файла) переменная navigateFallback имеет значение, которое вы настроили

Если ваше окончательное приложение размещено в подкаталоге, например, при размещении его на страницах Github, вытакже необходимо правильно настроить параметры stripPrefix и replacePrefix.