PWA Kit 概述

本概述简要介绍 Progressive Web App (PWA) Kit 架构的主要部分，并为您提供有关产品文档其余部分的有用的上下文。

Retail React App 是针对电子商务进行了优化的服务器端呈现的 React 应用程序。它为您构建已经包含以下关键功能的网店提供了入手点：

  • 代码捆绑包、代码拆分和转译
  • 带有主题的组件库
  • 基于 JavaScript 的样式系统（JS 中的 CSS）
  • 用于自动化日常开发任务的脚本
  • 用于 Progressive Web App (PWA) 功能的 Service Worker 和清单
  • 测试套件

Retail React App 的网店包括标准电子商务页面和功能，例如产品列表页面 (PLP)、产品详细信息页面 (PDP)、购物车和结账。网店的每个方面都旨在使用您自己的代码进行增强和扩展。

要了解更多信息，请在 pwa-kit.mobify-storefront.com 上查看 Retail React App 的演示，或阅读完整的架构指南 → Retail React App。

使用 PWA Kit 创建的站点与以下 Web 浏览器兼容：

操作系统浏览器
Android 8+Chrome 53+
Android 8+Samsung Internet
iOS 10+Chrome 53+
iOS 10+Safari 10+
操作系统浏览器
Android 8+Chrome 53+
Android 8+Samsung Internet
iOS 10+Chrome 53+
iOS 10+Safari 10+
操作系统浏览器
macOS 10.10+Safari 10+
macOS 10.10+Firefox 49+
Windows 8.1+Chrome 53+
Windows 8.1+Edge 14+
Windows 8.1+Firefox 49+

为获得最佳购物体验，PWA Kit 网店使用进行渲染和路由的系统，该系统在两种不同的上下文中运行相同的源代码：服务器端和客户端。服务器端渲染优化了初始页面加载速度，而客户端渲染实现了响应式用户界面和平滑的页面转换。

渲染和路由系统由 Retail React App 使用其 Express服务器配置和 React 组件的层次结构建立。在这个系统中，您可以：

  • 添加新页面组件和修改现有页面组件
  • 从 API 请求或用户交互向页面组件提供数据
  • 定义将 URL 请求路由到页面组件的模式
  • 自定义所有页面的输出

要了解更多信息，请阅读完整的架构指南 → 渲染和路由。

PWA Kit 网店使用 Einstein Activities 来增强用户体验，并在报告和仪表板中提供报告数据。

要在“报告和仪表板”中启用基于报告的 Einstein Activity，您必须在 Business Manager中启用它。

PWA Kit 是托管在 GitHub 上的开源项目。

PWA Kit 的 GitHub 存储库设置为带有多个包的单一存储库，包括库、项目模板、SDK 和其他工具。

为了帮助您浏览存储库，以下是它包含的每个包的概述：

包说明
pwa-kit-create-app基于项目模板创建 PWA Kit 项目。
pwa-kit-dev用于开发、构建和部署 PWA Kit 项目的命令行工具。
pwa-kit-runtime使 Node.js 应用程序能够在 Managed Runtime 上运行。
pwa-kit-react-sdk支持渲染管道的实用程序。
commerce-sdk-react与 Salesforce B2C Commerce API 交互的 React Hook
template-retail-react-app用于启动项目的默认模板。
template-typescript-minimalTypeScript 应用程序的零配置项目模板。
template-express-minimal在 Managed Runtime 运行的应用程序的准系统项目模板。

在 PWA Kit SDK 的每个主要版本（1.0、2.0 等）普遍可用后，将提供 24 个月的安全补丁。

PWA Kit 每晚发布构建版本，以便更好地了解即将推出的功能，并为实施者提供测试代码集成的机会。

每晚发布的 PWA Kit 包使用分发标签 nightly-next 发布到 npm。最新的 nightly-next 标签可以在 npm 上查看。

可以通过运行以下命令来安装这些软件包：

npm install <package-name>@nightly-next

例如，要为您的 PWA Kit 项目安装最新的 @salesforce/commerce-sdk-react 夜间版本，请运行：

npm install @salesforce/commerce-sdk-react@nightly-next

不要在生产环境（Production）中使用预览版本。

这些版本未经测试且不受支持。夜间版本中包含的某些功能可能不会包含在最终的 PWA Kit 版本中。 这些未发布的版本甚至可能无法加载，可能具有未记录的功能、已知的缺陷以及许多其他问题。它们旨在供开发人员和其他希望尽早访问计划中的 PWA Kit 功能的其他人使用。