渐进式Web应用（PWA）电商指南
渐进式 Web 应用（PWA）电商网站旨在实现近乎瞬间的加载速度，即使在网络信号较弱的情况下也能可靠运行，并且无需下载即可提供流畅、响应迅速的购物体验。
网站性能直接影响顾客的浏览、互动和购买完成过程。缓慢的加载时间、卡顿的导航以及不可靠的连接会中断购物体验并导致用户流失。这些问题在移动设备上尤为明显，而移动端占据了电商网站约 75% 的流量（据 Dynamic Yield 统计），但移动端的转化率始终低于桌面端。这一差距为店主带来了巨大的机遇。
在本指南中，您将了解什么是 PWA 电商、它为何对您的店铺至关重要，以及如何利用 Shopify 的无头商务工具进行实施。
什么是 PWA 电商？
渐进式 Web 应用是一种在浏览器内提供类似应用体验的网络应用程序类型。它将电商网站的便捷性与通常与原生移动应用相关的功能相结合。在大多数情况下，PWA 只是您的网站内置了额外功能，而不是一个独立的产品或平台。数百万消费者每天通过知名的媒体、零售和技术品牌使用由 PWA 驱动的体验；流行的 PWA 示例包括 Pinterest、Starbucks、Spotify 和 Facebook。
与通过 Google Play 或 Apple App Store 等应用商店分发的原生应用不同，PWA 不需要下载。用户可以通过浏览器访问它们，并选择将网站添加到主屏幕。这并不会安装单独的应用程序——而是保存一个快速、类似应用的网站版本以便轻松访问，类似于书签，但体验更加无缝。
PWA 依赖于三种现代 Web 技术：
- Service workers（服务工作者）：这些是充当您的商店与网络之间中间人的后台脚本。它们拦截请求，提供缓存页面，并启用离线功能。这使得 PWA 即使在购物者连接中断时也能继续工作。
- Web app manifest files（Web 应用清单文件）：这些配置决定了网站在保存至用户主屏幕时的外观和启动方式，包括其名称、图标以及显示行为。如果没有清单文件（manifest），浏览器将不会把您的网站视为可安装的应用。
- 应用壳架构（App shell architecture）：这将您商店的核心界面——导航、页眉、布局——与其内容分离。在重复访问时，应用壳会立即从缓存中加载，而只有内容会在后台加载。结果是页面感觉瞬间加载完成，即使在连接速度较慢的情况下也是如此。
这些技术共同解决了传统网站和原生应用的常见局限性。标准电商网站在速度和用户参与度方面可能面临挑战——特别是在移动流量方面，不可靠的连接和较慢的硬件会使性能问题更加突出——而原生应用则需要针对不同平台进行下载和持续更新。渐进式 Web 应用（PWA）结合了网络的覆盖范围和原生应用的性能，提供了一种更灵活的方式来提供高质量的购物体验。
企业可以将 PWA 与原生应用一起使用，或者作为其替代方案。对于初创公司或较小的电商品牌来说，PWA 可以以较低的成本向客户提供类似应用的使用体验，同时仍保留未来投资开发原生应用的选项。
PWA 通常被那些拥有大量移动流量并希望在移动设备上提升性能和转化率的品牌所采用。它们也非常适合那些在产品发布、季节性促销或限时活动期间月活跃用户出现剧烈波动的企业。为各类设备提供服务的企业，或在网络连接不太稳定的地区运营的企业，也能从 PWA 提供的额外可靠性中受益。
PWA 对电商的优势
快速加载且无中断的网站可以让购物者保持参与感，使他们更有可能浏览产品、将商品加入购物车并完成购买。Yottaa 的研究表明，转化率在页面加载时间为两秒时达到峰值，并随着加载时间的增加而下降。以下是 PWA 如何帮助解决这一问题，以及它们能为您的电商商店带来的其他核心优势：
- 更快的加载速度：对于使用 PWAs 的回头客来说，页面几乎瞬间加载完毕，因为浏览器会提供存储的资源，而不是每次都要等待网络。减少几秒的时间可以转化为更少的客户在下单前离开。
- 离线浏览和低连接支持：即使连接中断，购物者也可以继续浏览产品页面、商品系列和购物车。这对于拥有位于连接不稳定地区客户的商店尤其有价值。
- 无需应用商店摩擦即可获得类似应用的体验：客户可以直接在浏览器中享受流畅的导航和精致的界面，并可将您的商店保存到主屏幕，且无需下载。
- 推送通知：企业可以向客户的设备直接发送促销信息、补货提醒和提示，但前提是用户已通过浏览器选择接收通知。这些消息以设备级通知的形式出现——类似于原生应用的通知——提供了一种在不要求安装应用的情况下重新吸引客户的方法。
- 动态内容加载：当购物者按尺寸筛选或在产品图片之间切换时，只有该部分会重新加载，而不是整个页面。导航保持流畅和响应迅速，这可以让客户继续浏览而无需等待。
- 降低开发成本和运维开销：由于渐进式 Web 应用（PWA）使用单一的基于 Web 的代码库，它们可以减少构建和维护独立的 iOS 和 Android 移动应用的需求。对于选择 PWA 而非开发原生应用的企业来说，这可以降低成本。
- 一致的多设备体验：无论客户使用的是手机、平板电脑还是台式机，他们都能获得相同质量的体验。不一致的性能可能会中断客户旅程，导致销售流失。
如何实施 PWA 电子商务
- 激活无头渠道
- 使用 Hydrogen 构建您的店面
- 通过 Storefront API 连接数据
- 使用 Oxygen 部署
- 添加 PWA 功能
PWA 的开发通常取决于您的电子商务平台和现有的商店设置。Shopify 商家可以通过两条主要途径采用 PWA 功能，具体取决于商店规模、技术资源和预算。
如果希望在不进行重大技术重构的情况下进行改进，Shopify 应用商店中有如 Ampify PWA 等应用，可直接向现有主题添加 PWA 功能。这种方法需要有限的开发人员参与，并且可以相对快速地实施。然而，您是在当前主题的约束下工作，因此定制化和性能的提升是有限的。流量较高、需求更复杂或拥有开发人员资源的商店可能希望考虑无头架构构建，它能够实现完整的 PWA 实施。无头电子商务将客户看到的 storefront 与驱动产品、结账和支付的后台分离开来，通过应用程序编程接口（API）连接它们，从而实现更快的速度和更大的灵活性。Hydrogen 是 Shopify 用于构建自定义 storefront 的基于 React 的框架，而 Oxygen 是用于部署它们的托管平台。
工作原理如下：
1. 激活无头渠道
在您的 Shopify 管理后台中，启用 Headless (Hydrogen) 销售渠道。在这里，您将产品和系列同步到您的新自定义 storefront。它还设置了前端与 Shopify 后台系统（如库存、订单和支付）之间的连接，使您能够基于现有的商店数据进行构建。
2. 使用 Hydrogen 构建您的店面
您可以使用 Shopify 的启动模板和设置工具创建一个新的 Hydrogen 项目，这将生成一个带有示例数据的可用店面，随后您可以根据需要进行定制；Hydrogen 提供了一套与 Shopify API 相连的组件和工具，使开发人员能够专注于构建购物体验。
Hydrogen 是 Shopify 用于构建自定义店面的官方框架，但它并非唯一选择；Shopify 支持“自带技术栈”方法，允许开发人员使用其他框架和工具，例如团队可以使用 Gatsby 等框架构建具备 PWA 功能的自定义 Shopify 店面。
3. 通过 Storefront API 连接数据
接下来，将您的 Hydrogen 项目连接到您的 Shopify 商店，以便显示产品、商品集合及其他数据；此连接通过 Shopify API 处理，包括管理产品数据、购物车功能和客户互动的 Storefront API 以及 Customer Account API；链接您的 PWA 电商店面还会配置安全数据访问所需的 API 凭据；连接完成后，Shopify 将继续通过其后端管理核心商务功能。
4. 使用 Oxygen 部署
当您的 PWA 商店准备就绪并连接后，使用 Oxygen 进行部署。这使得您的商店可以通过全球服务器网络公开访问，无论客户身处何地，页面都能快速加载。
Oxygen 直接与 Hydrogen 配合使用，并提供持续部署、推送到预览环境以及即时回滚功能。如果您使用的是非 Hydrogen 框架来构建商店，则还需要自行选择托管服务。
5. 添加 PWA 功能
一旦您的店面上线，您就可以实现使其成为 PWA 的功能，例如用于缓存和离线支持的 service workers、用于主屏幕访问的网络应用清单，以及用于重新吸引用户的推送通知；这些功能可以叠加在您的自定义店面之上，以提升性能和用户体验。
PWA 电子商务常见问题解答
什么是电子商务中的 PWA？
电子商务中的 PWA 指的是利用渐进式 Web 应用（Progressive Web App）技术创建快速、响应式的在线商店，这些商店可在各种设备上运行，并提供离线访问和发送推送通知等功能。这对于经常面临连接不稳定问题的移动用户尤其有帮助。
电子商务 PWA 是否比传统网站更好？
PWA 本质上仍是一个网站，但它具备更多额外功能，例如更快的加载速度、离线支持和推送通知。对于某些电子商务企业来说，这些功能可以改善用户体验，减少浏览和结账过程中的摩擦，从而优于传统网站，包括标准的移动网站。
如何判断一个网站是否为 PWA？
您通常可以通过以下几个关键特征来识别 PWA 电子商务站点：
- 系统会提示您将该网站添加到主屏幕
- 网站加载速度快，且对交互操作响应流畅
- 即使在网络连接较弱或中断的情况下，部分内容仍可访问
- 网站以独立视图打开，不包含典型的浏览器界面元素
您可以通过上述特征有时识别出 PWA，但并非所有 PWA 都会清晰地展示这些特征。