渐进式 Web 应用程序:您需要了解的业务知识

已发表: 2020-03-08

渐进式网络应用程序。

如果您听说过它,然后将其置于次要地位,那么您只是让您的对手松了一口气! 他们要担心的竞争对手少了一个!

尽管它非常有效,但它仍然是大多数行业的流行语。 这就是为什么我们会详细讨论它,以便您可以利用它的优势来加速您的业务增长。

在我们开始告诉你 PWA 的故事之前,让我们向你展示一些东西:

(图片来源)

我们在上面的数据中观察到了一些非常有趣的东西。 观察结果是:

人们花在移动应用程序上的时间是他们在移动网络浏览器上花费的时间的 7 倍。

数据还揭示了一些让我们相当困惑的事情!

尽管移动网络浏览器的使用时间较短,但它们获得的独立访问者的流量是移动应用程序的两倍多!

您现在一定想知道是否可以两全其美:移动应用程序的更长会话持续时间和移动网络浏览器惊人的流量。

这就是 PWA 的用武之地。该技术可以加剧您的网站转换并最终增加您的银行账户!

我们将介绍:

  • PWA 是什么。
  • 为什么您的企业需要基于 PWA 的站点。
  • 设计 PWA 网站时的最佳实践是什么?
  • 开发 PWA 网站时需要克服的挑战。
  • 如何通过 PWA 网站提供出色的用户体验。
  • 您将如何敦促人们安装您的 PWA 站点。
  • PWA 的缺点以及如何克服它们。
  • 您需要知道答案的其他 PWA 相关问题。

好奇的? 好,那我们就开始游览吧!

PWA 究竟是什么?

PWA 是首字母缩写词。 它代表渐进式网络应用程序。

通俗地说,它基本上是一个网站,可以在您的智能手机中呈现原生应用程序的流畅感。 您可以像访问任何网站一样通过移动网络浏览器访问它。

它的酷炫之处在于,您可以将 PWA 添加到您的主屏幕并使用它,就像您在智能手机中使用 Facebook、Messenger、Instagram 或任何其他应用程序一样。

看一看:

(图片来源)

(图片来源)

现在让我们来了解一下技术。

PWA 是基于 JavaScript 的网络技术。

它需要开发以下组件:

  • 服务工作者
  • 清单文件
  • HTTPS

1. Service Worker 是一个 JavaScript 代码元素,它使您即使在离线时也可以访问 PWA。 此外,它管理着 PWA 网站著名的“推送通知”功能。

2. Manifest.json 是一个 JSON 文件(它是一种类似于 pdf 或 jpg 的文件格式),其中包含当您将 PWA 站点添加到主屏幕并像本地应用程序一样使用它时所需的信息。

(图片来源)

正如你在上面的演示图片中看到的,当点击蓝色的“添加到主屏幕”按钮时,React PWA 的应用程序图标和短名称会自动出现。 发生这种情况是因为 React PWA 的 manifest.json 文件包含所有信息,包括应用程序图标、短名称、背景颜色、主题和其他有关其界面的信息。

3. HTTPS 是一种通信媒介,Service Worker 可以通过它安全地获取您的站点以显示在个人设备上。

为什么您的企业需要 PWA 站点

上述三个组件共同为您提供以下好处:

  • 您的网站即使在离线模式下也能正常运行
  • 它呈现了类似应用程序的体验
  • 它能够自我更新
  • 很容易被搜索引擎发现

这些功能如何转化为您的业务收益? 好好振作起来!

您的网站即使在离线模式下也能正常运行

首先,即使一个人离线,也可以访问 PWA 站点。

这意味着您的潜在客户(和现有客户)将能够浏览您的网站并执行诸如订购产品或服务之类的操作。

这不仅使您的网站更有用,而且还提供更令人愉悦的客户体验并推动转换!

它呈现无缝的类似应用程序的体验

说到移动优先方法,可以肯定地说,PWA 已经上过最好的大学,并以出色的成绩掌握了它!

听起来是不是太多了? 我们向您保证它不是!

PWA 网站在所有设备(无论是智能手机、平板电脑还是台式机)上都具有无缝且相同的显示效果,同时占用的空间比原生应用程序少! Twitter 充分利用了其 PWA,将其推文数量猛增了 75%! 它还为他们带来了 20% 的跳出率!

虽然实现像 Twitter 这样令人印象深刻的结果可能并不那么容易,但可以通过 PWA 提供的交互和导航舒适度提供更好的用户体验!

因此,您的访问者最终可能会成为您的回头客,对您的 PWA 提供的其他很酷的功能感到高兴,从而使您的银行账户膨胀。

它能够自我更新

想象一下不需要手动更新智能手机中的应用程序。 甚至想到它就会让你放松(可能是核心)! 这恰好是 PWA 网站的众多很酷的功能之一!

凭借其预缓存功能,它可以自动更新自身。 而且还不止于此!

如果您将 PWA 站点的任何更新发布到站点服务器,您站点的应用程序版本也能够获取更新的内容! 因此,它可以为您省去为应用程序发布单独更新文件的麻烦,同时让您的客户免于记住更新您的 PWA 应用程序的麻烦。

很容易被搜索引擎发现

与原生应用不同,PWA 应用可以被搜索引擎索引。 这使您能够获得基本免费的 PWA 网站的自然流量(前提是您在 SERP 中排名)!

由于每 10 个在线体验中有超过 9 个是从搜索开始的,因此不利用通过在 SERP 中排名可以获得的潜在大量流量是不明智的。

(图片来源)

正如您在上图中清楚地看到的那样,找到您网站的人越多,他们点击并最终转化的机会就越大! 结合流畅的用户体验、独特的更新部署能力(如果你更新你的 PWA 站点,应用程序版本也会更新)和自我更新功能,推动你的业务增长会容易得多!

设计 PWA 网站时的最佳实践是什么?

因此,您已决定为您的业务开发 PWA 站点或将现有站点转换为 PWA。

伟大的决定! 您将对您的业务大有裨益!

但在您联系开发机构(或自己动手)之前,您必须牢记一些因素,才能打造出色的 PWA 站点。

系统字体的使用

每个操作系统(android、iOS、Windows)都有自己的文本字体。 如果您的 PWA 使用系统的原生字体显示其内容,客户会发现它更具吸引力,从而更加关注您的内容。

允许轻松共享内容

在这个社交媒体时代,任何网络内容都必须易于在网络上共享内容。 因此,您必须提供轻松共享 PWA 站点链接的选项。

我们建议您在 PWA 底部放置一个汉堡式按钮,以便用户的拇指可以轻松地在移动屏幕上触及。 而且由于您所有的社交分享按钮都将隐藏在汉堡按钮中,因此界面看起来会干净很多。

保持整洁和精简

一个整洁、精简的 PWA 网站将提供更好的类似应用程序的体验。 事实上,PWA 的关键特性之一是它为网络带来了类似应用程序的体验。

提供这种体验的最佳方式之一是使用健康的空白空间。 这种做法将帮助您的 PWA 站点采用时尚、简约的界面,您的客户会发现该界面更符合他们的习惯。

在上一个列表页面上保持滚动

当您的访问者点击“返回”按钮时,他们不仅应该被带到之前浏览过的页面,而且还应该被带到他们正在查看的特定部分。 这听起来很简单,但它提供了极大的舒适感,因为人们不必滚动来找到他们所在的位置。

黑暗主题

由于人们将大约三分之一的醒着时间花在智能手机上,因此提供以深色主题查看 PWA 网站的选项至关重要。

这实现了两件事。

首先,人们会将您的网站与其他流行平台(例如 Twitter、FB messenger)相关联。

其次,您的网站对眼睛友好,有助于提升用户体验!

开发 PWA 网站时您(可能)面临的挑战

电池使用率高

由于 PWA 通常使用 JavaScript(它不是 iOS 或 Android 的本地语言)开发,因此它们需要智能手机电池才能更努力地工作。 因此,在运行 PWA 应用程序时,设备电池消耗得更快。

如何克服它:无论您是自己开发自己的 PWA 还是选择了一个开发农场来为您开发,请确保 JavaScript 代码主干已针对错误进行了优化!

限制访问设备功能

由于 PWA 应用程序不是“原生”应用程序,因此它们无法访问设备的许多国内功能,例如蓝牙、接近传感器、高级相机控制、高度计等。 这将限制用户感知您的内容的方式。

如何克服它:在为您的 PWA 网站设计内容时,将您的创新能力发挥到极致,这样就可以使用设备的少数国内功能来使用它们。

与较旧的苹果设备或 iOS 版本集成

尽管自 iOS 11.3 起就允许 PWA 运行,但它们无法在大多数较旧的 Apple 设备上运行。 由于 Apple 设备相对昂贵,并非所有用户都会购买最新的设备或更新他们的操作系统。

你将如何推广你的 PWA 网站

现在您已经开发了 PWA 站点,是时候让人们了解它,以便他们可以访问您的服务并从中受益。

说到推广你的 PWA,它有两个方面。

那些是:

  • 你想推广你的 PWA 应用版本的安装
  • 您想推广您的 PWA 网站以提高其获得的流量

让我们一一讨论它们。

促进 PWA 应用安装

有多种方法可以促进 PWA 的安装。 在这里,我们将介绍您的 PWA 网站上的促销活动。

最初,我们将讨论推广安装在您网站上的应用程序的最佳做法。

他们来了:

将应用推广置于用户旅程之外

例如,在您的 PWA 站点登录页面上,将应用安装 CTA 放在登录表单和“提交”按钮下方。 这样人们就不会因为完成登录操作而分心。

保留拒绝或取消促销的直观选项

某些促销活动需要单击十字按钮。 Windows 用户习惯于在右侧使用“十字”按钮,而 Apple MacBook 用户则使用该按钮。 因此,无论你把它放在哪里,都要确保它很大并且很容易看到。

适度使用应用推广

太多会对你的 PWA 网站的用户体验产生负面影响。

促销应仅在检测到 beforeinstallprompt 时显示

这个 BeforeInstallPrompt 是一个 JavaScript 代码片段,您需要将其嵌入到您的 PWA 站点代码结构中。 它检测触发应用推广的某些用户交互(到达您网站的某个部分,点击某个按钮)。

介绍了最佳实践后,现在让我们继续在您的 PWA 网站上进行应用推广。

你的 PWA 网站上有几个地方可以放置应用推广。 这些是:

1. 导航菜单

(图片来源)

这是您 PWA 应用推广的有效场所。 这是因为打开导航菜单表明用户参与度很高。

你需要记住的:

  • 如上图所示,将促销放在菜单项下方以避免干扰用户注意力。
  • 显示简短的相关宣传,告知用户将如何从安装您的 PWA 应用程序中受益。

2.登陆页面

着陆页用于宣传产品或服务。 因此,它是推广您的 PWA 应用程序安装的理想场所。

你需要记住的:

  • 确保您独特的价值主张非常吸引人,并且与用户痛点相关。
  • 告知人们他们将从应用程序中获得什么。
  • 在着陆页内容中包含首先将人们带到您的着陆页的关键字。
  • 使 CTA 引人注目并将其放置在着陆页上的战略位置。

3. 页顶固定页眉

由于标题是网站中最显眼的部分,因此这是一个非常理想的地方来宣传您的应用程序。

你需要记住的:

  • 并非所有用户都会对这种促销方法做出积极反应。 因此,请确保它仅向表现出特定参与迹象的人显示。
  • 在急于采用这种应用推广方法之前,请先将其与您可以放置​​在标题中的其他元素进行权衡。 您的最终目标是获得更多符合销售条件的潜在客户,而不仅仅是获得更多应用用户。

4. 页面顶部/底部的粘性可关闭安装横幅

大多数人都在一个网站或另一个网站上遇到过安装横幅或横幅。 这意味着他们熟悉以这种方式展示的促销活动。

你需要记住的:

  • 此类横幅可能极具破坏性。 因此,请确保在用户触发精心选择的转化事件后显示它,该事件表明与您的内容更深入地互动。
  • 在横幅中,包含一段简短的文字,告知用户您的应用程序将提供的价值,例如:“即使离线也能阅读我们的内容”。 选择此文本时,请确保它与您的用户所在的 PWA 网站部分、您网站的内容和总体主题、检测到的用户参与度、用户位置(如果与网站内容相关)、用户行为高度相关等等。

5. 在信息列表或文章之间

正如标题所说,这种促销出现在您网站上的文章或信息块之间。 如果用户已经到达文章中的特定点,则意味着重要的参与度,并且文章宣传中的位置可能表现最佳。 此类促销的目标通常是告知用户访问他们当前正在欣赏的内容的更简单方法。

你需要记住的:

  • 不要过度使用它。 它只会惹恼您的用户。
  • 保持取消促销的方法可用,并确保记住用户取消它的选择。
  • 如上图所示,促销中的文字必须高度相关,同时宣传获得应用程序的好处。

推广你的 PWA 网站

就此事而言,推广您的 PWA 与推广任何网站没有什么不同。 此外,网站推广本身就需要一个完整的讨论。 因此,我们将在这里讨论一些关键的促销手段。

1. 使用社交媒体作为跳板

社交媒体不仅功能强大,而且是传播内容和与目标受众互动的极其有效的平台。 因此,我们将其放在第一位。

让我们快速提一下我们的许多客户已经受益的一些技巧:

  • 在您的 Instagram 个人资料中放置指向与您最近发布的帖子相对应的 PWA 网站各个部分的链接。 这不仅可以提供丰富的无缝用户体验,还有助于提高转化率。
  • 请求您现有的关注者群分享您的 PWA 网站 URL,以获得忠诚度积分。 这为他们提供了推广您网站的动力,增强了您与受众的互动并增加了网站流量。
  • 创建与您的利基相匹配的竞赛和赠品,人们可以通过共享您的 PWA URL 参与其中。

2. 获得推荐

这恰好是为您的网站带来流量的最真实和最有效的方式之一。 这可以通过各种方式来完成,例如链接交换、访客帖子作者简介中的链接等。

无论您选择哪种方法,尽量获得最大的 Dofollow 链接,因为它们有助于传递链接汁。 报酬? 显着提高您的 SERP 排名,进而提高自然流量!

3. 在目录中注册

在业务解决方案方面,目录受到客户的信任。 其中包括但不限于 Yelp、Google 我的商家和 FourSquare。 其中大部分是免费的,并将您的 PWA 站点作为可靠的解决方案暴露给本地和全球流量。

4.利用无所不在的显示

在为促销空间集思广益时,这些展示空间通常不会让您想到,但在建立更强大的数字形象和直接访问您的网站方面非常有效。 一些很棒的例子是电子邮件签名、名片、你在活动中展示的实体横幅等。

PWA 构建器软件 Vs. 聘请代理机构

有很多工具可以让您从现有网站构建 PWA 网站。 可以想象,它们都是付费工具。 尽管如此,它们提供了一系列有吸引力的好处。 那些是:

  • 无需与开发团队会面
  • 固定月/年计费
  • PWA站点的快速交付

现在让我们谈谈聘请代理机构来开发您的自定义 PWA 的一些好处。

  • 您可以拥有自定义功能,帮助您在竞争对手中脱颖而出。
  • 从 PWA 专业人士处获取实时建议。
  • 可以选择从大量成功的 PWA 模板中进行选择。
  • 免除维护和更新的麻烦。
  • 即时(几乎总是)客户服务。

聘请 PWA 开发机构的一个主要挫折是,它比 PWA 构建器工具花费更多。 因此,您必须做出最适合您的财务能力和业务需求的选择。

测试你的 PWA 网站

如果你已经开发了 PWA 网站,那么请不要打开香槟酒瓶.......但是! 还有工作要做!

在开始网站营销活动之前,您必须验证 PWA 网站的几个方面。 这些方面对于您网站的可靠和一致的性能至关重要。

以下是您需要测试的 PWA 网站的各个方面:

1. 添加到主页提示

由于您的 PWA 不是本机应用程序,因此它不会在 Apple 应用程序商店或 Google Play 商店中提供。 您的网站访问者可以在他们的智能手机上获取您的 PWA 应用程序的唯一方法是通过添加到主页提示。 因此,我们建议您先检查再做其他事情。

2.离线加载

PWA 站点的一个关键特性是,即使在连接性较差的情况下(例如是飞机模式),它们也能够加载功能元素。 由于 PWA 网站的这一功能将成为您营销策略的基石之一,因此您必须验证 PWA 的离线加载能力。

3. 响应能力

响应性不再被视为网站或应用程序的一项令人兴奋的功能。 它已被大规模视为理所当然,并且不会恢复。 因此,任何通过智能手机、平板电脑或台式机访问您网站的人都希望您的网站能够根据屏幕大小自行调整。 这意味着地球上没有这个因素最终会出现在您的“稍后检查”列表中。

提示

Mozilla Firefox 浏览器是您可以用于此目的的有效且免费的工具。

  • 只需在桌面上打开 Mozilla。
  • 在地址栏中键入 PWA 站点的 URL。
  • Ctrl+Shift+M ,您的站点将在响应性测试环境中打开。

上图中是在 Mozilla 测试环境中在 iPad 窗口中打开悉尼先驱晨报网站的屏幕截图。

如果仔细查看,您会在地址栏下方看到几个选项卡。

最左边的让您选择要在其中查看站点预览的设备。您还可以检查各种类型的连接(例如 2G、3G 等)的加载速度时间。

4. 跨浏览器测试

不知道您的用户可能从哪个浏览器登录到您的 PWA 站点。 因此,确保您的网站在每个浏览器中都能提供最佳性能不仅重要而且是强制性的!

5. 联网测试

并非所有访问者都会通过 5G 或宽带连接到达您的站点。 有些人甚至可能在使用 3G! 无论客户网络如何,为了确保流畅的用户体验,强烈建议您在各种连接下测试您的站点。

为此,您可以使用 Mozilla Firefox 浏览器的测试功能。 除了网络测试外,您还可以通过此功能检查 PWA 站点的响应能力。

6. 加载时间测试

随着人们的注意力不断下降,您的网站在 2 秒内加载(越快越好)至关重要! 尽管 PWA 站点以其低加载时间而闻名,但最好还是保持安全并测试您的站点加载时间。

GTmetrix 是一款免费且广受欢迎的工具,您可以使用它来准确测试站点加载时间。 它还提供了一份详细的报告,显示可能会减慢您网站速度的任何元素。

让 PWA 引领您的企业走向未来

由于包括 Twitter、优步和 Pinterest 在内的各个行业的大人物已经将 PWA 应用到他们的数字业务中,其他人会效仿只是时间问题。 在您知道之前,它很可能被认为是理所当然的(就像移动响应一样)。

因此,如果您在竞争对手中获得竞争优势并向不断扩大的客户群提供有价值的服务/产品,请开发您的 PWA 网站! 让它为您的数字存在开辟道路!