摘要：技术实现离线应用的核心是离线缓存技术，历史上曾先后出现两种离线缓存技术。新的线程取得控制权后，将会触发其事件。接入用构建接入的离线应用时，要解决的问题在于如何生成之前提到的文件。
内容主要引用自吴浩麟著《webpack深入浅出》 离线应用
离线应用的优点： 在没有网络的情况下能打开网页。 由于部分缓存的资源直接从本地加载，所以对用户来说可以加快网页的加载速度，减少服务器压力。技术实现：
离线应用的核心是离线缓存技术，历史上曾先后出现两种离线缓存技术。
AppCache：又叫做Application Cache，目录已经从web标准中删除，尽量不要使用。
Service Workers：目前最新的离线缓存技术，是Web Worker的一部分，它通过拦截网络请求实现离线缓存，比 AppCache更灵活。因为它可以通过js代码去控制缓存的逻辑。
Service WorkersService Workers是一个在浏览器后台运行的脚本，它的生命周期完全独立于网页，它无法直接访问DOM。它可以通过postMessage接口发送消息来和UI进程通信。拦截网络功能是Service Workers的重要功能。通过Service Workers能完成离线缓存，编辑响应，过滤响应等功能。
目前Chrome,Firefox,Opera都已经全面支持Service Workers。但只有高版本的Android支持移动端的浏览器。，由于Service Workers无法通过注入Polyfill实现兼容，所以在打算使用它前，请先确认自己的网页的运行场景。
注：Polyfill：
垫片，就是帮你加一层东西来解决问题，不光是兼容性问题，pollyfill是个概念举个例子，有些旧浏览器不支持Number.isNaN方法，Polyfill就可以是这样的：
·if(!Number.isNaN) {
Number.isNaN = function(num) {
return(num !== num);
}
}·
啥意思呢，就是假如浏览器没有Number.isNaN方法，那咱们就给它添加上去，所谓Polyfill就是这样解决API的兼容问题的。
判断浏览器是否支持Service Workers的最简单方法是通过以下代码：
if(navigator.serviceWorker){alert(true)}
要为网页接入Service Workers，需要在网页加载后注册一个描述Service Workers逻辑的脚本，代码如下：
`if(navigator.serviceWorker)
{
window.addEventListener("DOMContentLoaded",function(){
navigator.serviceWorker.register("./sw.js")
})
}`
一旦这个脚本文件被加载，Service Workers的安装就开始了，在这个脚本被安装到浏览器中后，
就算是用户关闭了当前网页，它仍会存在，也就是第一次打开该网页时，Service Workers的逻辑不会生效。
因为脚本还没有被加载和注册，但是以后再次打开该网页时脚本里的逻辑将会生效。
在Chrome中可以通过打开网址chrome://inspect/#service-workers来查看当前浏览器中所有已注册的Service Workers。
更新缓存浏览器针对Service Workers有如下机制：
每次打开接入了Service Workers的网页时，浏览器都会重新下载Service Workers脚本文件，所以要注意该脚本文件不要太大，如果发现和当前已经注册过的文件存在字节差异，就将其视为“新服务工作线程”。
新的Service Workers线程将会启动，且将会触发其install事件。
当网站上当前打开的页面关闭时，旧的Service Workers线程将会被终止，新的Service Workers线程将会取得控制权。
新的Service Workers线程取得控制权后，将会触发其activate事件。
新的Service Workers线程中的activate事件就是清理旧缓存的最佳时间点
Service Workers在注册成功后会在其生命周期中派发一些事件，通过监听对应的事件，在特定的时间上做一些事情。
在Service Workers脚本中引入了新的关键字self，代表当前的Service Workers实例。
在Service Workers安装成功后会派发出install事件，需要在这个事件中执行缓存资源的逻辑。
接入webpack用webpack构建接入Service Workers的离线应用时，要解决的问题在于如何生成之前提到的sw.js文件。
并且sw.js文件中的cacheFileList变量，代表需要被缓存文件的URL列表，需要根据输出文件列表所对应的URL来决定。而不是写成静态值。
webpack没有原生功能可以完成以上需求，可以使用插件serviceworker-webpack-plugin
·
const ServiceWorkerWebpackPlugin=require("serviceworker-webpack-plugin")
new ServiceWorkerWebpackPlugin({
// 自定义的 sw.js 文件所在路径
// ServiceWorkerWebpackPlugin 会把文件列表注入到生成的 sw.js 中
entry: path.join(__dirname, "sw.js"),
})
devServer: {
//Service Workers依赖HTTPS，使用DevServer提供的HTTPS功能。
https:true
}
·
在目录下新建sw.js文件，手动写手更新缓存里的代码，。
serviceworker-webpack-plugin为了保证灵活性，允许使用都自定义sw.js，构建输出的sw.js文件中会在头部注入一个变量serviceWorkerOption.assets到全局，里面存放着所有需要被缓存的文件的URL列表。
需要将sw.js里的文件列表变量写成动态的
·
var cacheFileList=global.serviceWorkerOption.assets
在main.js代码中注册:
if (navigator.serviceWorker) {
window.addEventListener("DOMContentLoaded",function() {
// 调用 serviceWorker.register 注册，参数 /sw.js 为脚本文件所在的 URL 路径
navigator.serviceWorker.register("sw.js");
});
}
·
**
注：使用Service Workers技术需要依赖HTTPS，可以使用DevServer提供的HTTPS功能。DevServer会自动生成一份HTTPS证书。
**
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/93872.html
摘要：我喜欢移动，而且也是那些坚持使用技术构建移动应用程序的人之一。我们准备做这样的一个渐进式应用是典型的旨在提高用户离线体验的应用。当我们开始构建应用时，你就能理解上面的场景了。的作用范围是针对相对路径的。最佳的做法是在应用的入口。 我喜欢移动app，而且也是那些坚持使用Web技术构建移动应用程序的人之一。 经过技术的不断迭代（可能还有一些其它的东西），移动体验设计愈来愈平易近人，给予用户...
摘要：原文地址译文出自我的个人博客概述在本文中，您将学习如何使用和创建离线优先数据驱动的渐进式应用程序。在离线的情况下也可以使用后台同步功能将应用程序与服务器同步。保存数据到中现在我们保存数据到刚创建的数据库中的对象中。 原文地址：Build an offline-first, data-driven PWA译文出自：我的个人博客 概述 在本文中，您将学习如何使用 Workbox 和 In...
摘要：使用离线应用构建应用服务端服务器配置创建文件客户端构建，并在标签上添加属性，属性值是服务器上配置的缓存资源列表的文件名配置相关事件，创建离线文件内容将状态代码转化成状态离线应用创建即使没有互联网连接也可以使用的应用程序。 HTML5新增了localstroage和application cache做离线缓存，两种缓存各有应用的场景，今天我们说说application cache这种方案...
阅读 3348·2023-04-25 19:39
阅读 3772·2021-11-18 13:12
阅读 3609·2021-09-22 15:45
阅读 2400·2021-09-22 15:32
阅读 656·2021-09-04 16:40
阅读 3674·2019-08-30 14:11
阅读 1812·2019-08-30 13:46
阅读 1531·2019-08-29 15:43
