React如何通过Webpack优雅的接入serviceWorker的成熟方案workBox && Google Analytics
栏目: JavaScript · 发布时间: 5年前
内容简介:为了提高React应用的启动速度、离线访问能力, 做到页面能离线启动、service worker能在后台默默更新本地缓存的页面、数据的版本,并且做到监控版本更新能力的靠谱性。踩过"大大"的坑, 看了"大大"的文章, 最后的方案是: 采用serviceWorker的成熟方案workBox通过Webpack的workbox官方插件workbox-webpack-plugin做到页面能离线启动、service worker能在后台默默更新本地缓存的页面、数据的版本, 通过Google Analytics做到监控
为了提高React应用的启动速度、离线访问能力, 做到页面能离线启动、service worker能在后台默默更新本地缓存的页面、数据的版本,并且做到监控版本更新能力的靠谱性。
踩过"大大"的坑, 看了"大大"的文章, 最后的方案是: 采用serviceWorker的成熟方案workBox通过Webpack的workbox官方插件workbox-webpack-plugin做到页面能离线启动、service worker能在后台默默更新本地缓存的页面、数据的版本, 通过Google Analytics做到监控版本更新能力的靠谱性(上报应用版本)。
简单来说就是: workbox-webpack-plugin 和 Google Analytics 的故事。
我是文章开始的划分符
目录
serviceWorker仅支持本地(localhost/127.0.0.x)的http协议和带有安全证书的https协议哦 ~
workbox-webpack-plugin
- 安装
- 配置接入 (重点踩坑)
- 解析配置/浓缩的文档接入精华
React如何接入Google Analytics, 做到监控离线的应用版本
- 封装GA组件
- 配置GA, 上报数据及版本
- 后台查看上报的数据 (重点采坑)
官方文档: developers.google.com/web/tools/w… (看下文, 或者不看下文的同学, 可以参考文档)
甜品一: workbox-webpack-plugin
-
安装:
npm install workbox-webpack-plugin -D
-
配置: webpack插件中使用~
webpack配置中引入插件
const { GenerateSW } = require('workbox-webpack-plugin') exports.override = (webpackConfig, options) => { webpackConfig.plugins.push(new GenerateSW({ swDest: 'workboxServiceWorker.js', // 注意点1: 不写这个你就完了。 importWorkboxFrom: 'disabled', // 可填`cdn`,`local`,`disabled`, 区别下面整理 importScripts: 'https://fds.api.x.net/workbox-cdn/workbox-sw.js', // 我从自己的cdn引入了workbox,这样就不用每个项目都上传 // 这三个都写就对了, 因为不写接入不正常。 skipWaiting: true, clientsClaim: true, offlineGoogleAnalytics: true, // 估计是离线也记录ga数据, 有网了再上报的意思。 // 缓存规则, 具体下面记录, 更详细的请查阅文档, 这一部分才是插件的核心部分,之后再做整理。 runtimeCaching: [ { // api staleWhileRevalidate urlPattern: new RegExp('^https://easy-mock.com'), handler: 'staleWhileRevalidate', options: { cacheableResponse: { statuses: [200], }, }, }, { // cdn资源 NetworkFirst urlPattern: new RegExp('^https://fds.api.x.net'), handler: 'NetworkFirst', options: { networkTimeoutSeconds: 2, cacheableResponse: { statuses: [200], }, }, }, ], })) return webpackConfig } 复制代码
- 在react入口js的代码里注册代码, 你也可以选择在
public
下的index.html模板里的script标签里写(别说我教你们的)
if ('serviceWorker' in navigator) { window.addEventListener('load', () => { // 敲黑板, 这里的/workbox/workboxServiceWorker.js需要根据实际情况变化, 因为我项目没部署到根域名, 所以加了workbox的路径名... navigator.serviceWorker.register('/workbox/workboxServiceWorker.js').then(registration => { console.log('SW registered: ', registration) }).catch(registrationError => { console.log('SW registration failed: ', registrationError) }) }) } 复制代码
坑点:
-
swDest: 'workboxServiceWorker.js'
官方文档中, 这个选项是可选填, 默认值为: service-worker.js
。我遇到的问题是, 如果不写这个重新写出一个文件, 不知道是哪个"B", 也写出了一个叫 service-worker.js
的文件, workBox的先写出来了, 然后又被一个同名文件写出覆盖了! 然后你自认为接入了 workbox
, 实际上你不知道你接入的是啥。(有可能这个文件也是workbox写出的,但是的确不是我想要的,虽然能实现缓存,但怎么实现的,以及实现的完全不是你想要的效果, 它完全没有引入workbox, 对, 故事就是这样。)
-
importWorkboxFrom
和importScripts
importWorkboxFrom可以选填三个值:
cdn
,local
,disabled
importScripts
所以我最终的方案:
importWorkboxFrom: 'disabled', importScripts: 'https://fds.api.x.net/workbox-cdn/workbox-sw.js', // 把local模式导出的文件, 先部署获取到cdn链接, 在写死就ok 复制代码
-
skipWaiting
和clientsClaim
: 都写true就ok, 因为其他同学的文章里, 写的也是true。 -
runtimeCaching
: 将会是个大坑, 具体的需要实战或者根据自己的业务调整, 下文会解析一部分里面的重要配置。
解析配置
主要解析runtimeCaching中的缓存策略 (只在demo中测试, 没接正式项目, 不知道有没有什么坑点, 比如第三方请求上就有坑)
-
Stale While Revalidate (主要)
这种策略的意思是当请求的路由有对应的 Cache 缓存结果就直接返回,在返回 Cache 缓存结果的同时会在后台发起网络请求拿到请求结果并更新 Cache 缓存,如果本来就没有 Cache 缓存的话,直接就发起网络请求并返回结果,这对用户来说是一种非常安全的策略,能保证用户最快速的拿到请求的结果,但是也有一定的缺点,就是还是会有网络请求占用了用户的网络带宽。
用来做CSS,JS,PNG等资源的策略, 觉得蛮好。
-
Network First (次主要)
这种策略就是当请求路由是被匹配的,就采用网络优先的策略,也就是优先尝试拿到网络请求的返回结果,如果拿到网络请求的结果,就将结果返回给客户端并且写入 Cache 缓存,如果网络请求失败,那就读取Cache中的数据,这种策略一般适用于返回结果不太固定或对实时性有要求的请求,为网络请求失败进行兜底。
用来做API接口的,也许就是这样。
-
Cache First
这个策略的意思就是当匹配到请求之后直接从 Cache 缓存中取得结果,如果 Cache 缓存中没有结果,那就会发起网络请求,拿到网络请求结果并将结果更新至 Cache 缓存,并将结果返回给客户端。这种策略比较适合结果不怎么变动且对实时性要求不高的请求。
-
Network Only
比较直接的策略,直接强制使用正常的网络请求,并将结果返回给客户端,这种策略比较适合对实时性要求非常高的请求。
-
Cache Only
这个策略也比较直接,直接使用 Cache 缓存的结果,并将结果返回给客户端,这种策略比较适合一上线就不会变的静态资源请求。( - - 你敢确定不会变吗...)
甜品二: React如何接入Google Analytics, 做到监控离线的应用版本
React项目接入GA, 封装GA, 使用了react-ga (github上搜...)
GA官方上报的字段及含义: developers.google.com/analytics/d…
import React from 'react' import ReactGA from 'react-ga' // eslint-disable-next-line export default function withTracker(WrappedComponent, option = {}) { const trackingId = 'UA-xxxxxxx-x' const trackPage = page => { ReactGA.initialize(trackingId, { gaOptions: { userId: 'arley_user_id', // 可以删除, 仅仅为了测试上报 siteSpeedSampleRate: 100, // 上报网站速度的比例, 默认10%, 如果网站量比较大, 那就不用设置100%了。 }, }) const app = { appName: 'workBoxDemo', appVersion: '1.3', } // 上报版本 console.log(app) ReactGA.set(app) ReactGA.pageview(page) } // eslint-disable-next-line const HOC = class extends React.Component { componentDidMount() { const page = this.props.location.pathname trackPage(page) } componentWillReceiveProps(nextProps) { const currentPage = this.props.location.pathname const nextPage = nextProps.location.pathname if (currentPage !== nextPage) { trackPage(nextPage) } } render() { return <WrappedComponent {...this.props} /> } } return HOC } 复制代码
然后在需要引入GA的页面的react加上withTracker修饰器即可~
后台查看上报的数据 (重点坑)
上报之后的数据在哪看? 找不到... 反正就是找不到...
最后发现可以自定义报告去筛选数据, 具体方案待讨论。
夜宵: 浏览器service workers和internet的调试
好吧, 下面这个图是QQ浏览器的, 应用版本没更新(预期是1.3, 谷歌会自己更新新版本, 具体的坑还没看)
- 更多的坑~ 以后填...
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- Nginx 通过反向代理在多个平台接入上游的客户信息
- 如何通过ShareSDK的 Unity3D快速接入Android/iOS分享与授权
- 云转码接入视频网站解决方案 express-ffmpeg接入discuz方案
- 数据接入治理平台
- 【Netty】如何接入新连接
- 有赞统一接入层架构演进
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
数值方法和MATLAB实现与应用
拉克唐瓦尔德 / 机械工业出版社 / 2004-9 / 59.00元
本书是关于数值方法和MATLAB的介绍,是针对高等院校理工科专业学生编写的教材。数值方法可以用来生成其他方法无法求解的问题的近似解。本书的主要目的是为应用计算打下坚实的基础,由简单到复杂讲述了标准数值方法在实际问题中的实现和应用。本书通篇使用良好的编程习惯向读者展示了如何清楚地表达计算思想及编制文档。书中通过给读者提供大量的可直接运行的代码库以及讲解MARLAB工具箱中内置函数使用的数量方法,帮助......一起来看看 《数值方法和MATLAB实现与应用》 这本书的介绍吧!