什么是 PWA？ 对非技术人员的简单解释

你应该事先知道这篇文章是从营销人员的角度写的。 （嗯，我可以读写一些 HTML 和 CSS，我可以在一定程度上理解 Javascript，但这并不能使我成为技术人员）。

什么是 PWA？

PWA （渐进式Web 应用程序）允许 Web 浏览器具有原生移动应用程序（即从 iOS 和 Android 商店下载的应用程序）的外观和感觉。 这些原生应用程序针对流畅的移动体验进行了优化，同时具有一些独特的功能，例如网络推送通知。 PWA 技术利用 Chrome 和 Safari 等浏览器上的网络冲浪体验，使其接近原生应用程序的体验。 结果，这增强了网络的流量和参与度。

该术语于 2015 年由 Google 首次引入。根据 Pete LePage – Google Developer Advocate 的说法，“进步”部分可以解释为“随着用户逐渐与应用程序建立关系，它变得越来越强大”。

PWA 和网站一样吗？

是的，渐进式 Web 应用程序是网站。

然而，由于现代网络技术，它们看起来和感觉就像一个应用程序。 这意味着用户将在他们的浏览器上使用 URL 浏览 Progressive Web Apps，就像他们浏览任何网站一样，但是在他们登陆 PWA 之后，他们就可以在浏览器上获得使用“应用程序”的体验，而无需下载并安装。

作为“应用程序”并不意味着 PWA 仅限于移动设备。 它们也可以在桌面上实现。 事实上，您可能之前经常访问 PWA，甚至没有意识到这一点。 如果您曾经在笔记本电脑上浏览过 Instagram、Pinterest 或 Tinder，那么恭喜您！ 您已经在网络上遇到了一些最成功的 PWA 采用者。

让我们看一个 PWA 网站的示例，因为它可以帮助您更轻松地理解 PWA。

PWA 示例

G-SP 电子商务网站是一个 PWA。 当您在手机上访问网站时，您实际上可以将网站 URL 添加到手机主屏幕。

然后，只要您想重新访问该网站，它就在您的主屏幕上，并带有一个图标，就像 Facebook 或 Linkedin 等任何其他应用程序一样。

从主屏幕打开 G-SP 网络应用程序，您可以看到网站现在是全屏的，没有浏览器的搜索栏。 此外，它的底部还有一个类似应用程序的导航菜单。 更重要的是，当您滚动并点击时，感觉就像黄油一样光滑，这与您之前可能拥有的一些网页浏览体验不同。

 推荐阅读：
- G-SP PWA 案例研究：一流移动体验的转变
- PWA 的前 3 个用例

判断网站是否为 PWA 的提示

除非您是开发人员并深入研究该网站的源代码，否则您无法准确判断网站是否基于 PWA 技术构建。

话虽如此，有一些技巧虽然不能保证准确的结果，但可以给你一些迹象，表明给定的网站是 PWA。

单页网站

这是判断网站是否是 PWA 的最简单方法。 它基于 PWA 的性质：Progressive Web Apps 在技术上是一个单页网站。 这并不意味着基于 PWA 构建的网站只有一个页面。 这意味着页面查看事件只发生一次，当用户最初加载网站时。 之后，所有页面加载都由 Javascript 处理。 这与普通网站不同，其中每个页面更改都会导致页面及其整个 HTML 源重新加载。

那么这是如何工作的呢？ 好吧，很简单：看看浏览器上的活动标签。 如果站点是 PWA，当您更改页面时站点不会重新加载，这意味着浏览器选项卡上没有“加载”动画。

我们可以看出《纽约时报》网站不是 PWA：

让我们以我们的网站 SimiCart 为例：

明白了吗？ 当您更改页面时，该网站不会重新加载！ 从技术上讲，您只是一直停留在一个“页面”上。 这就是 PWA 页面加载如此快速和流畅的原因。 所有页面都是在您第一次访问该网站时预加载的，之后会交付给您。 它们不依赖于您的网络速度，甚至可以离线工作！

服务人员

不，这不是人类工人。 Service Workers 是 Progressive Web App 背后的技术名称，它支持其离线功能、推送通知和资源缓存。 根据 Google 的说法，Service Worker 是 PWA 技术的核心。 因此，如果我们能够确定一个网站是否使用了 Service Workers 技术，我们就可以判断该网站是否可能是PWA。

如果您使用的是基于 Chrome 的浏览器，则可以使用 Inspector Tool 轻松检查。 右键单击要检查的网站，单击检查元素。 然后，转到应用程序选项卡 > Service Worker。 您可以轻松查看该站点上是否有任何 Service Worker。

同样，这个技巧只会提示您某个网站是 PWA 的可能性。 虽然是 PWA 的核心部分，但 Service Worker 并不是 PWA 独有的。 非 PWA 网站也可以利用 Service Worker 来增强其功能。

如果您想了解有关 PWA Service Worker 的更多信息，我们有独家文章供您了解有关这项惊人技术的所有信息。

HTTPS 安全来源

但是，您可以通过查看其 URL 来准确判断网站是否不是PWA。 如果网站的 URL 以http://而不是https://开头，则它不是 PWA。 这是因为 PWA 只能在运行在安全域（即HTTPS ）上的网站上运行。

PWA 有多受欢迎？

正如 Google 所暗示的那样，PWA 是“移动应用程序的未来”，PWA 越来越受欢迎，首先是在大型企业中，然后是小型企业和组织。

它推动着几乎无处不在的竞争——从 Windows 平台到 Google Play 商店等主要应用市场

你会发现很多大牌的网站都是PWA，比如Telegram、AliExpress、FlipBoard，甚至是熟悉的PWA游戏的PWA版本，比如2048或Web Flap。

PWA 的好处：Progressive Web Apps 可以做什么？

在撰写本文时，PWA 已经可以完成大部分以前原生应用程序独有的事情。 这包括访问设备级功能，如摄像头和麦克风、GPS、离线模式、文件访问等等。 要了解 PWA 的功能，您可以查看https://whatpwacando.today/ 。

因此，对于那些想要在不投资移动应用程序的情况下改善其品牌在线移动体验的人来说，网络应用程序是一个很好的选择。

让我们更深入地了解 PWA 相对于普通移动应用程序和响应式网站的优势：

PWA 与响应式网站

与网站相比，PWA 更胜一筹，原因如下：

• 速度：由于Service Workers 技术，在相同内容的情况下，PWA 的加载速度比普通网站更快。 它在第一次加载时很快，在第二次加载时甚至更快，因为它预先缓存了所有内容并在需要时交付它们。
• 离线模式：Service Workers 技术也使离线可用性成为可能。 通过正确集成服务工作者，所有内容都会在您第一次访问 PWA 时预加载，然后使用 Javascript 交付，这使得 PWA 成为必须获得不间断体验的网站的新首选方法。 我们有一份关于如何让您的 PWA 离线工作的指南，以备您需要时使用。
• Web 推送通知：就像原生移动应用程序一样，PWA 可以直接从移动 Web 浏览器向用户的主屏幕发送推送通知。 这对于电子商务商店向其客户发送个性化交易和优惠特别有用。 PWA Android 的 Web 推送已经启用了很长时间，幸运的是，它很快就会来到 PWA iOS。
• 添加到主屏幕：此功能提示移动用户“安装” PWA。 用户接受提示后，PWA 将被添加到他们的移动主屏幕，它会像任何其他已安装的应用程序一样运行。 这是我们将 PWA 添加到主屏幕的指南。 不要错过！

Chrome 上旧的“添加到主屏幕”提示将如下所示：

 >> 推荐阅读：PWA vs Responsive Website 全对比

PWA 与原生应用

PWA 不仅比网站更好，而且品牌现在也选择 PWA 而不是原生应用程序，因为 PWA 带来了以下好处：

• 跨平台：构建 PWA 后，可以通过任何移动平台（如 Android、iOS 或 Windows）访问它，因为 PWA 是基于浏览器的，而不是基于操作系统的。
• 最新：一旦用户刷新页面，对 PWA 所做的更改将立即生效。
• 可索引性：因为 PWA 在技术上仍然是一个网站，所以它的内容可以在谷歌等搜索引擎上被索引和发现。 这为 SEO（搜索引擎优化）实践提供了机会，与原生应用程序相比，这使 PWA 能够接触到更大的用户群。
• 无需发布：对于原生应用，应用商店发布过程有时会很痛苦。 想象一下，将您的应用程序提交到应用程序商店，兴奋地等待 5 天，结果却收到拒绝，原因是您需要重新阅读 10 次，但仍然不知道它在说什么。 在某些情况下，您的应用可能永远不会被接受。 （性用品商店或电子烟产品，有人吗？）。 使用 PWA，无需提交应用程序。 终于解脱了！ 如果您想将 PWA 发布到 Apple Appstore、Google Play 和 Microsoft Store，请按照以下方法操作！
• 开发成本低：由于 PWA 可以开发一次，然后可用于任何支持它的移动平台和浏览器，与原生应用程序相比，PWA 的开发成本相对较小。 另一个原因是 PWA 使用更普遍理解的编程语言和技术，并且拥有更大的开发人员基础。

 推荐阅读：
- Progressive Web App vs Native App：哪个更适合你？
- PWA 对电子商务的好处

PWA 缺点

显然，这一切听起来好得令人难以置信。 当某些事情看起来好得令人难以置信时，人们经常会问“好吧，有什么收获”。

PWA 尽管具有行业定义的特征，但仍然有其缺点：

• 可达性

鉴于这项技术仍然很新，目前没有适用于 PWA 的应用程序市场，这反过来又降低了其以某种方式接触更广泛受众的能力。 然而，微软等知名公司已经开始将 PWA 整合到 Microsoft Store 中，这使得 Windows 10 中 PWA 的未来似乎并不牵强。

• 与其他已安装应用程序的通信：

由于 PWA 从根本上说本质上仍然是一个类似应用程序的网页，因此它可以在很多方面受到限制。 最大的限制可能是它是跨应用程序通信受限，这可能会给开发人员带来问题。

常问问题

PWA 有什么用途？

一个快速、可靠且使用愉快的网络应用程序可以用于多种用途。 例如，Aliexpress 的 PWAs Tik Tok 让人们熟悉这些网站，从而促使他们下载他们的本地应用程序。 Spotify 使用 PWA 进一步优化其网站的性能和响应能力，从而为用户提供下载应用程序之外的另一种选择。 pacman 或 2048 等游戏也使用 PWA 来吸引更多网络用户。

PWA 和普通应用有什么区别？

从技术角度来看，需要从其应用商店下载原生应用，而您可以通过 Web 浏览器访问 PWA。 从业务的角度来看，PWA 可以更适合 SEO，开发成本更低、速度更快。 同时，对于复杂的移动项目来说，原生应用仍然是最好的，而且它可以创造更强的品牌信誉。

PWA 是否仅适用于移动设备？

不，PWA 在台式机、移动设备和平板电脑上都可以使用。

PWA 的编程语言是什么？

PWA 是使用流行的编程语言和 Web 技术构建的，包括 HTML、CSS、Javascript 和 WebAssembly。

结论

“PWA 会取代原生应用吗？”

我们认为不是。

然而。

截至 2019 年第四季度，Google Play 上有近 300 万个应用程序，Apple App Store 上有超过 200 万个应用程序（Statista，2019 年）。 这个数字仍在增长，而且看起来所有这些应用程序都不会很快被替换。 用户习惯是一个东西，不容易改变。

话虽如此，Progressive Web Apps 确实有很大的潜力。 在 SimiCart，我们相信 Progressive Web Apps 是未来。 凭借其速度、布局灵活性和功能能力，PWA 注定要取代桌面站点、移动站点、原生移动应用程序，甚至原生 Windows 应用程序。 是的，你没听错， windows 应用程序。 仅在电子商务世界中，Progressive Web App 目前是希望为在线购物者提供轻松、响应和引人入胜体验的店主的首选方法。

事实上，统计数据显示，PWA 实施延迟 1 个月可能会导致高达 140 万美元的收入损失，如果品牌决定延迟 6 个月，还会造成 680 万美元的损失。

对于寻求全方位完美Magento PWA解决方案的电子商务商店所有者，我们在 SimiCart 为您和您的商店提供完整的软件包。