PWA Kit 概觀

這篇概觀簡單介紹 Progressive Web App (PWA) Kit 架構的主要部分，並為您提供其他產品文件相關的內容。

Retail React App 是針對電子商務進行最佳化的伺服器端轉譯型 React 應用程式。其包含的主要功能可讓您開始建立網店，包括：

  • 程式碼打包、程式碼分割、轉換
  • 主題元件資產庫
  • JavaScript 為主的樣式系統 (CSS-in-JS)
  • 用於自動化例行開發任務的指令碼
  • Progressive Web App (PWA) 功能的服務背景工作和資訊清單
  • 測試套件

Retail React App 的網店包括標準電子商務頁面和功能，像是產品清單頁面 (PLP)、產品詳細資訊頁面 (PDP)、購物車和結帳頁面。網店的每一個面向都是為了增強和延伸您自有的程式碼而設計。

若要進一步瞭解，請查看 Retail React App 的示範 (網址為 pwa-kit.mobify-storefront.com)，或閱讀完整的架構指南 → Retail React App。

使用 PWA Kit 建立的網站與以下網頁瀏覽器相容：

作業系統瀏覽器
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 來增強使用者體驗，並在 Reports & Dashboards 中提供報告資料。

若要在 Reports & Dashboards 中啟用基於 Einstein Activities 的報告，您必須在 Business Manager 中啟用它。

PWA Kit 是代管在 GitHub 上的開源專案。

PWA Kit 的 GitHub 存放庫設為具有多個套件的 Monorepo，包括程式庫、專案範本、SDK 和其他工具。

為了協助您瀏覽存放庫，以下概述當中包含的每個套件：

套件描述
pwa-kit-create-app根據專案範本建立 PWA Kit 專案。
pwa-kit-dev用於開發、建置、部署 PWA Kit 專案的命令列工具。
pwa-kit-runtime讓 Node.js 應用程式能夠在 Managed Runtime 上執行。
pwa-kit-react-sdk支援轉譯 Pipeline 的公用程式。
commerce-sdk-react用於與 Salesforce B2C Commerce API 互動的 React Hook。
template-retail-react-app開始專案的預設範本。
template-typescript-minimal適用於 TypeScript 應用程式的零設定專案範本。
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

例如，若要將 @salesforce/commerce-sdk-react 的最新每夜建置版本安裝到您的 PWA Kit 專案，請執行：

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

請勿在 Production 環境中使用預覽版本。

這些建置版本未經測試也不受支援。每夜建置版本所包含的部分功能可能不會納入最終 PWA Kit 發行版本當中。 這些未發行的版本甚至可能無法載入，可能具有未記錄的功能、已知的缺陷，以及許多其他問題。它們旨在供開發人員和其他希望儘早存取已規劃的 PWA Kit 功能的人員使用。