Повторять неудачный динамический импорт? (SPA / PWA)

Question

Что-то, с чем я сталкиваюсь в проекте, над которым я работаю, у меня есть одностраничное приложение . Я обрабатываю браузерную навигационную маршрутизацию на стороне клиента , которая позволяет мне динамически импортировать некоторые модули при совпадении маршрута. Мои настройки маршрутизации выглядят примерно так:

router.setRoutes([
    {
        path: '/',
        component: 'app-main', // statically loaded
    },
    {
    path: '/posts',
        component: 'app-posts',
        action: () => { import('./app-posts.js').catch(() => Router.go('/offline');} // dynamically loaded
    },
    {
        path: '/offline', network
        component: 'app-offline', // also statically loaded
    }
]);

А вот простое изображение приложения для ясности:

Я кэширую оболочку приложения в моем сервисном работнике, что означает, что страница main и страница offline прекэшируются, а страница posts должна кэшироваться во время выполнения (после запроса, так что еслипользователь нажимает на ссылку posts)

Итак, мои кэши манифеста до кеширования: main.js, offline.js, а мои index.html.

Где я сталкиваюсь с ударом:

• Пользователь теряет сетевое подключение
• Пользователь пытается перейти на страницу posts
• . Динамический импорт для этого может завершиться ошибкой, если он не был запрошен икэшированный ранее (и пользователь будет перенаправлен на страницу offline)

Но когда мой пользователь снова получает сетевое подключение, щелкает ссылку posts, динамический импорт все равно не будет выполнен;Я предполагаю, потому что браузер дедуплицирует динамический импорт.

Это очень позорно, потому что мой пользователь подключен к сети;этот запрос должен быть успешным! Единственный способ понять, как с этим справиться, - это перезагрузить страницу и снова запросить страницу posts.

Итак, мой вопрос, как мне поступить?

Answer 1

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

function handleRoute(url) {
  if('onLine' in navigator) {
    if(navigator.onLine) {
      // user is online, safe to import
      import(url);
    } else {
      // user is offline, don't even try to import -> straight to `/offline`
      Router.go('/offline');
    }
  } else {
    // incase the browser doesnt support `navigator.onLine`, try to import anyway
    import(url);
  }
}

Это выглядит как слегка хакерский способ сделать это, но потомснова поддержка браузера для navigator.onLine довольно хороша.

Для получения дополнительной информации о повторных попытках неудачного динамического импорта я обнаружил эту проблему в репозитории tc39/proposal-dynamic-import github.

Answer 2

Браузер не выполняет такого рода кэширование / дедупликацию / что угодно. Вы можете легко это проверить, позвонив на консоль import и переключив вашу сеть в онлайн / офлайн.

Таким образом, проблема, скорее всего, связана с используемой платформой. Кэширование первого вызова действия маршрута происходит где-то в рамках. Может быть, обратитесь к документации?