PWA应用开发会遇到哪些问题

最新推荐文章于 2024-07-06 11:09:10 发布

weixin_44154576

最新推荐文章于 2024-07-06 11:09:10 发布

阅读量571

点赞数 2

分类专栏：前端技术文章标签：缓存前端 webapp

本文链接：https://blog.csdn.net/weixin_44154576/article/details/126586530

版权

3 篇文章 0 订阅

订阅专栏

渐进式WEB应用（PWA）相较于传统网页应用，在使用体验上更加贴近原生APP，这得益于其强大的缓存API。不过对于开发者来说，缓存也会带来诸多不便。所以，今天我们就来梳理一下，PWA应用开发会遇到哪些问题，以及这些问题的解决方案。

如果我们在开发过程中启用了service worker，并且引入了PWA的缓存机制，那么我们很有可能会遇到资源不更新的问题。

浏览器会根据我们提供的缓存列表保存资源，当更改其中的某个资源（如JS文件），并在service worker中修改了版本，浏览器检测到更新会在后台静默安装好资源。但是安装完并不代表会马上使用该资源，此时开发者看到的页面还是老版本的，很多人会误以为是哪里出了bug，其实这是PWA的机制。

官方说法是：当不再有任何已加载的页面在使用旧版的service worker的时候，新版本才会激活。这意味着，开发者至少刷新两次页面才会看到新的页面效果。

现在做前端开发都会使用一些开发工具，这些工具会提供页面热更新，有些能很好地解决资源刷新问题，但并不是百分百有效的，所以当我们修改了文件页面却没变化时，不妨想想是不是PWA的缓存升级机制导致的，这时候可以多刷新几次页面，或者使用“ctrl+f5”强制清空缓存后再看看页面是否更新了。

service worker并没有提供优雅的缓存策略，很多开发者会倾向于使用谷歌提供的workbox库，workbox封装了service worker并提供了非常简洁的API接口，使用几行命令就能配置好service worker。

其中的workbox-strategies库提供了四种缓存策略：CacheFirst、NetworkFirst、NetworkOnly、StaleWhileRevalidate。从名字上就能看出这些策略的含义：

这四个策略的使用场景各不相同，用错地方会导致页面逻辑混乱，尤其是StaleWhileRevalidate这个方案，看上去兼顾了前面三种策略的优点，实际使用时，因为只有下次刷新才能将最新资源展示到客户端，所以大多数情况使用该策略会显得很别扭。

很多人以为service worker的缓存只能存储静态资源，其实它还能缓存调用后台得到的api,像有些不重要的API可以使用NetworkFirst策略，在没网的情况下也能获得数据，而像登录注册等这种比较重要的接口就不适用于缓存。

缓存策略一定要根据自己网页的实际情况去因地制宜地使用，不存在一招鲜吃遍天的方案，也没有最佳实践，好好研究自己的产品才能得到最优解。

开发PWA应用所需的环境比普通WEB应用更加严格，没有开发环境，就只能凭空调试，这样不光效率低下，出错概率也很高。磨刀不误砍柴工，开发前配置好本地环境非常重要。

PWA调试所需环境：

从以上要求来看，本地必须得配置https协议才能进行PWA开发调试（线上同理）。那么本地怎么配置https呢？这里给大家推荐一个本地SSL证书颁发工具mkcert。

使用mkcert，两三行命令就能获得可靠的本地https证书，搭配nginx，可以快速构建本地的https开发环境。

PWA作为传统webapp的补充，他本身就是渐进式增强的，一切都能在原有网页应用的基础上做非侵入开发。所以从全局角度来说，一定是先开发好webapp的所有功能，再考虑做PWA补充，切忌把页面逻辑混入service worker中。

当然，我们可以让webapp开发和PWA应用更好地调和起来，pwapk.com的开发人员基于vue3框架构建了一套完整的PWA开发框架，项目正在试运行，后续会开源，欢迎关注。

关注