离线应用
为了追求极致的使用体验，Goole推出了 Service Workers技术，是一种可以提供类似于原生应用程序(Native app)体验的网络应用程序(Web app)技术,使用该技术可以离线访问应用程序。集成该技术的项目在访问的时候可以生成对应的应用程序图标，类似于客户端程序的快捷方式。
下面介绍一下如何在Webpack使用相关插件，实现一个简单的离线访问应用程序。
const HtmlwebpackPlugin = require('html-webpack-plugin');
const WorkboxPlugin = require('workbox-webpack-plugin');
module.exports = {
mode: "production",
plugins: [
new HtmlwebpackPlugin({
template: './src/index.html'
}),
new WorkboxPlugin.GenerateSW({
// 这些选项帮助 ServiceWorkers 快速启用
// 不允许遗留任何“旧的” ServiceWorkers
clientsClaim: true,
skipWaiting: true
})
]
}
在项目的入口文件中，我们需要编写sw的注册代码
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js').then(registration => {
console.log('SW registered: ', registration);
}).catch(registrationError => {
console.log('SW registration failed: ', registrationError);
});
});
}
为了实现离线体验，我们使用了Http-server来搭建一个本地的服务，在构建完成之后，使用npm run start，就可以运行dist目录下的应用。此时我们观察浏览器的开发者工具栏applicaiton中的service workers，会发现我们注册了一个新的sw，出现该结果，表明我们已经成功构建了一个简单的离线应用。
现在关闭Http-server搭建的服务或者在控制栏network中选择offline，然后刷新页面，应用照样能访问，并没有随着服务器的崩溃而崩溃。
在我们构建的时候，会生成service-worker.js 和workbox-d9851aed.js文件，service-worker.js是我们需要注册的sw文件，workbox-d9851aed.js是service-worker.js的应用文件。（sw原则上只能在https服务上运行，这里使用相关插件可以使其在localhost下进行工作）。
本章节提供案例源码下载:https://gitee.com/mvc_ydb/webpack/blob/master/serviceWorkers.zip