使用HTML5历史记录API时如何启用离线支持 [英] How to enable offline support when using HTML5 history api

问题描述

使用 html5历史记录api 进行URL重写时，支持离线模式的最佳实践(以及操作方法)是什么?

What are the best practices (and how to go about doing it) to support offline mode when using html5 history api for url rewrites?

例如，(假设)我在 https://abc.xyz 处有一个PWA SPA应用程序，该应用程序内置了国际化功能.因此，当我访问此链接时，Vue路由器(理想情况下可以是任何框架-vue，react，angular等)将我重定向到 https://abc.xyz /en .

For example, (hypothetically) I have a PWA SPA application at https://abc.xyz which has internationalization built in. So when I visit this link, the Vue router (which ideally could be any framework - vue, react, angular etc.) redirect me to https://abc.xyz/en.

这在我在线时非常有效(当然，网络服务器也正在处理此重定向，因此即使您直接访问上述链接，应用程序也可以正常工作).

This works perfectly when I am online (ofcourse, the webserver is also handling this redirect so that app works even if you directly visit the said link).

但是，当我离线时，情况就不同了.服务人员正确地缓存了所有资源，因此当我访问URL https://abc.xyz 时，一切都会按预期加载.但是，现在，如果我手动将URL键入 https://abc.xyz /en ，该应用程序将无法加载.

However, its a different story when I am offline. The service worker caches all resources correctly so when I visit the URL https://abc.xyz everything loads up as expected. However, now if I manually type the URL to https://abc.xyz/en, the app fails to load up.

任何有关如何实现这一目标的指针?

Any pointers on how to achieve this?

链接到github中的相同问题: https://github.com/vuejs- templates/pwa/issues/188

Link to same question in github: https://github.com/vuejs-templates/pwa/issues/188

推荐答案

是的，使用Service Workers可以很容易地做到这一点.您要做的就是正确配置sw-precache的navigateFallback属性.它必须指向您希望服务工作者在遇到缓存未命中时提取的缓存资产.

Yes, this is possible quite trivially with Service Workers. All you have to do is to configure the navigateFallback property of sw-precache properly. It has to point to the cached asset you want the service worker to fetch if it encounters a cache miss.

在发布的模板中，如果按以下方式配置SWPrecache Webpack插件，那就应该好了:

In the template you posted, you should be good to go if you configure your SWPrecache Webpack Plugin as follows:

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

同样，绝对必须将您放入navigateFallback中的东西已经由Service Worker进行高速缓存，否则它将以静默方式失败.

Again, it is absolutely mandatory that the thing you put inside navigateFallback is cached by the Service Worker already, otherwise this will fail silently.

您可以通过检查Webpack生成的service-worker.js中的两件事来验证所有配置是否正确:

You can verify if everything was configured correctly by checking two things in your webpack generated service-worker.js:

1. precacheConfig数组包含['/index.html', ...]
2. 在服务工作者的获取拦截器中(在文件底部)，变量navigateFallback设置为您配置的值

1. the precacheConfig Array contains ['/index.html', ...]
2. in the fetch interceptor of the service worker (at the bottom of the file), the variable navigateFallback is set to the value you configured

如果最终的应用程序托管在子目录中(例如，在Github页面上托管它时)，则还必须正确配置stripPrefix和replacePrefix选项.

If your final App is hosted in a subdirectory, for example when hosting it on Github pages, you also have to configure the stripPrefix and replacePrefix Options correctly.

这篇关于使用HTML5历史记录API时如何启用离线支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！