学习笔记create-react-app 自定义Service Worker

Posted 2021-04-26 一个小前端的学习笔记

本文学习的文章：Build Progressive Web Apps with React[1]

Dev模式下开发SW

create-react-app 生成的service-worker.js文件仅仅在生产模式可以使用。原因是[2]service-worker.js在开发环境下会导致很多不可意料的错误

看一下serviceworker.js里面 register 的函数：

 if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);    if (publicUrl.origin !== window.location.origin) { return; }

上面代码告诉我们，react仅在production模式注册sw。

所以我是通过yarn build，进入生产模式然后通过serve -s build来开发的。（如果你没有安装serve，可以安装一下或者起一个别的静态服务器）

更新Service Worker

•谷歌控制台application里面勾选Update on Reload•移除service worker，然后让sw重新安装

复写create-react-app配置而不是eject

create-react-app(CRA) 默认的sw配置是缓存静态资源，但是很显然不满足我的需要

为什么要复写配置，完全可以重新写一个service-worker-custom.js文件然后注册它不就可以了？

答案是最好不要，因为workbox-webpack-plugin已经集成到react-create-app的生产配置里面了[3]，你可以通过修改配置的方式，来使用google提供的Workbox[4]，帮助你实现自定义的sw

推荐一个工具react-app-rewired[5]

使用google的工具workbox[6]

这部分内容我自己也不是很熟悉，只是照着教程做。教程还是很详细的，相信大部分同学都能学会。

还是要在强调一点，workbox-webpack-plugin已经内置，所以你可能需要配置一下eslint，防止报错。

如果搞不下去了，可以问问我，或者参考我做好的项目[7]

References

[1] Build Progressive Web Apps with React: https://blog.bitsrc.io/build-progressive-web-apps-with-react-part-1-63f1fbc564a6
[2] 原因是: https://github.com/facebook/create-react-app/issues/2396
[3] 生产配置里面了: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
[4] Workbox: https://developers.google.com/web/tools/workbox/modules/workbox-sw
[5] react-app-rewired: https://github.com/timarney/react-app-rewired
[6] workbox: (https://developers.google.com/web/tools/workbox/modules/workbox-strategies)
[7] 项目: https://github.com/Liugq5713/wechat-editor