PWA
Performance Web
Desenvolvimento
Experiência do Usuário
Web

PWA:它是什么以及如何每天处理性能

PWA 的速度并不是一成不变的。性能是一种日常护理,而不是您激活后忘记的设置。

渐进式 Web 应用程序承诺两全其美:网络的可访问性和已安装应用程序的感觉。它打开速度快,离线工作,可以发送通知,无需去商店即可安装在主屏幕上。从理论上讲,它很优雅。

许多人打开 [PWA0],发现它“有效”,并认为他们已经获得了免费性能。几个月后,应用程序变得很慢,缓存更多地是一种阻碍而不是帮助,并且应用程序体验变成了屏幕上带有图标的沉重网页。

[PWA1 不是性能开关。这种架构如果维护得当,可以提供速度,但如果被忽视,则会带来挫败感。我想解释什么是 PWA,主要是如何在日常生活中保持健康的表现,因为每天都会有输赢。

什么是 PWA,并不神秘

[PWA2 本质上是一个使用一组现代网络技术来表现得像应用程序的网站。三大支柱是 Service Worker,它在后台运行,控制缓存和离线操作;清单,它允许您使用自己的图标和名称在主屏幕上安装应用程序;以及 HTTPS 的使用,这是所有这些工作的安全要求。

服务人员是故事的核心。它位于应用程序和网络之间,拦截请求并决定从缓存中提供什么以及在线获取什么。这就是 PWA 立即打开并无需连接即可工作的原因。

这种力量也是问题的根源。配置不当的 Service Worker 会提供旧内容,不会在应该更新的时候更新,或者会用无用的缓存填充设备。给你速度的同一部分也会给你带来缓慢。

论文:PWA 性能是维护,而不是安装

我最想反对的想法是,性能来自于“使用[PWA4”的决定。我认为它来自于持续的开发习惯,并且 PWA 比典型的网站需要更多的纪律,而不是更少。

原因很简单:[PWA5 添加了一层,即服务工作线程及其缓存策略,需要深思熟虑、测试和维护。应用程序的每个新版本都有机会破坏缓存、提供过时的内容或增加设备上存储的内容。

因此,[PWA6 的表现属于常规护理。这是每次交付流程中都会涉及的内容,而不是您执行一次后就忘记的设置。那些将其视为可遗忘的人只会在用户已经感到恼火时才会出现累积的问题。

缓存策略:集中护理

[PWA7? 例程中最重要的决定是如何缓存每种类型的资源。没有一种单一策略对所有事情都有好处。

很少更改的文件,应用程序代码,图标,字体,可以积极缓存,首先从缓存中快速打开。不断变化的数据(用户消费的内容)需要优先考虑网络或验证缓存是否仍然新鲜的策略。

最常见的错误是对所有事情都采用激进的策略。该应用程序打开很快,但显示旧信息,并且用户看到过时的价格、状态或内容。在具有敏感数据的应用程序中,这会从一个麻烦变成一个严重的问题。

每天,添加到应用程序的每个新功能都应该提出一个问题:应该如何缓存?将这个问题视为开发的一部分,而不是细节,才是将性能和正确性结合在一起的原因。

无痛版本控制和更新

一个典型的 [PWA8 问题是用户陷入旧版本,因为服务工作线程一直为旧缓存提供服务。您发布更正,但用户看不到它,因为他们的应用程序坚持显示他们保存的内容。

解决这个问题需要缓存版本控制和服务工作线程更新策略。当新版本发布时,应用程序需要注意到、下载新内容并以受控方式激活它,理想情况下通知用户或在下次打开时更新。

每次交付时都需要测试此流程。我见过一些团队发布了紧急修复程序,但由于缓存管理不善而根本无法到达用户手中。该修复程序存在于服务器上,但在设备上毫无用处。这里的性能包括快速修补的能力,这取决于更新周期是否有效。

测量是日常工作的一部分

你无法照顾你不衡量的东西。 [PWA9] 的性能需要用真实数据进行监控,而不仅仅是“它在我的机器上很快”的印象。

Web 性能审核工具有助于测量加载时间、资源大小和离线操作的质量。感知负载指标,即用户在屏幕上看到有用内容的速度,比孤立的技术数字更能说明体验。

理想的情况是将此测量合并到交付流程中,以便在性能下降到达用户之前捕获它们。一个既快又慢的应用程序很少会同时变得更糟。情况一点一点地变得更糟,交付量无人测量。持续测量可以将绩效从运气转变为可控。

PWA 的局限性和陷阱

尽管我捍卫[PWA10],但重要的是要认识到它的局限性,以免兜售幻觉。在某些系统中,对设备资源的访问甚至比本机应用程序更受限制。通知和安装行为因平台而异。有些硬件功能是 PWA 无法达到相同深度的。

此外,网络本身的灵活性可能会导致应用程序臃肿。如果没有纪律,很容易积累库、脚本和样式,从而降低负载。 [PWA11 不能修复错误代码;它只是在上面添加了一层。打开 PWA 后,基地的糟糕表现仍然很糟糕。

最大的陷阱是自满。由于 PWA“看起来”像一个应用程序,并且在首次加载后会快速打开,因此很容易停止测量和维护。性能下降悄无声息地到来,当有人注意到时,恢复性能的成本比维持性能的成本还要高。

[PWA13对于任何想要应用程序质量的网络覆盖范围的人来说都是一项出色的技术,只要他们明白这种质量是持续关注的结果。只有每天都有纪律,第一天的速度才能保持。

如果您的团队维护 [PWA14] 并希望构建绩效护理例程,博客上还有其他有关网络、绩效和开发的文本。如果您想谈论您的产品,我随时为您服务。

另请阅读

  • [面向初学者的渐进式 Web 应用程序:示例和简单优化15
  • [PWA:什么是以及如何优化扩展性能16
  • [Web 应用程序的延迟:每个团队都需要了解的基础知识17
  • [渐进式Web应用程序:公司示例和优化18
  • [面向初创公司的 PWA:渐进式 Web 应用程序是正确的选择19
  • [何时使用 PWA:企业安全20