Кэшировать внутренние маршруты с помощью sw-precache

Question

Я создаю SPA с использованием стандартного JavaScript и в настоящее время настраиваю sw-precache для обработки кэширования ресурсов. Работник службы создается как часть gulp сборка и установка успешно. Когда я перехожу к корневому URL ( http://127.0.0.1:8080/) в автономном режиме, отображается оболочка приложения, показывающая, что ресурсы действительно кэшируются.

Я сейчас пытаюсь заставить SW обрабатывать внутреннюю маршрутизацию без сбоев. При навигации к http://127.0.0.1:8080/dashboard_index в автономном режиме я получаю сообщение "Сайт не доступен".

Приложение обрабатывает эту маршрутизацию на стороне клиента через серию прослушивателей событий в действиях пользователей или, в случае использования кнопки "Назад", URL. При обращении к одному из этих URL-адресов не следует выполнять вызовы на сервер. Таким образом, сервисный работник должен позволить этим ссылкам "проваливаться" на клиентский код.

Я попробовал несколько вещей и ожидал, что этот Q/A решит проблему. Я включил текущее состояние generate-service-worker Задача глотка, и с этой настройкой я ожидал бы иметь возможность доступа /dashboard_index offine. Как только это сработает, я смогу адаптировать решение для других маршрутов.

Любая помощь высоко ценится.

gulp.task('generate-service-worker', function(callback) {
  var  rootDir = './public';

  swPrecache.write(path.join(rootDir, 'sw.js'), {
    staticFileGlobs: [rootDir + '/*/*.{js,html,png,jpg,gif,svg}',
                      rootDir + '/*.{js,html,png,jpg,gif,json}'],
    stripPrefix: rootDir,
    navigateFallback: '/',
    navigateFallbackWhitelist: [/\/dashboard_index/],
    runtimeCaching: [{
      urlPattern: /^http:\/\/127\.0\.0\.1\:8080/getAllData, // Req returns all data the app needs
      handler: 'networkFirst'
    }],
    verbose: true
  }, callback);
});

Обновить

Код к приложению можно найти здесь.

Удаление опции navigateFallbackWhitelist не меняет результат.

Навигация к /dashboard_index в то время как в автономном режиме печатает следующее на консоли.

• GET http://127.0.0.1:8080/dashboard_index net:: ERR_CONNECTION_REFUSED
• sw.js: 1 При извлечении скрипта произошла неизвестная ошибка.
• http://127.0.0.1:8080/sw.js Не удалось загрузить ресурс: net::ERR_CONNECTION_REFUSED

Такой же An unknown error occurred when fetching the script. также дублируется на вкладке "приложение> сервисные работники" инструментов отладки Chrome.

Также отмечается, что runtimeCaching опция не кэширует ответ json, возвращаемый с этого маршрута.

Answer 1

Для справки, на случай, если кто-то еще столкнется с этим, я считаю, что ответ из комментариев должен решить проблему:

Вы можете переключиться с navigateFallback: '/' в navigateFallback: '/index.html'? У вас нет записи для '/' в вашем списке предварительно кэшированных ресурсов, но у вас есть запись для '/index.html', Есть некоторая логика для автоматического лечения '/' а также '/index.html' как эквивалент, но это не относится к тому, что navigateFallback делается...