# Como Salvar o PWA

> ### Um Progressive Web App (PWA) é uma aplicação web que utiliza tecnologias modernas para oferecer uma experiência de usuário similar à de aplicativos nativos. Eles são rápidos, funcionam offline, podem ser instalados diretamente da web e oferecem notificações push.

### **Como Atualizar ou Incluir o Ícone do Aplicativo Home Screen para o PWA**

Este guia detalha como atualizar ou incluir o ícone do aplicativo home screen para o PWA da sua plataforma. O ícone deve ser no tamanho **512x512 pixels**, formato PNG, com fundo transparente.

1. **Prepare o Ícone:**
    
    
    - Crie ou edite o ícone para o aplicativo no tamanho 512x512 pixels.
    - Salve o ícone no formato PNG com fundo transparente.
2. **Acesse o Painel de Onboarding:**
    
    
    - Acesse o link do painel de onboarding: [painel.xxxxxx/onboarding?step=2](http://painel.andresan.com.br/onboarding?step=2).

<span style="text-decoration: underline;">**OBS: Pode encontrar o link do seu painel na descrição do grupo do whatsapp.**</span>

- - Se preferir, você pode acessar diretamente o painel, clicar em **'Onboarding'** e, em seguida, escolher a opção '**Identidade Visual**'

[![image.png](https://wiki.edustore.online/uploads/images/gallery/2024-07/scaled-1680-/tj0image.png)](https://wiki.edustore.online/uploads/images/gallery/2024-07/tj0image.png)

- - "Indo mais abaixo, você encontrará a opção '**Ícone Aplicativo Home Screen**'. Clique em '**Alterar**', o que abrirá uma janela para você selecionar a pasta no seu computador. Encontre e selecione o seu ícone PNG de 512x512 e clique em '**Abrir**'."

[![image.png](https://wiki.edustore.online/uploads/images/gallery/2024-07/scaled-1680-/J0Bimage.png)](https://wiki.edustore.online/uploads/images/gallery/2024-07/J0Bimage.png)

[![image.png](https://wiki.edustore.online/uploads/images/gallery/2024-07/scaled-1680-/G8zimage.png)](https://wiki.edustore.online/uploads/images/gallery/2024-07/G8zimage.png)

#### **Como Salvar o PWA da sua Plataforma no Chrome (Android)**

<div id="bkmrk-no-dispositivo-andro">- No dispositivo Android, abra o Chrome ![Chrome](https://lh3.googleusercontent.com/-20NuyB0WC36P5OvH-HnVwgMQlIRx47n0At3ZLRZuU2UIuXpsDZVhrsFJMW5DQkQVQU=w36-h36).
- Acesse o link da sala do seu curso. 
    - <span style="text-decoration: underline;">**OBS: Pode encontrar o link do seu painel na descrição do grupo do whatsapp.**</span>
- À direita da barra de endereço, toque em Mais ![Organizar](https://lh3.googleusercontent.com/W0wvq2J2waF71Qa0jA84ozgvd-x7-o0n7HgMl3ok7kC0eW1lK8Qunbke6MmrqZnJ6w=w36-h36) ![e](https://lh3.googleusercontent.com/3_l97rr0GvhSP2XV5OoCkV2ZDTIisAOczrSdzNCBxhIKWrjXjHucxNwocghoUa39gw=w36-h36) <span style="text-decoration: underline;">**Adicionar à tela inicial** </span>![e](https://lh3.googleusercontent.com/3_l97rr0GvhSP2XV5OoCkV2ZDTIisAOczrSdzNCBxhIKWrjXjHucxNwocghoUa39gw=w36-h36)<span style="text-decoration: underline;"> **Instalar**.</span>
- Aguarde um momento para concluir a instalação, aparecera na área do sou aparelho.

</div>[![image.png](https://wiki.edustore.online/uploads/images/gallery/2024-07/scaled-1680-/tbvimage.png)](https://wiki.edustore.online/uploads/images/gallery/2024-07/tbvimage.png)

[![image.png](https://wiki.edustore.online/uploads/images/gallery/2024-07/scaled-1680-/i4Simage.png)](https://wiki.edustore.online/uploads/images/gallery/2024-07/i4Simage.png)

<div id="bkmrk--5"></div><span style="text-decoration: underline;">  
</span>

#### **Como Salvar o PWA da sua Plataforma no Computador**

- No computador, abra o Chrome.
- Acesse o link da sala do seu curso. 
    - <span style="text-decoration: underline;">**OBS: Pode encontrar o link do seu painel na descrição do grupo do whatsapp.**</span>
- No canto superior direito, selecione Mais ![Organizar](https://lh3.googleusercontent.com/W0wvq2J2waF71Qa0jA84ozgvd-x7-o0n7HgMl3ok7kC0eW1lK8Qunbke6MmrqZnJ6w=w36-h36) ![e](https://lh3.googleusercontent.com/3_l97rr0GvhSP2XV5OoCkV2ZDTIisAOczrSdzNCBxhIKWrjXjHucxNwocghoUa39gw=w36-h36) <span style="text-decoration: underline;">**Salvar e compartilhar** </span>![e](https://lh3.googleusercontent.com/3_l97rr0GvhSP2XV5OoCkV2ZDTIisAOczrSdzNCBxhIKWrjXjHucxNwocghoUa39gw=w36-h36) <span style="text-decoration: underline;">**Instalar esta página como um app**.</span>
    - Em alguns sites, no canto superior direito da barra de endereço, selecione Instalar ![](https://storage.googleapis.com/support-kms-prod/IXP8s7ymZF6tqtGlIECQYtQfOkZX6X9pHMsX).  
        [![image.png](https://wiki.edustore.online/uploads/images/gallery/2024-07/scaled-1680-/VOwimage.png)](https://wiki.edustore.online/uploads/images/gallery/2024-07/VOwimage.png)

[![image.png](https://wiki.edustore.online/uploads/images/gallery/2024-07/scaled-1680-/PRbimage.png)](https://wiki.edustore.online/uploads/images/gallery/2024-07/PRbimage.png)

#### **Como Salvar o PWA da sua Plataforma no Safari (iOS)**

<div class="flex-shrink-0 flex flex-col relative items-end" id="bkmrk--8"><div><div class="pt-0"><div class="gizmo-shadow-stroke flex h-8 w-8 items-center justify-center overflow-hidden rounded-full"><div class="h-full w-full">  
</div></div></div></div></div><div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn" id="bkmrk-abra-o-safari-no-seu"><div class="flex-col gap-1 md:gap-3"><div class="flex flex-grow flex-col max-w-full"><div class="min-h-[20px] text-message flex w-full flex-col items-end gap-2 whitespace-pre-wrap break-words [.text-message+&]:mt-5 overflow-x-auto" data-message-author-role="assistant" data-message-id="12baf231-4abf-4419-a182-b883c9d7ac08" dir="auto"><div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]"><div class="markdown prose w-full break-words dark:prose-invert dark">1. **Abra o Safari no seu dispositivo iOS.**
2. **Acesse o link da sala do seu curso.**
    
    
    - <span style="text-decoration: underline;">**OBS: Você pode encontrar o link no seu painel na descrição do grupo do WhatsApp.**</span>
3. **Adicionar à Tela Inicial**
    
    
    - Toque no ícone de compartilhamento na parte inferior da tela (um quadrado com uma seta apontando para cima).
    - Role para baixo e toque em <span style="text-decoration: underline;">**Adicionar à Tela Inicial**.</span>
    - Em seguida, toque em <span style="text-decoration: underline;">**Adicionar**</span> no canto superior direito.

</div></div></div></div></div></div>