- O que significa que o Magento está se tornando uma plataforma Progressiva de Aplicativos Web?
- Qual será a estrutura de código dos PWAs no Magento?
- Qual é o problema com APIs REST e PWAs?
O que são aplicativos da Web progressivos?
Porquê PWA?
Esta resposta também cobre - Instalação do Magento 2.3 com PWA
Vamos dar um exemplo de Flipkart
Flipkart , o maior site de comércio eletrônico da Índia, decidiu combinar a presença na Web e o aplicativo nativo em um aplicativo da Web progressivo que resultou em um aumento de 70% nas conversões
Aproximação
O novo aplicativo progressivo da Web ajuda o Flipkart a aumentar as conversões em 70%
Flipkart também funciona no modo offline
NetworkFirst
, CacheFirst
ou NetworkOnly
.
SW-Toolbox
fornece um LRU
cache usado no aplicativo Flipkart para armazenar resultados de pesquisa anteriores na página de navegação e nas últimas páginas de produtos visitadas.TTL-based
cache que usamos para eliminar conteúdo desatualizado. Os funcionários de serviço fornecem primitivas de script de baixo nível que tornam isso possível.MAS ... MAS ... MAS ...
O que é o Magento PWA Studio?
O projeto Magento PWA Studio fornece as seguintes ferramentas:
pwa-buildpack -
O Buildpack é um conjunto de Webpack
plugins e ferramentas usadas para o desenvolvimento de temas do Magento PWA.
Também é usado para instalar e configurar o ambiente de desenvolvimento local para a plataforma Magento 2.
Ele contém as seguintes ferramentas:
Peregrine - Peregrine é um conjuntoReact components
criado para lidar com funcionalidades específicas do Magentorouting
,como,root-components
manipulador de layout, listas de produtos, exibição de preços, etc.
Tema Venia -venia-concept
é um tema de demonstração criado pelo Magento usando o estúdio Magento PWA. Apresenta todas as funcionalidades, fluxo de trabalho e páginas atualmente disponíveis
O PWA Studio NÃO é
Uma nova versão do Magento
Uma substituição de todos os front-end
Um aplicativo de desktop
Ferramentas e bibliotecas usadas nos PWA Studios
login.html
, shell-1234.js
,3456.js
Shell + Router + content
Shell da Página
O tamanho total é maior (ou seja, o conteúdo do painel está em dashboard-1234.js e 4567.js)
O aplicativo leva mais tempo para ficar pronto offline.
Carga inicial solicita apenas dois arquivos: login.html
,login-2345.js
O carregamento inicial precisa ser carregado: Shell + content
O shell + content
é visível antes do que com a abordagem do App Shell.
Uma abordagem híbrida pode ser usada em que shell e conteúdo são separados em duas solicitações (consulte a página de administração como exemplo). Isso faz sentido quando o conteúdo é muito maior do que o shell e o shell deve estar visível antes.
GraphQL no Magento
Autenticação e esquema
Reduzindo a quantidade de consultas de front-end
Renderização de fase
Compatibilidade com o Desktop Browser
Compatibilidade com o navegador móvel
Não suportado : Android Webview, IE, Safari
PWAs são mais seguros
https
em vez de HTTP
. As ameaças cibernéticas estão sempre no topo da lista para desenvolvedores de aplicativos e web.HTTP
não era seguro o suficiente para proteger as informações dos usuários.HTTPs
e é fácil iniciar um aplicativo progressivo da Web em um ambiente seguro.PWA - Modo offline
O aplicativo offline da Wikipedia é um bom exemplo de um PWA que usa um modelo de shell de aplicativo .
Progressive Web App é o futuro do desenvolvimento web, sem qualquer dúvida. No futuro, sites de comércio eletrônico, restaurantes e fontes de mídia farão a transição do aplicativo nativo para o Progressive Web App. No entanto, ainda na fase inicial, muitos dos desenvolvedores procurariam ativamente maneiras de aproveitar ao máximo as oportunidades oferecidas pelos PWAs.
Vamos começar com a instalação do Magento 2.3 com PWA
1. Digite o seguinte comando em DIR / var / www / html / (m203 é o meu diretório Magento 2.3):
composer create-project --repository=https://repo.magento.com/ magento/project-community-edition=2.3.* --stability=beta m203
2. Instale o Magento por linha de comando:
bin/magento setup:install --base-url=http://localhost/m230 --db-host=localhost --db-name=m230 --db-user=root --db-password=root --backend-frontname=admin --admin-firstname=admin --admin-lastname=admin [email protected] --admin-user=admin --admin-paassword=admin123 --language=en_US --currency=USD --timezone=America/Chicago --use-rewrites=1
3. Crie o tema pwa base, que será o pai deles para o tema PWA Venia.
4. Crie um diretório app/design/frontend/Magento/pwa
e copie todos os arquivos e diretórios do tema base aqui.
Vamos verificar que o tema base está disponível ou não.
Run: php bin/magento setup:upgrade
5. Faça o download do projeto do estúdio PWA.
6. Navegue até o diretório raiz da instalação do Magento e crie uma pasta de link simbólico do Pwa com o link para o diretório do módulo do projeto (pwa-studio / packages / pwa-module).
deste diretório, executei meu comando - / var / www / html / m230
Este é um diretório em que minha fonte baixada do pwa é / var / www / html / PWA /
ln -s /var/www/html/PWA/pwa-studio-master/packages/pwa-module app/code/Magento/Pwa
7. Vincule o diretório do tema também. Navegue para o diretório raiz da instalação do Magento e crie uma pasta de link simbólico Pwa com o link para o diretório do módulo do projeto (pwa-studio / packages / venia-concept).
ln -s /var/www/html/PWA/pwa-studio-master/packages/venia-concept app/design/frontend/Magento/venia
8. Agora navegue até o diretório venia-concept do seu projeto pwa-studio, copie .env.dist
para um novo .env
arquivo e atualize as variáveis com o URL para sua loja de desenvolvimento Magento.
cd /var/www/html/PWA/pwa-studio-master/packages/venia-concept
cp .env.dist .env
9. Instale o tema venia e o módulo Pwa:
run: php bin/magento setup:upgrade
podemos ver que o tema venia foi instalado com sucesso.
10. Configure o tema venia a partir de admin->Content->Configuration
11. Navegue até o caminho ( /var/www/html/PWA/pwa-studio-master
) executado:
npm install
ou
npm install webpack-dev-server -g
12. E finalmente, navegue até /var/www/html/PWA/pwa-studio-master/packages/venia-concept
npm start
Parabéns! Você configurou seu ambiente de desenvolvimento para o projeto temático Venia.
PWA - Progressive Web Application são geralmente os aplicativos da Web que são experiências do usuário na Web rica. em forma de:
Enquanto o magento se prepara para o lançamento da versão 2.3, está incluindo esse recurso "PWA" para tornar o front-end mais eficiente, de uma maneira que a interação do usuário.
Como o magento está usando o "PWA", também está adicionando "GraphQL API" para fornecer uma alternativa de API do lado do desenvolvimento front-end de "REST / SOAP" como API de "GraphQL".
Para obter mais detalhes sobre o "PWA" e o novo recurso do "magento2.3 open-commerce", você pode visitar a página oficial deste magento .
fonte
If you run a REST call such as GET /V1/products/:sku on a simple product, the system might fetch more than 100 lines of data. If all you need is the current price, the call has returned significantly more information than you need. With GraphQL, a query against the same SKU could return just the price.
Progressivo significa que o aplicativo é carregado com todos os dados e ativos relevantes, à medida que o usuário navega pelo site. Isso resulta em uma experiência do usuário final com melhor velocidade, usabilidade, operação offline e integração de dispositivos.
Web significa que está escrito nos idiomas da web (HTML, CSS, JavaScript). Isso permite que você crie um site que oferece mais funcionalidades semelhantes a aplicativos sem criar um aplicativo nativo restrito a uma plataforma, como iOS ou Android.
Aplicativo significa que ele instala e executa o código no dispositivo ou no computador do comprador. Isso cria mais velocidade e capacidade do que os aplicativos JavaScript de página única do passado.
Os PWAs são essencialmente um híbrido de páginas da Web regulares e do aplicativo móvel, permitindo experiências semelhantes a aplicativos móveis para a Web.
Magento está se tornando uma plataforma Progressiva de Aplicativos Web. Ou seja, o Magento está criando um conjunto de ferramentas para a construção de lojas on-line como aplicativos da Web progressivos. Essas ferramentas ajudarão os desenvolvedores a aprender técnicas de PWA, criar frontends de PWA extremamente rápidos e criar componentes e extensões de PWA para reutilização ou venda no Magento Marketplace. Juntos, o Magento está chamando esse conjunto de ferramentas de Magento PWA Studio.
Você pode verificar a estrutura do código em https://github.com/magento-research/pwa-studio
O Magento PWA está usando o GraphQL como uma alternativa à API REST para PWA.
Para mais detalhes sobre o Magento PWA, você pode acessar os seguintes links:
fonte
Geralmente, o Magento está transformando sua aparência para aumentar as conversões. Leia mais sobre isso aqui .
Os PWAs geralmente são criados com JavaScript, CSS e HTML que têm um nível de desempenho e usabilidade quase idêntico aos aplicativos nativos. Os PWAs têm peculiaridades, incluindo:
Você pode ler mais aqui.
fonte
Para responder apenas uma parte da sua pergunta, mas mais específico ao Magento 2.
O PWA será mais fácil de construir graças ao futuro lançamento do Magento 2.3.
https://www.degdigital.com/insights/magento-2-3/
Citado neste artigo:
fonte
O Aplicativo da Web progressivo usa os recursos do navegador da Web e fornece aos usuários um aplicativo móvel como a experiência.
Ele se desenvolve a partir de uma guia do navegador e torna as páginas mais imersivas com uma experiência do usuário de baixo atrito. É uma tecnologia da Web de criar um site que age e parece um aplicativo.
Um usuário pode iniciar o Aplicativo da Web Progressivo da mesma forma que um aplicativo nativo, independentemente da escolha do navegador.
Para teste de demonstração, você pode visitar neste link: Clique aqui
fonte
É um produto do Google lançado durante o I / O 2017 I / O 2017: https://www.youtube.com/watch?time_continue=14&v=cmGr0RszHc8
É um site baseado em HTML.
Ele armazena o cache em um dispositivo para que você possa usá-lo offline também.
No entanto, na primeira vez é lento, o que ocorrerá durante a segunda visita.
Ele está sendo atualizado quando o dispositivo obtém a Internet, portanto, não é necessário atualizar novidades como os APPs.
Ele dispara todos os emails para o servidor quando o dispositivo acessa a Internet se alguém postar algo offline.
Eventualmente, não há necessidade de criar um aplicativo para iphone / android.
Limitação Ele suporta apenas arquivos HTML. Portanto, o dispositivo deve suportar HTML.
fonte
Configuração do PWA (Linux OS)
Etapa 1: Instalar o magento 2.3.1
Etapa 2: Instalar / atualizar o nó
Use o módulo n do npm para atualizar o nó
Para a versão estável mais recente:
Para a versão mais recente:
Etapa 3: instalar / atualizar o fio:
Etapa 4: Instalar node-gyp - ferramenta de criação de complementos nativos do Node.js.
Etapa 5: clonar o repositório do PWA Studio
Vá para a raiz html e execute:
Depois de executar isso, você receberá a pasta pwa-studio
Etapa 6: instalar dependências do PWA Studio
Etapa 7: Especifique o servidor back-end Magento
Comando de exemplo:
mudança no arquivo .env (este será o seu URL do magento, não o URL do administrador):
Etapa 8: agora crie uma compilação
Etapa 9: executar o servidor
Inicia apenas o ambiente de desenvolvimento da loja Venia.
Executa a experiência completa do desenvolvedor do PWA Studio, que inclui recarregamentos a quente da Venia e reconstruções simultâneas do Buildpack / Peregrine.
Gera artefatos de construção e executa o ambiente de preparação, que usa mais ativos compactados e reflete mais de perto a produção.
Depois de executar um dos comandos acima, você obterá o URL de virtul criado pelo PWA.
NOTA: se você é um usuário rood, use sudo.
Siga os documentos de desenvolvimento oficiais do Magento 2:
https://devdocs.magento.com/guides/v2.3/pwa/
fonte