PWA（ProgressiveWebApp）是前端的一大趋势，它可以极大的加快前端页面的加载速度，并且得到一个几乎像nativeapp（其实不好说）。PWA其实是多种前端技术的结合，其中最重要的就是ServiceWorker。ServiceWorker在MDN上的描述：ServiceWorker本质上充当Web应用程序和浏览器之间的代理服务器，当网络可用时，也可以充当浏览器和网络之间的代理。它们旨在（除其他事项外）支持创建高效的离线体验、拦截网络请求并根据网络是否可用以及更新的资源驻留在服务器上采取适当的行动。它们还允许访问推送通知和后台同步API。其实大可不必太纠结。为了简单起见，我们可以把它看成是更高级更高级的AppCache。在nuxt（vue）网站启用Serviceworker趁着公司官网最近升级了，我也在公司官网安装了Serviceworker，用于离线缓存。大前提：Serviceworkers只能在https（或localhost）下使用。首先，确保您的网站有https。在nuxt程序中启用Serviceworker非常方便。Nuxt提供了一个官方模块——pwa-module来支持PWA网站，其中包含了实现Serviceworker的workbox模块。Workbox其实是指google为了简化Serviceworker开发而开源的第三方库。先安装依赖$yarnadd@nuxtjs/pwa@nuxtjs/workbox然后在配置文件中启用//modulesmodule.exports={['@nuxtjs/pwa']}SW完成后使用矿坑官方网站，发现服务开启后，Safari无法播放视频了。但是直接输入视频链接就可以播放了。经过各种google搜索，找到了官方issue：https://github.com/nuxt-commu...https://github.com/angular/an...甚至还找到了有人给webkit（Safari浏览器kernel）开了一个bug：https://bugs.webkit.org/show_...状态一直是新的，一直没人解决。但是，问题中详细说明了Safari的行为和问题的原因。出现问题的原因是对于一个视频文件请求，浏览器会发送一个带有Range头的请求来部分获取文件内容。Safari很奇怪。对于视频文件请求，一开始会发送Range:0-1请求，但是serviceworker中的请求处理逻辑无法识别Range请求，将Range请求当成普通请求，返回200。Safari将200视为作为失败的请求，导致对视频文件的请求失败。最后打开大家的回复，在这里找到了：https://developers.google.com...然后经过各种尝试（中间过程略），说说可行的方案：先加js插件：//workbox-range-request.jsworkbox.routing.registerRoute(/.*\.(mp4|webm)/,workbox.strategies.cacheFirst({plugins:[newworkbox.rangeRequests.Plugin(),],}),'GET');此文件注册到工作箱的路由，指定视频文件（以.mp4或.webm结尾的文件。如果你的网站有音频文件，也应该处理）处理程序添加rangeRequests插件并在配置文件中注册该插件：//modules:['@nuxtjs/pwa',{workbox:{cachingExtensions:'@/plugins/workbox-range-request.js',}}]，注意一定要用cachingExtensions，不能用routingExtensions，虽然注册了路由配置，让Serviceworker可以处理带Range头的请求，但是还没完.Workbox会请求googlecdn动态加载js脚本。如果您在朝鲜，由于众所周知的原因，加载脚本将失败。解决方法：先去workbox官网下载release包（我用的是3.5.0版本）：https://github.com/GoogleChro...解压放到你项目的static文件夹下，authorisstatic/workbox-v3.5.0修改配置//modules:['@nuxtjs/pwa',{meta:false,workbox:{config:{modulePathPrefix:'/workbox-v3.5.0'},cachingExtensions:'@/plugins/workbox-range-request.js',}}]，配置指定workbox从路径/workbox-v3.5.0而不是googlecdn加载js脚本。请注意，目前尚不支持配置中使用的配置版本（@nuxtjs/pwa@2.5.0，2018-09-20）。作者向官方仓库开了一个Pullrequest，还在审核中。作者直接修改了node_modules中的文件。在使用Serviceworkers之前最好想清楚。这个东西和AppCache一样，上线容易，下线难。请到公司官网体验效果：https://www.eoitek.com
