用户对安装在其手机或计算机上的应用程序抱有很高的期望而渐进是Web应用程序及PWA使您能够满足这些高期望大家好 我是Cecilia来自Google的一名Web Ecosystem Consultant在今天的内容中我想向您展示一些技巧来帮助您满足用户对Web应用所持有的高期望以及如何分析PWA是成功的好的 让我们一起来一探究竟吧您上一次遇到网站由于离线或连接太慢而崩溃是什么时候也许还没有遇到过这种问题但如果您安装了某个应用无论网络状况如何您应该都会期待它能够正常工作对于PWA来说也是如此但坦率的说在考虑要提供怎样的离线体验的时候需要考虑很多因素如果用户在无网络连接的情况下启动PWA该怎么办如果用户中途掉线又该怎么办实现完全的离线体验可能会花一些时间尤其是当您在现有代码库中改进时更是如此快速开启离线体验的一种方法是提供自定义的离线回退页面该页面会在用户处于离线或网络断开时显示有些网站如德国的LaCasa甚至在它的离线页面上提供游戏吸引用户留在网站那么如何创建自定义的离线回退页面呢首先我们来看看离线页面的HTML元素为了确保各种元素尽可能简单我们可以阴烂内嵌回退页面所需的一切内容CSS,JavaScript,任何图片,任何内容都应该进行内嵌离线页面还应该足够简洁不要提供指向网站其他部分的链接也不必提供指向社交媒体网站的链接因为用户这是正处于离线状态网络恢复后页面应该做到自动重新加载这时用户可以继续他们之前的操作因此我们需要监听online事件如果触发该事件则重新加载页面但是由于online事件并非始终正确所以需要定期发送fetch请求来检查网络状态如果请求返回200则重新加载页面现在我们来快速看一下service worker使用install事件作为缓存离线页面的实际使用fetch事件处理脚本是很关键的一环但是它应该仅用来处理navigation事件无需用它来为离线页面发送任何内容如果是navigation事件则会使用respondwith尝试从网络获取相应页面但如果失败则从缓存中返回离线页面我们来实际操作看看当我首次触发navigate到相应页面时我发现service worker已经安装并且已经缓存了离线页面现在如果我离线并重新加载我将会看到离线回退页面在devtools中我可以看到应用定期发出fetch请求以检查网络状态而当网络恢复时页面会自动刷新我也可以继续操作了到这里我们已经知道如何快速的创建离线回退页面了大家可以在web.dev上查看完整代码可以把它复制粘贴到您的pwa代码中此外还包括用于navigation preload的重要优化另一个要考虑的因素是页面没有任何分析数据所以您无法追踪用户查看离线页面的频率对此问题我们建议使用workbox这个内置插件可以帮助我们综合全面的进行离线数据分析和页面回退处理您的应用是否会提供给用户一些需要经常执行的常见功能例如推特增加了各种快捷键来让用户轻松编写新的推文了解最新新闻查看通知或发送聊天消息向pwa添加快捷键只需要更新web manifest文件即可方法是添加新的shortcards属性对于每个快捷键您需要提供相应快捷键的显示名称用户启动快捷键时打开的网址以及可选的添加一系列图标包括每个图标的来源大小和类型做好测试准备后快速浏览一下devtools中application的清单验证所有内容是否准确无误快捷方式是为用户提供更集成体验的最简单的方法之一您可以在Android和Windows平台上使用他们将来也会有更多平台支持这项功能目前还没有用于本地话webapp manifest的内置机制如果您的用户使用不同的语言而您想要提供本地话体验怎么办如果要本地话应用名称快捷键或图标您需要为每一种语言单独创建Manifest文件例如要提供英语版和法语版Scoosh需要创建两个单独的Manifest文件每一种语言一个这个操作很简单但是我们如何让浏览器知道Manifest文件已经本地话了呢我们建议在服务器中使用AcceptLanguageHttpHeader确定要发送哪一个Manifest文件这样浏览器就会始终调用相同的文件名但会根据用户的首选语言获得不同的内容要利用Firebase Hosting完成这个操作需要创建一个Localized Files目录并将本地话的Manifest文件放入相应的Folder中然后在Firebase JSON文件中添加一个i18n属性服务器会根据用户的首选语言向用户提供相应的Manifest文件如果是法语则从法语目录中获取文件不同服务器的配置会有所不同但这一概念是相同的如果您想更进一步可以在应用程序中提供一个语言选择器它可以根据用户的选择设置Cookie然后使用Cookie来传送已经本地话的Manifest文件这种做法的优点是如果用户之后更改首选语言Manifest文件仍位于同一路径下在许多情况下PWA会根据用户的首选语言自动更新如需进一步了解Chrome如何处理对Manifest文件的更改以及哪些属性会触发更新请查看屏幕上方的这篇文章以了解更多内容我经常被问到的一个问题是如何衡量安装体验的有效性以及哪些方法最有效提高安装率的第一步其实是要掌握相应的分析数据下面我们来看看Scoosh这个webapp是如何衡量安装有效性的以及您应该如何衡量自己的PWA安装效果首先我们先来追踪自定义安装提示的频率我们在这里需要监听before install prompt 事件当PWA满足可安装性标准时会触发这个事件这个事件被触发时我们可以展示自定义的PWA安装体验Install Source 变量将帮助我们了解安装来源以及每种来源的有效程度此外它还可以显示安装是来自浏览器还是来自自定义的安装体验在有多个自定义安装的情况下这一点尤其重要例如位于页面头部的安装按钮以内嵌方式与其他内容一起显示的安装提示在关键动作结束时显示的安装提示按钮在Before Install Prompt 事件中将该事件记录到分析工具中为确保一致性这里所有的安装事件都使用相同的类别PWA Install在这里Event Action 是 Promotion以及 Non-Interaction 为 True这里的意思是把非交互属性设置为 True因为这事件不是由用户操作生成的现在我们可以衡量自定义安装提示的频率了接下来我们来衡量用户点击自定义安装的频率以及他们最后是否完成了安装就像我们之前说的我们想知道安装来自哪里所以我们将Install Source设置为Header Install Button每个安装元素都应该有自己的唯一ID然后调用Differ Prompt.Prompt以启动自定义安装流程并向用户显示浏览器安装提示等待用户响应提示并做出选择动作然后将事件记录到分析工具中和之前一样我们类别是PWA Install但现在的Event Action是Prompt.Clicked使用Install Source作为事件标签来标识用户是点击哪个自定义安装推送来开始安装的并将事件值设置为1或0具体取决于用户点击接受还是关闭在分析工具中这个信息将告诉我们完成该向安装的用户百分比最后我们需要监听App Install事件这会告诉我们PWA是什么时候被安装的包括从浏览器安装的时间如果用户打开了多个浏览器选项卡或窗口则会在所有选项卡或窗口中触发App Install事件所以为了避免重复记录安装事件请仅在页面可见时记录该事件接下来检查Install Source安装动作是来自UI中的某个元素还是来自浏览器然后记录该事件下面我们来看看Scoosh在Google Analytics上的分析数据看看它运作的如何在Events分类下的Top Events中点击PWA Install它将显示该类别的所有操作我可以看到显示自定义安装的展示次数点击安装提示的频率并且可以深入查看点击了哪个安装提示对Scoosh来说我们只有一个安装按钮但是查看事件值我们可以发现在点击安装提示后64%的用户继续完成了PWA的安装而且通过查看安装操作的详细信息我们可以看到来自自定义安装提示与来自浏览器安装提示的安装百分比现在您已经了解了安装体验的有效性是怎样的我们再来介绍一下如何区分安装了PWA的用户与浏览器中没有安装的用户并以此来衡量PWA带来的价值和影响为了在Scoosh中衡量这一点我们创建了一个限定用户范围的自定义维度也就是显示模式Display ModeScoosh启动后我们使用Match Media检查CSS显示模式然后将自定义维度设置为Browser或Standalone这同样适用于将PWA添加到主屏幕的Safari用户也就是说您无需再使用Navigator到Standalone了此外还需要在AppInstall的事件中将维度设置为Standalone否则安装后这些用户仍会被视为普通的未安装PWA的浏览器用户我们来快速看一下它在Google Analytics中是如何呈现的我们创建了一个用于监控用户关键行为的自定义报告例如每个用户的Session数平均Session持续时间每个Session的事件数转化率这里我们的定义是用户压缩图像以及其他一些行为接下来我按之前创建的自定义维度也就是Display Mode 显示模式对各类数据进行分类通过查看报告我们可以看出安装了Scoosh的用户比未安装的浏览器用户相比参与度更高它们更频繁的回访Scoosh在该应用中花费的时间也更多并且它们的转化率也更高在您的应用中定义转化率的依据会有所不同所以需要根据实际需求调整报告但核心方法正如我们介绍的这样是不变的好了我们来总结一下今天的内容我们演示了如何提供自定义离线回退页面一面离线页面上的小恐龙的出现并确保PWA保持可安装性以适应即将在Chrome93推出的新的PWA可安装性标准及提供离线回退页面如何更加轻松的让用户利用快捷方式开启常见功能如何为已经安装了PWA的用户提供本地化体验如何衡量安装体验的有效性如何使用分析数据证明投资PWA是成功的正确的选择您可以访问屏幕上的链接了解更多详情并查看各个势力中使用的实际代码感谢观看再见