> For the complete documentation index, see [llms.txt](https://ajuda.zdg.com.br/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ajuda.zdg.com.br/ferramentas-adicionais-e-integracoes/notificacoes-aplicativo-web-push.md).

# Notificações Aplicativo (web push)

**O Aplicativo Z-PRO**\
O Z-PRO utiliza a moderna tecnologia PWA (Progressive Web App), o que proporciona uma experiência de aplicativo completa diretamente no seu celular ou computador, sem a necessidade de baixar em lojas como App Store ou Play Store. Ao instalá-lo na sua tela inicial, o Z-PRO opera como um app nativo: rodando em tela cheia, com navegação fluida e suporte a notificações em tempo real.\
Como funcionam as Notificações Web Push

**Notificações Web Push**\
Para manter você sempre atualizado, o sistema utiliza notificações Web Push. Essa tecnologia permite que seu dispositivo receba alertas de novos atendimentos e mensagens mesmo quando o aplicativo não estiver ativamente aberto na tela. Para garantir o recebimento desses alertas, basta seguir uma configuração rápida em três etapas.

### 1. Adicione o App na tela inicial do celular

O primeiro passo é adicionar o atalho (ícone) do ZPRO no seu celular (Android ou iOS). **É obrigatório abrir o Z-PRO por esse ícone** — no iOS, as notificações Web Push só funcionam quando o app é aberto pelo atalho instalado, e não pelo navegador.

#### **Para Android (Google Chrome):**

1. Abra o endereço do seu Z-PRO no **Chrome**.
2. Toque no menu **⋮** (três pontos) no canto superior direito.
3. Selecione **"Instalar app"** ou **"Adicionar à tela inicial"** e confirme.
4. Abra o Z-PRO pelo **ícone** que foi criado na tela inicial.

<figure><img src="/files/OODGlxqE4Hrkr7dELGmO" alt="" width="563"><figcaption></figcaption></figure>

#### **Para iPhone (iOS) — pelo Safari:**

1. Confirme que o iPhone está no **iOS 16.4 ou superior** (versões anteriores não suportam Web Push em PWA).
2. Abra o endereço do seu Z-PRO no **Safari**.
3. Toque no botão **Compartilhar** (o quadrado com a seta para cima).
4. Selecione **"Adicionar à Tela de Início"** e confirme.
5. Abra o Z-PRO pelo **ícone** criado na tela inicial — **não** pelo Safari.

<figure><img src="/files/kW9okKr8MGui4BCIfIuh" alt=""><figcaption></figcaption></figure>

### 2. Passo a Passo para Ativar as Notificações

#### Ative as Notificações no Aplicativo PWA

Primeiro, você precisa habilitar a recepção de notificações dentro do próprio PWA.

* Localize e acione o **botão (...)** (ao lado do ícone de sino).

{% hint style="info" %}
Este botão só é visível quando o Z-PRO é executado a partir do celular, com atalho na tela inicial (PWA).
{% endhint %}

<figure><img src="/files/ALw163i6o1fHv4pLBNVM" alt="" width="188"><figcaption></figcaption></figure>

#### Habilite o Web Push no Canal Desejado

Em seguida, você precisa dizer ao Z-PRO para qual canal você quer receber os alertas.

* No painel do Z-PRO, acesse **Canais**.
* Edite o canal para o qual deseja receber notificações.
* Marque a opção **"Habilitar WebPush"** e salve as alterações.

<figure><img src="/files/lDOgXJzHLNV6HIwHLjwE" alt=""><figcaption></figcaption></figure>

### 3. Customizações do ícone e nome do App

{% hint style="info" %}
**Disponível no perfil: Super-Administrador**
{% endhint %}

#### Alterando o Nome do Aplicativo

O nome definido aqui aparecerá no título da aba do navegador, nas telas de instalação do aplicativo e nos menus do sistema.

1. No campo **Nome do Aplicativo**, apague o nome atual e digite o nome da sua empresa.
2. Clique no botão azul **Salvar**.

<figure><img src="/files/TJtMU8XyxxUtvRx4jgmf" alt=""><figcaption></figcaption></figure>

#### Configurando o Ícone do Aplicativo (PWA)

Para que o ícone do seu app fique com a sua marca na tela inicial dos celulares dos clientes:

1. Vá até a seção **Ícone PWA**.
2. Clique em **Alterar ícone PWA**.
3. Envie a imagem da sua logo.

{% hint style="warning" %}
Para evitar distorções ou erros na instalação, a imagem enviada deve ser obrigatoriamente no formato **PNG quadrado**, com o tamanho mínimo de **512x512 pixels**.

Ao enviar esta única imagem, o sistema trabalhará de forma inteligente: ele gerará automaticamente 9 tamanhos diferentes (de 72px a 512px) e atualizará o arquivo interno (manifest.json) necessário para a instalação em qualquer dispositivo.
{% endhint %}

#### 4. Solução de Problemas

**Não estou recebendo as notificações. O que verificar?**

1. Você abriu o Z-PRO pelo **ícone instalado** na tela inicial (e não pelo navegador)? Esse é o erro mais comum — sem isso, o push não dispara (obrigatório no iOS).
2. Tocou no **botão (...)** ao lado do sino, **dentro do app**, para ativar as notificações? Ativar apenas nas configurações do celular **não basta** (Etapa 2).
3. A opção **"Habilitar WebPush"** está marcada no **canal** desejado (Configurações do Z-PRO → Canais)?
4. As **permissões de notificação** estão concedidas ao app/navegador nas configurações do celular?
5. Os modos **"Não Perturbe" / "Foco"** estão desativados?

{% hint style="info" %}
**Específico do iPhone (iOS):** o Web Push exige **iOS 16.4 ou superior** e que o app seja **aberto pelo ícone da tela inicial**. Pelo Safari normal, as notificações não funcionam.
{% endhint %}

{% hint style="info" %}
**Específico do Android:** a **otimização de bateria** e a **economia de dados** costumam bloquear notificações em segundo plano. Em **Configurações → Apps → (Z-PRO/Chrome) → Bateria**, deixe **"Sem restrições"**, e libere o uso de **dados em segundo plano**. Mantenha também o **Chrome atualizado**.
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://ajuda.zdg.com.br/ferramentas-adicionais-e-integracoes/notificacoes-aplicativo-web-push.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.