Novidade: O PWA Kit v2 já está disponível! Para mais informações, consulte as notas da versão.

Como começar com o Progressive Web App Kit

Para usar o PWA Kit com configurações de demonstração, siga as instruções do documento Guia de início rápido.

O Progressive Web App Kit (PWA Kit) é um framework para a criação de lojas virtuais com React.

Com ele, você recebe:

  • Modelos de projeto, inclusive o Retail React App. O Retail React App é uma loja virtual personalizada que implementa os principais fluxos de e-commerce, da página inicial ao checkout.
  • Um sistema de renderização que funciona nos lados do servidor e do cliente e trata da [hidratação](<https://en.wikipedia.org/wiki/Hydration_(web_development), ou seja, o processo de transferência de renderização do servidor para o cliente.
  • Um sistema de roteamento que permite a injeção de dados da Commerce API em seus componentes.
  • Scripts e funções utilitárias para automação de tarefas rotineiras de desenvolvimento.
  • Integração com as APIs do B2C Commerce e do Open Commerce (OCAPI).

Um Progressive Web App (PWA) é um site Web cuja experiência do usuário inclui recursos que estão normalmente associados a aplicativos nativos, como:

  • Tempos de carregamento rápidos
  • Renderização e transições sem dificuldades
  • Suporte offline
  • Instalação na tela inicial

O motivo pelo qual eles são denominadas “progressive” é que esses recursos são adicionados um de cada vez (ou progressivamente), com base no que o dispositivo e navegador do usuário pode aceitar.

Um PWA funciona em qualquer desktop e dispositivo móvel que usa um navegador que respeite os padrões de conformidade.

A tabela a seguir mostra como um PWA se compara a um site Web responsivo tradicional e a um aplicativo nativo.

PWASite responsivoAplicativo nativo
O que é?Um site Web que é responsivo e oferece desempenho e recursos nativos de aplicativoUm site Web que se adapta dinamicamente a vários tamanhos de telaUm aplicativo disponível em um programa específico (iOS, Android) que pode acessar funcionalidades no lado do dispositivo.
Caso de usoQuando você quiser ter uma experiência mais rápida, interessante, como em um aplicativoQuando uma loja (virtual) tradicional atende às suas necessidadesQuando você quer gerar interações mais relevantes com a sua base de clientes mais fiés.

É ele que fornece a infraestrutura para implantar, hospedar e monitorar sua loja virtual do PWA Kit em uma plataforma de nuvem pública. Com o Managed Runtime, você pode se dedicar a desenvolver sua loja (virtual) e não a gerenciar servidores.

Este recurso segue a Metodologia de 12 fatores para aplicativos. Sua loja (virtual) desenvolvida com uma base de códigos única criada sem estado e que pode ser implantada na infraestrutura computacional mais eficiente e econômica disponível. Cada implantação substitui por completo a implantação anterior, além de ser reconfigurada do zero.

E o mais importante: o Managed Runtime oferece a mesma segurança de nível empresarial e os 99,99% de tempo de atividade histórico presentes em todas as tecnologias da Salesforce.

Para obter mais informações, consulte Visão geral do Managed Runtime.

Ao usar o PWA Kit e o Managed Runtime, haverá ocasiões em que você verá menções à Mobify, que é o nome da empresa que desenvolveu originalmente essas tecnologias. A Mobify foi adquirida pela Salesforce em 2020, e o processo de atualização da marca ainda não foi concluído.

As contribuições ao PWA Kit feitas pela comunidade de código aberto são bem-vindas! Para saber mais sobre o processo de contribuição, veja Como contribuir com o PWA Kit.

Se você gosta de usar o PWA Kit, considere fazer parte do GitHub Repo. Esse repositório ajuda a outros a conhecer o PWA Kit!

Agora que você já se familiarizou com as noções básicas do PWA Kit e do Managed Runtime, confira outros guias da série “Como começar”:

  1. Início rápido
  2. Criar uma On-Demand Sandbox
  3. Configurar o acesso à API
  4. Configurar o ambiente local
  5. Enviar por push e implantar pacotes