Panoramica di PWA Kit
Questa panoramica introduce brevemente le parti principali dell'architettura di PWA (Progressive Web App) Kit e fornisce un contesto utile per le altre sezioni della documentazione di prodotto.
Retail React App è un'app React renderizzata sul lato server e ottimizzata per l'e-commerce. Rappresenta un punto di partenza per la creazione di uno storefront con funzionalità chiave, quali:
- Creazione di bundle di codice, suddivisione di codice e transpilazione
- Libreria di componenti con applicazione di temi
- Sistema di applicazione stili basato su JavaScript (CSS in JS)
- Script per automatizzare le attività di sviluppo di routine
- Processo di lavoro dei servizi e manifesto per le funzionalità PWA (Progressive Web App)
- Gruppi di test
Lo storefront di Retail React App include pagine e funzionalità di e-commerce standard, ad esempio pagina di elenco prodotti (PLP), pagina di dettagli prodotto (PDP), carrello e checkout. Ogni aspetto dello storefront è progettato per essere ottimizzato ed esteso con codice personalizzato.
Per ulteriori informazioni, consultare una demo di Retail React App alla pagina pwa-kit.mobify-storefront.com o la guida completa sull'architettura → Retail React App.
Un sito creato con PWA Kit è compatibile con i seguenti browser web:
| Sistema operativo | Browser |
|---|---|
| Android 8+ | Chrome 53+ |
| Android 8+ | Samsung Internet |
| iOS 10+ | Chrome 53+ |
| iOS 10+ | Safari 10+ |
| Sistema operativo | Browser |
|---|---|
| Android 8+ | Chrome 53+ |
| Android 8+ | Samsung Internet |
| iOS 10+ | Chrome 53+ |
| iOS 10+ | Safari 10+ |
| Sistema operativo | Browser |
|---|---|
| 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+ |
Per creare la migliore esperienza acquirente possibile, gli storefront PWA Kit utilizzano un sistema di rendering e routing che esegue lo stesso codice sorgente in due contesti diversi: sul lato server e sul lato client. Il rendering di lato server esegue l'ottimizzazione per la velocità di caricamento pagina iniziale, mentre il rendering di lato client permette transizioni di pagina fluide e un'interfaccia utente reattiva.
Il sistema di rendering e routing è definito da Retail React App con la propria configurazione server Express e una gerarchia di componenti React. In questo sistema è possibile:
- Aggiungere nuovi componenti di pagina e modificare quelli esistenti
- Fornire dati ai componenti di pagina dalle richieste API o dall'interazione utente
- Definire schemi per il routing delle richieste URL ai componenti di pagina
- Personalizzare l'output di tutte le pagine
Per ulteriori informazioni, consultare le guide complete sull'architettura → Rendering e Routing.
Gli storefront PWA Kit utilizzano Einstein Activities per ottimizzare le esperienze utente e fornire dati di report in Reports & Dashboards.
Per abilitare i report basati su Einstein Activities in Report & Dashboards è necessario abilitare la funzionalità in Business Manager.
Il PWA Kit è un progetto open-source ospitato su GitHub.
Il repository GitHub per PWA Kit è impostato come monorepo (singolo repository) con diversi pacchetti, inclusi modelli di progetto, librerie, SDK e altri strumenti.
Per agevolare la navigazione nel repository, di seguito è riportata una panoramica di ogni pacchetto contenete:
| Pacchetto | Descrizione |
|---|---|
| pwa-kit-create-app | Crea progetti PWA Kit basati su modelli di progetto. |
| pwa-kit-dev | Strumenti di riga di comando per sviluppare, creare e implementare progetti PWA Kit. |
| pwa-kit-runtime | Applicazioni Node.js da eseguire su Managed Runtime. |
| pwa-kit-react-sdk | Utility che supportano la pipeline di rendering. |
| commerce-sdk-react | Hook React per interagire con Salesforce B2C Commerce API |
| template-retail-react-app | Modello predefinito per avviare i progetti. |
| template-typescript-minimal | Modello di progetto a configurazione automatica per le applicazioni TypeScript. |
| template-express-minimal | Modello di progetto essenziale per app eseguite su Managed Runtime. |
Le patch di sicurezza vengono fornite per 24 mesi dopo la disponibilità generale (GA) di ciascuna versione principale degli SDK PWA Kit (1.0, 2.0 e così via).
PWA Kit rilascia build ogni notte per migliorare la visibilità delle funzionalità imminenti e offrire agli implementatori la possibilità di testare le integrazioni di codice.
Le release notturne dei pacchetti PWA Kit vengono rilasciate in npm utilizzando il tag di distribuzione nightly-next. Il nightly-next più recente può essere visualizzato su npm.
Per installare questi pacchetti, eseguire il comando:
npm install <package-name>@nightly-next
Ad esempio, per installare l'ultima build notturna per @salesforce/commerce-sdk-react nel progetto PWA Kit, eseguire il comando:
npm install @salesforce/commerce-sdk-react@nightly-next
Non utilizzare versioni di anteprima in ambienti Production.
Queste build non sono testate né supportate. Alcune funzionalità incluse nelle build notturne potrebbero non essere incluse nelle release di PWA Kit finali. Queste build non rilasciate potrebbero non caricarsi, presentare funzionalità non documentate, problemi noti e numerose altre problematiche. Sono destinate agli sviluppatori e ad altri utenti che desiderano avere accesso anticipato alle funzionalità pianificate di PWA Kit.