webpack使用PWA实现离线访问

| 什么是PWA

渐进式Web应用程序（也称为PWA）是开发人员使Web应用程序加载更快，性能提升更高的一种现代化开发方法。

简而言之，PWA是一个网站，但是它们采用了最新的Web标准来允许在用户在设备上安装它。他提供了和App一样的用户体验。当没有网络连接时，它可以离线使用，它可以缓存上一次联网交互过程中的数据。它将App应用程序的外观美感和网站的易开发特性融合在了一起。

PWA，可以简单地理解为响应式网站，它依赖于用户的浏览器功能。它可以自动逐步增强其内置功能，使其外观和感觉像本机Web应用程序。

基本组成部分

1. Web应用程序清单(json文件)：表述程序具有的功能，比如图标，活动页面等
2. 系统进程(service worker)：提供了程序的离线体验，消息推送体验
3. App外壳体系结构：快速加载系统进程

PWA特点

1. 渐进式
2. 响应式设计
3. 离线访问

| webpack 配置 PWA实现离线访问

1. 添加Workbox 添加workbox-webpack-plugin插件，然后调整webpack.config.js文件

npm install workbox-webpack-plugin --save-dev

2. 配置

const WorkboxPlugin = require('workbox-webpack-plugin')
module.exports = {
    ...,
    plugins: [
        new WorkboxPlugin.GenerateSW({
            clientsClaim: true, // 快速启用服务
            skipWaiting: true
        }),
    ]
};

3. 注册service worker index.js

if ('serviceWorker' in navigator) {
    window.addEventListener('load', async () => {
        console.log('page load...');
        let res = await navigator.serviceWorker.register('/service-worker.js');
        console.log(res, 'serviceWorker res');
        if (res) {
            console.log('register success!');
        } else {
            console.log('register fail!');
        }
    });
}

4. 运行服务器后

停止服务器后
发现仍可访问
此时实现了离线访问
(end)