webpack学习---优化--PWA渐进式网络开发应用程序(离线可访问技术)

PWA: 渐进式网络开发应用程序(离线可访问技术) npm下载workbox-webpack-plugin

                1. eslint不认识 window、navigator全局变量

                    解决：需要修改package.json中eslintConfig配置

                    "env": {

                        "browser": true // 支持浏览器端全局变量

                    }

                2. sw代码必须运行在服务器上

                    --> nodejs

                    -->

                        npm i serve -g

                        serve -s build 启动服务器，将build目录下所有资源作为静态资源暴露出去

 

            /*
            PWA: 渐进式网络开发应用程序(离线可访问)  npm下载 workbox-webpack-plugin
                相当于加载玩页面后,再刷新页面依旧会有大部分内容
                workbox --> workbox-webpack-plugin    
            */
           

    webpack.config.js
            //引入插件
            const WorkboxWebpackPlugin = require('workbox-webpack-plugin');

            plugins: [
                new MiniCssExtractPlugin({
                filename: 'css/built.[contenthash:10].css'
                }),
                new OptimizeCssAssetsWebpackPlugin(),
                new HtmlWebpackPlugin({
                template: './src/index.html',
                minify: {
                    collapseWhitespace: true,
                    removeComments: true
                }
                }),
                /*
                    1. 帮助serviceworker快速启动
                    2. 删除旧的 serviceworker

                    生成一个 serviceworker 配置文件~
                */
                new WorkboxWebpackPlugin.GenerateSW({
                    clientsClaim: true,
                    skipWaiting: true
                })
            ],

 

   

    index.js入口文件

                /*
                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注册失败了~');
                        });
                    });
                }