webpack学习---优化--PWA渐进式网络开发应用程序(离线可访问技术)
2021/10/25 9:10:04
本文主要是介绍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注册失败了~'); }); }); }
这篇关于webpack学习---优化--PWA渐进式网络开发应用程序(离线可访问技术)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-19Excel数据导出课程:初学者必备教程
- 2024-09-19Excel数据导入课程:新手入门指南
- 2024-09-19RBAC的权限管理入门教程
- 2024-09-19如何使用Svg Sprite Icon制作图标
- 2024-09-19uniapp 如何实现点赞后全局更新数据-icode9专业技术文章分享
- 2024-09-19云函数怎么运行wx-server-sdk-icode9专业技术文章分享
- 2024-09-19"dependencies": { "wx-server-sdk": "latest" },是什么意思-icode9专业技术文章分享
- 2024-09-16优化批处理流程:自定义BatchProcessorUtils的设计与应用
- 2024-09-15laravel collect游标批量插入的方法示例-icode9专业技术文章分享
- 2024-09-15怎么修改laravel的中间件 把获取IP改成X-Real-IP-icode9专业技术文章分享