Visão geral do PWA Kit
Esta visão geral apresenta de forma sucinta as principais partes da arquitetura do PWA Kit, além de proporcionar contexto útil para o resto da documentação do produto.
O Retail React App é um aplicativo React renderizado no lado do servidor que é otimizado para o comércio eletrônico. Ele proporciona um ponto de partida para criar sua loja (virtual) que já inclui recursos-chave, como:
- Empacotamento de código, separação de código e transpilação
- Biblioteca de componentes com temas
- Sistema de estilos com base em JavaScript (CSS em JS)
- Scripts para automação de tarefas de rotina de desenvolvimento
- Worker de serviço e manifesto para os recursos do Progressive Web App (PWA)
- Conjuntos de testes
A loja (virtual) do Retail React App inclui páginas e funcionalidades de comércio eletrônico padrão, como página de listagem de produtos (PLP), página de detalhes de produtos (PDP), carrinho e checkout. Cada aspecto da loja (virtual) foi projetado para ser aperfeiçoado e adaptado com seu próprio código.
Para saber mais, confira a demonstração do Retail React App em pwa-kit.mobify-storefront.com ou leia o guia de arquitetura completo → O Retail React App.
Para proporcionar a melhor experiência de cliente, as lojas (virtuais) do PWA Kit usam um sistema para renderização e roteamento que executa o mesmo código-fonte em dois contextos diferentes: no lado do servidor e no lado do cliente. A renderização no lado do servidor melhora a velocidade de carregamento de páginas. Já a renderização no lado do cliente torna a interface do usuário mais responsiva e possibilita transições de páginas mais consistentes.
O sistema de renderização e roteamento é estabelecido pelo Retail React App com a configuração do servidor Express e uma hierarquia de componentes do React. Nesse sistema, você pode:
- Adicionar novos componentes de página e modificar os existentes.
- Fornecer dados para os componentes de página a partir de solicitações de API e da interação do usuário.
- Definir padrões o roteamento de solicitações de URL aos componentes da página.
- Personalizar a saída de todas as páginas
Para saber mais, leia os guias de arquitetura completos → Renderização e Roteamento.
As lojas (virtuais) do PWA Kit usam Einstein Activities para aprimorar as experiências do usuário e fornecer dados de relatório no Reports & Dashboards.
Para habilitar os relatórios baseados em Einstein Activities no Reports & Dashboards, você precisa habilitar esse recurso no Business Manager.
O PWA Kit está disponível como um projeto de código-fonte aberto no GitHub.
O repositório no GitHub para o PWA Kit está configurado como um monorepo com vários pacotes, inclusive bibliotecas, modelos de projetos, SDKs e outras ferramentas.
Para facilitar a navegação no repositório, confira a seguir uma visão geral de cada pacote incluído:
| Pacote | Descrição |
|---|---|
| pwa-kit-create-app | Cria projetos do PWA Kit com base em modelos de projeto. |
| pwa-kit-dev | Ferramentas de linha de comando para desenvolver, criar e implantar projetos do PWA Kit. |
| pwa-kit-runtime | Habilita aplicativos Node.js para que sejam executados no Managed Runtime. |
| pwa-kit-react-sdk | Utilitários que são compatíveis com o pipeline de renderização. |
| commerce-sdk-react | Ganchos do React para interação com a Salesforce B2C Commerce API |
| template-retail-react-app | Modelo-padrão para iniciar projetos. |
| template-typescript-minimal | Modelo de projeto que não requer configuração para aplicativos TypeScript. |
| template-express-minimal | Modelo básico de projeto para aplicativos em execução no Managed Runtime. |
Patches de segurança são fornecidos por 24 meses após a disponibilidade geral de cada versão principal dos SDKs do PWA Kit (1.0, 2.0 etc.).
O PWA Kit lança builds noturnos todas as noites para dar melhor visibilidade aos próximos recursos e uma chance para que os implementadores testem as integrações do código.
Os lançamentos noturnos dos pacotes do PWA Kit são feitos no npm usando a tag de distribuição nightly-next. A tag nightly-next mais recente pode ser consultada no npm.
Esses pacotes podem ser instalados executando:
npm install <package-name>@nightly-next
Por exemplo, para instalar o build noturno mais recente do @salesforce/commerce-sdk-react no seu projeto do PWA Kit, execute:
npm install @salesforce/commerce-sdk-react@nightly-next
Não use versões de visualização em Production.
Esses builds não foram testados e não recebem suporte. Alguns recursos incluídos nos builds noturnos podem não ser incluídos nas versões finais do PWA Kit. Esses builds que não foram lançados podem não carregar, podem ter recursos sem documentação, defeitos conhecidos e vários outros problemas. Eles foram criados para uso por desenvolvedores e outros que querem acesso antecipado aos recursos planejados do PWA Kit.