[译] 推广安装 PWA 的模式（移动端）

时间 2019-11-30

标签推广安装 pwa 模式移动栏目无线繁體版

原文原文链接

原文地址：Patterns for Promoting PWA Installation

原文做者：Peter Mclachlan

译文出自：掘金翻译计划

本文永久连接：github.com/xitu/gold-m…

译者：Sam

校对者：wuyanan，柯小基

渐进式网页应用（PWA）是一种模式，用于建立类应用程序，即时加载的，可靠的和可安装的网站。虽然 PWA 技术适用于包括桌面端在内的全部设备，本篇文章重点介绍移动端 PWA 安装推广模式。前端

为何你但愿用户在他们的主页安装你的应用？和你但愿用户从任何应用商店安装你的应用缘由是同样的。安装了应用的用户是你最需关注的群体。安装了 PWA 的用户比通常的访客拥有更好的参与度指标，包括更频繁的访问次数，在页面上更久的停留时间以及更高的用户转化率，这些特色基本能够和移动设备上的本机应用相匹敌了。android

若是你的 PWA 有助于让用户安装你 app 的场景，例如，用户每周使用你的应用超过一次，那么你应该在 app 里使用网页 UI 技术推广你 PWA 的安装。ios

注意： 有关实施 PWA 安装推广所需的代码，请参阅添加到主屏幕（Web）。git

PWA 安装推广的最佳实践

不管你在网站上使用哪一种推广模式，这些最佳作法都适用。github

将推广与你的用户操做流程相分离。举例来讲，在 PWA 的登陆页，将请求操做放在登录表单和提交按钮下方。混乱的使用推广模式会下降你 PWA 的可用性，而且会对参与度指标形成负面影响。
需包含关闭或减小推广的能力。若是他们这样作，请记住用户的偏好，而且只有在用户与你的应用内容的关系发生变化时才会从新提示，例如他们已登陆或完成购买。
能够在你 PWA 应用的不一样部分里结合使用多种技术，但请注意不要过多的推广安装或打扰到你的用户。记住第一条规则 #1！
仅在你检测到 beforeinstallprompt 事件被触发时才显示推广信息。

浏览器自动推广

在主屏页添加 AirHorner 迷你信息栏的示例。web

当你的 PWA 经过了 Android 上的可安装性检查清单时，浏览器就会告诉用户使用迷你信息栏 PWA 的可安装性。这个迷你信息栏只是一个辅助，将来它将被移除。后端

注意： 从 Chrome 76 版本开始，你能够经过在 beforeinstallprompt 事件上调用 preventDefault 阻止迷你信息栏出现。若是你不调用 preventDefault，该条目会在用户第一次访问你的站点时被显示出来，而且这符合安卓的可安装标准，而后在大约 90 天之后它会再次显示。浏览器

应用 UI 推广模式

应用 UI 推广模式几乎适用于任何类型的 PWA 应用并在诸如网站导航，banner 等 UI 层面上体现出来。和使用任何其余类型的推广模式同样，很重要的一点是关照到用户的使用环境，尽可能减小对用户操做流程的干扰。网络

在触发推广 UI 时，考虑周全的网站能够实现更多数量的安装，并避免干扰那些对安装不感兴趣的用户的操做流程。app

固定标题

这里有一个安装按钮，它是你网站标题的一部分。其余标题内容一般包含网站品牌信息，诸如 logo 图标或者汉堡菜单。标题是否 position:fixed 取决于你的站点功能和用户需求。

若是使用得当，在你的站点标题处推行 PWA 安装是一种很好的方式，由于这可让你的大多数忠实用户更轻松地回归到你的体验上来。PWA 标题里的每一个像素都颇有价值，因此请确保你的安装请求操做具备合适的大小，而且比其余任何可能的标题内容更重要，还不那么显眼。

你必须确保：

评估用户已安装用例的价值。考虑选择性定位的向那些可能从中受益的用户展现这些推广信息。
有效使用宝贵的标题空间。考虑在标题中能够为你的用户提供哪些其余帮助，并权衡安装推广相对于其余选项的优先级（译者注：也许其余选项比推广安装更重要）。

导航菜单

在侧边滑出导航菜单里添加安装按钮或推广信息。

导航菜单是推广安装应用的好地方，由于打开菜单的用户会发送与你的应用互动的相关信息。

请你确保：

避免破坏重要的导航内容。把 PWA 安装推广放在其余菜单项下面。
提供一个简短的相关说明，告诉用户安装 PWA 为何能带来好处。

落地页面

落地页的目的是宣传你的产品和服务，因此这里是一个适合大规模推广安装大家 PWA 应用优势的地方。

首先，介绍大家网站的价值主张，而后让访问者了解他们能从安装中获得什么。

请你确保：

着重突出对你的访客最重要的功能，并强调可能将他们带到你落地页的关键字。（译者注：也许是这些关键字让用户访问的落地页）
既然是落地页。在明确了你的价值主张以后，应当即进行安装推广并使用号召性用语！
考虑在用户花费大量时间的应用上添加安装推广。

安装 Banner

页面顶部可关闭的 banner。

大多数用户在手机体验中遇到过安装 banner，而且熟悉 banner 提供的交互功能。应谨慎使用 banner，由于它们会对用户体验形成极大的破坏。

请你确保：

在显示 banner 以前，请等待用户对你的站点表现出足够的兴趣。若是你的用户关闭了 banner，请不要再显示，除非用户触发了转化事件，代表和你的内容有更高的参与度，例如在电子商务网站上的消费行为或者注册成为一个帐号。
提供有关在 banner 中安装 PWA 的价值的简要说明。例如，你能够经过说起它的使用几乎不占用用户设备存储空间，也不会跳转到应用商店而是当即安装的方式，告诉用户安装一个 PWA 和本机应用的区别。

内在推广模式

内在推广技术将推广和站点内容交织在一块儿。这一般比应用 UI 上的推广更微妙一些，UI 具备权衡性。你但愿你的推广足够突出，感兴趣的用户可能会注意到它，但下降了用户体验就不太值得。

内反馈

在 PWA 中的新闻文章或其余信息卡列表之间出现的一个内反馈安装推广。

你的目的是向用户展现他们如何更方便地访问到他们正在享受的内容。专一推广那些对你的用户有用的特性和功能。

请你确保：

减小推广的频率以避免干扰到用户。
为用户提供关闭推广的能力。记住是你的用户选择去关闭

预约或结帐流程

在一系列流程进行或结束时展现安装推广，典型的是预约或结帐流程。若是你在用户完成了流程操做时显示推广，那么由于流程已经结束你可让它更加突出。

请你确保：

包含一个相关的号召性用语。哪些用户能够从安装你的应用中受益？为何？它与用户当下的操做流程有什么关系？
若是你的品牌为安装了应用的用户提供独特优惠，请务必在此处说起。
保证你的推广和流程的下一步是分离的，否则会对你的流程完成率形成负面影响。在上面的电子商务例子中，请注意关键结帐流程操做是在应用安装推广之上的。

注册，登陆或注销流程

这类推广是前文流程推广模式的一种特例，而且促销卡可能会是一个更好的例子。

这些页面一般只会被参与的用户看到，其中你的 PWA 价值主张已经创建了。在这些页面上一般也不会放置不少其余有用的信息。因此，只要不干扰正常操做，较大规模的宣传性用语也只会产生较少的破坏性。

请你确保：

避免在注册表单里破坏用户的操做流程。若是这是一个多步骤过程，你可能须要等到用户完成流程再展现。
向已注册用户推广最相关的功能。
考虑在你的应用登陆区域添加其余的安装推广。

我应该使用什么模式？

电子商户

许多电子商务品牌都拥有一批忠实的客户。这些客户想要推送通知，以便及早访问了解新的库存而且知道他们的商品何时发货。他们但愿在主屏幕上使用应用，以便快速访问目录和全屏体验。

适用于电子商务PWA的模式包括：

产品列表页 (PLP) 或者类别页面

这是内反馈安装推广模式的一个特例，这里的反馈是产品或类别列表。

请你确保：

匹配产品列表页面其他部分的外观。
不干扰用户选择产品的选择过程。

富媒体和通信

你是在构建下一个社交现象级或者音乐流媒应用吗？当用户第一次访问你的 PWA 应用时，邀请他们安装你的 PWA 是一种让他们再次回来的很好的方式。因为使用比本地应用更少的存储空间，你的用户会安装你的 PWA 并看看你的产品是否适合他们。

适用于富媒体和通讯 PWA 的模式包括：

新闻

若是你在面向内容的站点上工做，那么你可能会有对安装 PWA 感兴趣的常规用户。

适用于新闻和社交 PWA 的模式包括：

游戏

现代网络对游戏来讲是最伟大的分销平台，可让最大型的游戏抵达世界各地。

适用于 PWA 游戏的模式包括：

游戏结束

这实际上就是流程 UI 模式的一个特例。

大多数休闲和超级休闲游戏结束的很快。若是你的用户正在玩游戏，那么这是一个邀请他们安装的好机会。

若是发现译文存在错误或其余须要改进的地方，欢迎到掘金翻译计划对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

掘金翻译计划是一个翻译优质互联网技术文章的社区，文章来源为掘金上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注掘金翻译计划、官方微博、知乎专栏。