重试失败的动态导入？ (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
    }
]);

为了清楚起见，这里有一张 'app' 的简单图片：

我在我的 Service Worker 中缓存应用程序 shell，这意味着 main 页面和 offline 页面被预缓存，posts页面应该在运行时被缓存（一旦请求，所以如果用户点击 posts link）

所以我的预缓存清单缓存：main.js、offline.js 和我的 index.html.

我碰到的问题是：

用户失去网络连接
用户尝试转到 posts 页面
如果之前没有被请求和缓存，动态导入可能会失败（用户将被重定向到 offline 页面）

但是当我的用户再次获得网络连接时，点击posts link，动态导入仍然会失败；我猜是因为浏览器对动态导入进行了重复数据删除。

太可惜了，因为我的用户有网络连接；这个请求应该成功！我能弄清楚如何处理这个问题的唯一方法是让用户重新加载页面，然后再次请求 posts 页面。

所以我的问题是，我应该怎么做？

Answer 1

浏览器不会做那种 caching/deduping/whatever。您可以通过从控制台调用 import 并切换您的网络 online/offline.

来轻松验证这一点

所以问题很可能出在您使用的框架上。第一次调用路由操作的缓存发生在框架中的某个地方。也许查阅文档？

Answer 2

通过在尝试导入之前检查用户是否有网络连接解决了这个问题：

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);
  }
}

它感觉有点像一个有点笨拙的方法，但是 browser support navigator.onLine 还是很不错的。

有关重试失败的动态导入的更多信息，我在 tc39/proposal-dynamic-import github 存储库中发现了 this 问题。

重试失败的动态导入？ (SPA/PWA)

Retrying a failed dynamic import? (SPA/PWA)

dynamic-import

service-worker

progressive-web-apps

workbox