【Webpack 性能优化系列(8) - PWA】使用渐进式网络应用程序为我们的项目添加离线体验

骑猪看日落 2022-09-10 00:08 100阅读 0赞

**webpack系列文章：**

*  [【Webpack 性能优化系列(9) - 多进程打包】极大的提升项目打包构建速度！！！][Webpack _9_ -]
 *  [【Webpack 性能优化系列(7) - 懒加载和预加载】][Webpack _7_ -]
 *  [【Webpack 性能优化系列(6) - code splitting 】通过代码分割来获取更小的 bundle，优化资源加载][Webpack _6_ - code splitting _ bundle]
 *  [【Webpack 性能优化系列(5) - tree shaking 】去除未引用代码，减少代码体积！！！][Webpack _5_ - tree shaking]
 *  [【Webpack 性能优化系列(4) - 缓存 】详解如何做bable缓存和文件资源缓存][Webpack _4_ - _ _bable]
 *  [【Webpack 性能优化系列(3) - oneOf】][Webpack _3_ - oneOf]
 *  [【Webpack 性能优化系列(2) - source-map】][Webpack _2_ - source-map]
 *  [【Webpack 性能优化系列(1) - HMR 热模块替换】][Webpack _1_ - HMR]
 *  [【Webpack 生产环境配置】近两万字长文总结学习如何提取css为单独文件、css的压缩和兼容性处理，如何压缩html和js、如何做js语法检查eslint和js兼容性处理babel！！！][Webpack _css_css_html_js_js_eslint_js_babel]
 *  [【Webpack 开发环境配置】万字长文总结学习如何打包样式资源、html资源、图片资源和其他资源？devServer是什么，如何配置？][Webpack _html_devServer]
 *  [【Webpack 简介及五个核心概念】][Webpack]

# PWA #

**渐进式网络应用程序(`progressive web application - PWA`)可以为我们的项目添加离线体验**，使用名为 `Workbox` 的 Google 项目，帮助我们更简单地为 web app 提供离线支持。

正常情况下，如果停止 server 然后刷新，则网页不再可访问。

比如掘金`https://juejin.cn/`，有网络时正常访问：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZyG5ZyGMDE_size_20_color_FFFFFF_t_70_g_se_x_16]  
`No throttling`改为`Offline`关闭网络  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZyG5ZyGMDE_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
再次刷新，网页不可访问：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZyG5ZyGMDE_size_20_color_FFFFFF_t_70_g_se_x_16 2]  
淘宝使用了PWA技术，访问淘宝网关闭网络，刷新  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZyG5ZyGMDE_size_20_color_FFFFFF_t_70_g_se_x_16 3]  
**可以看到关闭网络后网页依然可以访问，从network中能看到没有问题的资源基本上都是来自于`ServiceWorker`，就是来自PWA技术提供的资源**

PWA的使用：

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

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

**webpack.config.js**

完成这些设置，构建项目

...
                      Asset       Size  Chunks                    Chunk Names
              app.bundle.js     545 kB    0, 1  [emitted]  [big]  app
            print.bundle.js    2.74 kB       1  [emitted]         print
                 index.html  254 bytes          [emitted]
    precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js  268 bytes          [emitted]
          service-worker.js       1 kB          [emitted]
    ...

现在你可以看到，生成了两个额外的文件：`service-worker.js` 和名称冗长的 `precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js`。`service-worker.js` 是 `Service Worker` 文件，`precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js` 是 `service-worker.js` 引用的文件，所以它也可以运行。你本地生成的文件可能会有所不同；但是应该会有一个 `service-worker.js` 文件。

我们现在已经创建出一个 Service Worker。

**注册 Service Worker**

通过在入口文件添加以下注册代码来注册 Service Worker：

**index.js**

import {  mul } from './test';
    import '../css/index.css';
    
    function sum(...args) { 
      return args.reduce((p, c) => p + c, 0);
    }
    
    // eslint-disable-next-line
    console.log(mul(2, 3));
    // eslint-disable-next-line
    console.log(sum(1, 2, 3, 4));
    
    + /* + 1. eslint不认识 window、navigator全局变量 + 解决：需要修改package.json中eslintConfig配置 + "env": { + "browser": true // 支持浏览器端全局变量 + } + 2. sw代码必须运行在服务器上 + --> nodejs + --> + npm i serve -g + serve -s build 启动服务器，将build目录下所有资源作为静态资源暴露出去 + */
    + // 注册serviceWorker
    + // 处理兼容性问题
    + if ('serviceWorker' in navigator) { 
    +   window.addEventListener('load', () => { 
    +     navigator.serviceWorker
    +       .register('/service-worker.js')
    +       .then(() => { 
    +         console.log('sw注册成功了~');
    +       })
    +       .catch(() => { 
    +         console.log('sw注册失败了~');
    +       });
    +   });
    + }

再次构建项目

现在来进行测试。停止 server 并刷新页面。如果浏览器能够支持 Service Worker，应该可以看到你的应用程序还在正常运行。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZyG5ZyGMDE_size_20_color_FFFFFF_t_70_g_se_x_16 4]

# 参考 #

*  https://www.bilibili.com/video/BV1e7411j7T5?p=6&spm\_id\_from=pageDriver
 *  https://webpack.docschina.org/guides/progressive-web-application/

[Webpack _9_ -]: https://blog.csdn.net/weixin_45844049/article/details/120065367
[Webpack _7_ -]: https://blog.csdn.net/weixin_45844049/article/details/120048999
[Webpack _6_ - code splitting _ bundle]: https://blog.csdn.net/weixin_45844049/article/details/120044485
[Webpack _5_ - tree shaking]: https://blog.csdn.net/weixin_45844049/article/details/120043245
[Webpack _4_ - _ _bable]: https://blog.csdn.net/weixin_45844049/article/details/120022585
[Webpack _3_ - oneOf]: https://blog.csdn.net/weixin_45844049/article/details/120008581
[Webpack _2_ - source-map]: https://blog.csdn.net/weixin_45844049/article/details/120002385
[Webpack _1_ - HMR]: https://blog.csdn.net/weixin_45844049/article/details/119982759
[Webpack _css_css_html_js_js_eslint_js_babel]: https://blog.csdn.net/weixin_45844049/article/details/119828504
[Webpack _html_devServer]: https://blog.csdn.net/weixin_45844049/article/details/119718436
[Webpack]: https://blog.csdn.net/weixin_45844049/article/details/119452096
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZyG5ZyGMDE_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/e750bd7408944df4b6d3bf0fad087222.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZyG5ZyGMDE_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/b7d1277ac9104ae497ea02d926835026.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZyG5ZyGMDE_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/66c8c754da164c0191fab9c8cff363e1.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZyG5ZyGMDE_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220829/32a2c9be691d438284885687bf465a1c.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZyG5ZyGMDE_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220829/1c09758c41c34568a6906fad123d27d7.png