Tutorial: Enviar notificações por push para aplicativos Flutter usando os Hubs de Notificação do Azure por meio de um serviço de back-end

Artigo
07/27/2020

Neste tutorial, você usará os Hubs de Notificação do Azure para enviar notificações por push para um aplicativo Flutter direcionado ao Android e ao iOS.

Um back-end da API Web ASP.NET Core é usado para lidar com o registro de dispositivo para o cliente usando a abordagem de instalação mais recente e melhor. O serviço também enviará notificações por push de maneira multiplataforma.

Essas operações são tratadas usando o SDK dos Hubs de Notificação para operações de back-end. Mais detalhes sobre a abordagem geral são fornecidos na documentação Registrando do seu aplicativo back-end .

Este tutorial leva você pelas seguintes etapas:

Configure os Serviços de Notificação por Push e os Hubs de Notificação do Azure.
Crie um aplicativo de back-end da API Web ASP.NET Core.
Crie um aplicativo Flutter multiplataforma.
Configure o projeto android nativo para notificações por push.
Configure o projeto nativo do iOS para notificações por push.
Teste a solução.

Pré-requisitos

Para acompanhar, você precisa de:

Uma assinatura do Azure em que você pode criar e gerenciar recursos.
O kit de ferramentas flutter (juntamente com seus pré-requisitos).
Visual Studio Code com os plug-ins Flutter e Dart instalados.
CocoaPods instalado para gerenciar dependências de biblioteca.
A capacidade de executar o aplicativo em dispositivos Android (dispositivos físicos ou emuladores) ou iOS (somente dispositivos físicos).

Para Android, você deve ter:

Um dispositivo físico desbloqueado pelo desenvolvedor ou um emulador (executando a API 26 e superior com o Google Play Services instalado).

Para iOS, você deve ter:

Uma conta de desenvolvedor ativa da Apple.
Um dispositivo iOS físico registrado em sua conta de desenvolvedor(executando o iOS 13.0 e superior).
Um certificado de desenvolvimento.p12 instalado em seu keychain permitindo que você execute um aplicativo em um dispositivo físico.

Observação

O Simulador do iOS não dá suporte a notificações remotas e, portanto, um dispositivo físico é necessário ao explorar este exemplo no iOS. No entanto, você não precisa executar o aplicativo no Android e no iOS para concluir este tutorial.

Você pode seguir as etapas neste exemplo de primeiros princípios sem nenhuma experiência anterior. No entanto, você se beneficiará de ter familiaridade com os aspectos a seguir.

Portal do Desenvolvedor da Apple.
ASP.NET Core.
Console do Google Firebase.
Microsoft Azure e Enviar notificações por push para aplicativos iOS usando Hubs de Notificação do Azure.
Flutter e Dart para desenvolvimento multiplataforma.
Kotlin e Swift para desenvolvimento nativo de Android e iOS.

As etapas fornecidas são específicas para o macOS. É possível acompanhar o Windows ignorando os aspectos do iOS .

Configurar os Serviços de Notificação por Push e o Hub de Notificação do Azure

Nesta seção, você configurará o Firebase Cloud Messaging (FCM) e o APNS (Apple Push Notification Services). Em seguida, você cria e configura um hub de notificação para trabalhar com esses serviços.

Criar um projeto do Firebase e habilitar o Firebase Cloud Messaging para Android

Entre no console do Firebase. Crie um novo projeto do Firebase inserindo PushDemo como o Nome do projeto.

Observação

Um nome exclusivo será gerado para você. Por padrão, isso é composto por uma variante minúscula do nome fornecido mais um número gerado separado por um traço. Você pode alterar isso se quiser, desde que ainda seja globalmente exclusivo.
Depois de criar seu projeto, selecione Adicionar Firebase ao seu aplicativo Android.
Na página Adicionar o Firebase ao seu aplicativo Android , execute as etapas a seguir.
1. Para o nome do pacote android, insira um nome para o pacote. Por exemplo: com.<organization_identifier>.<package_name>.
2. Selecione Registrar aplicativo.
3. Selecione Baixar google-services.json. Em seguida, salve o arquivo em uma pasta local para uso posterior e selecione Avançar.
4. Selecione Avançar.
5. Selecione Continuar no console
  
  Observação
  
  Se o botão Continuar no console não estiver habilitado, devido à marcar de instalação de verificação, escolha Ignorar esta etapa.
No console do Firebase, selecione a engrenagem do projeto. Em seguida, selecione Configurações do Projeto.

Observação

Se você não tiver baixado o arquivo google-services.json , poderá baixá-lo nesta página.
Alterne para a guia Mensagens na Nuvem na parte superior. Copie e salve a chave do servidor para uso posterior. Use esse valor para configurar o hub de notificação.

Registrar seu aplicativo iOS para notificações por push

Para enviar notificações por push para um aplicativo iOS, registre seu aplicativo com a Apple e também registre-se para notificações por push.

Se você ainda não registrou seu aplicativo, navegue até o Portal de Provisionamento do iOS no Centro de Desenvolvedores da Apple. Entre no portal com sua ID da Apple, navegue até Certificados, Identificadores & Perfis e selecione Identificadores. Clique + para registrar um novo aplicativo.
Na tela Registrar um Novo Identificador , selecione o botão de opção IDs do aplicativo. Em seguida, selecione Continuar.
Atualize os três valores a seguir para o novo aplicativo e selecione Continuar:
- Descrição: digite um nome descritivo para seu aplicativo.
- ID do pacote: insira uma ID de pacote do formulário com.organization_identifier<.<>>product_name conforme mencionado no Guia de Distribuição de Aplicativos. Na captura de tela a seguir, o mobcat valor é usado como um identificador da organização e o valor PushDemo é usado como o nome do produto.
- Notificações por push: verifique a opção Notificações por Push na seção Funcionalidades .
  
  Essa ação gera a ID do aplicativo e solicita que você confirme as informações. Selecione Continuar e, em seguida, selecione Registrar para confirmar a nova ID do Aplicativo.
  
  Depois de selecionar Registrar, você verá a nova ID do Aplicativo como um item de linha na página Certificados, Identificadores & Perfis .
Na página Certificados, Identificadores & Perfis , em Identificadores, localize o item de linha ID do Aplicativo que você criou. Em seguida, selecione sua linha para exibir a tela Editar configuração de ID do aplicativo.

Criando um certificado para Hubs de Notificação

Um certificado é necessário para permitir que o hub de notificação funcione com o APNS (Serviços de Notificação por Push) da Apple e pode ser fornecido de duas maneiras:

Criando um certificado push p12 que pode ser carregado diretamente no Hub de Notificação (a abordagem original)
Criando um certificado p8 que pode ser usado para autenticação baseada em token (a abordagem mais recente e recomendada)

A abordagem mais recente tem uma série de benefícios, conforme documentado na autenticação baseada em token (HTTP/2) para APNS. Menos etapas são necessárias, mas também são obrigatórias para cenários específicos. No entanto, foram fornecidas etapas para ambas as abordagens, pois ambas funcionarão para fins deste tutorial.

OPÇÃO 1: Criando um certificado push p12 que pode ser carregado diretamente no Hub de Notificação

No Mac, execute a ferramenta Acesso ao Conjunto de Chaves. Ele pode ser aberto na pasta Utilitários ou na pasta Outros no Launchpad.
Selecione Acesso ao Conjunto de Chaves, expanda Assistente de Certificado e, em seguida, selecione Solicitar um Certificado de uma Autoridade de Certificação.

Observação

Por padrão, o Acesso ao Conjunto de Chaves seleciona o primeiro item da lista. Isso pode ser um problema se você estiver na categoria Certificados e a Apple Worldwide Developer Relations Certification Authority não for o primeiro item da lista. Verifique se você tem um item não chave ou se a chave da Autoridade de Certificação de Relações com o Desenvolvedor Mundial da Apple está selecionada, antes de gerar o CSR (Solicitação de Assinatura de Certificado).
Selecione o Endereço Email de Usuário, insira o valor nome comum, especifique Salvo em disco e selecione Continuar. Deixe ca Email Endereço em branco, pois ele não é necessário.
Insira um nome para o arquivo CSR (Solicitação de Autenticação de Certificado) em Salvar como, selecione o local em Onde e, em seguida, selecione Salvar.

Essa ação salva o arquivo CSR no local selecionado. O local padrão é Área de Trabalho. Lembre-se do local escolhido para o arquivo.
De volta à página Certificados, Identificadores & Perfis no Portal de Provisionamento do iOS, role para baixo até a opção Notificações por Push marcadas e selecione Configurar para criar o certificado.
A janela Certificados TLS/SSL do serviço de Notificação por Push da Apple é exibida. Selecione o botão Criar Certificado na seção Certificado TLS/SSL de Desenvolvimento .

A tela Criar um novo Certificado é exibida.

Observação

Este tutorial usa um certificado de desenvolvimento. O mesmo processo é usado ao registrar um certificado de produção. Apenas certifique-se de usar o mesmo tipo de certificado ao enviar notificações.
Selecione Escolher Arquivo, navegue até o local onde você salvou o arquivo CSR e clique duas vezes no nome do certificado para carregá-lo. Em seguida, selecione Continuar.
Depois que o portal criar o certificado, selecione o botão Baixar . Salve o certificado e lembre-se do local no qual ele foi salvo.

O certificado é baixado e salvo no computador na pasta Downloads .

Observação

Por padrão, o certificado de desenvolvimento baixado é nomeado aps_development.cer.
Clique duas vezes no certificado por push baixado aps_development.cer. Essa ação instala o novo certificado no conjunto de chaves, conforme mostrado na imagem a seguir:

Observação

Embora o nome no certificado possa ser diferente, o nome será prefixado com o Apple Development iOS Push Services e terá o identificador de pacote apropriado associado a ele.
No Acesso ao Conjunto de Chaves,clique em Controlar + no novo certificado push que você criou na categoria Certificados. Selecione Exportar, nomeie o arquivo, selecione o formato p12 e, em seguida, selecione Salvar.

Você pode optar por proteger o certificado com uma senha, mas uma senha é opcional. Clique em OK se quiser ignorar a criação de senha. Anote o nome do arquivo e o local do certificado p12 exportado. Eles são usados para habilitar a autenticação com APNs.

Observação

O nome e o local do arquivo p12 podem ser diferentes do que é retratado neste tutorial.

OPTION 2: Criando um certificado p8 que pode ser usado para autenticação baseada em token

Anote os seguintes detalhes:
- Prefixo da ID do aplicativo (ID da equipe)
- ID do pacote
De volta a Certificados, Identificadores & Perfis, clique em Chaves.

Observação

Se você já tiver uma chave configurada para APNS, poderá reutilize o certificado p8 baixado logo após sua criação. Nesse caso, você pode ignorar as etapas 3 a 5.
Clique no + botão (ou no botão Criar uma chave ) para criar uma nova chave.
Forneça um valor de Nome de Chave adequado e, em seguida, marcar a opção APNS (Serviço de Notificações por Push) da Apple e clique em Continuar, seguido por Registrar na próxima tela.
Clique em Baixar e, em seguida, mova o arquivo p8 (prefixado com AuthKey_) para um diretório local seguro e clique em Concluído.

Observação

Certifique-se de manter o arquivo p8 em um local seguro (e salvar um backup). Depois de baixar a chave, ela não pode ser baixada novamente, pois a cópia do servidor é removida.
Em Chaves, clique na chave que você criou (ou em uma chave existente se tiver escolhido usá-la).
Anote o valor da ID da chave .
Abra o certificado p8 em uma aplicação adequada de sua escolha, como Visual Studio Code. Anote o valor da chave (entre -----BEGIN PRIVATE KEY----- e -----END PRIVATE KEY-----).

CHAVE PRIVADA -----BEGIN-----
<key_value>
-----END PRIVATE KEY-----

Observação

Esse é o valor do token que será usado posteriormente para configurar o Hub de Notificação.

Ao final dessas etapas, você deve ter as seguintes informações para uso posteriormente em Configurar o hub de notificação com informações de APNS:

ID da equipe (consulte a etapa 1)
ID do pacote (consulte a etapa 1)
ID da chave (consulte a etapa 7)
Valor do token (valor da chave p8 obtido na etapa 8)

Criar um perfil de provisionamento para o aplicativo

Retorne ao Portal de Provisionamento do iOS, selecione Certificados, Identificadores & Perfis, selecione Perfis no menu à esquerda e selecione + para criar um novo perfil. A tela Registrar um Novo Perfil de Provisionamento é exibida.
Selecione Desenvolvimento de Aplicativos do iOS em Desenvolvimento como o tipo de perfil de provisionamento e, em seguida, selecione Continuar.
Em seguida, selecione a ID do aplicativo que você criou na lista suspensa ID do aplicativo e selecione Continuar.
Na janela Selecionar certificados , selecione o certificado de desenvolvimento que você usa para assinatura de código e selecione Continuar.

Observação

Esse certificado não é o certificado push que você criou na etapa anterior. Esse é o certificado de desenvolvimento. Se não existir, você deverá criá-lo, pois este é um pré-requisito para este tutorial. Os certificados de desenvolvedor podem ser criados no Portal do Desenvolvedor da Apple, por meio do Xcode ou do Visual Studio.
Retorne à página Certificados, Identificadores & Perfis , selecione Perfis no menu à esquerda e, em seguida, selecione + para criar um novo perfil. A tela Registrar um Novo Perfil de Provisionamento é exibida.
Na janela Selecionar certificados , selecione o certificado de desenvolvimento que você criou. Em seguida, selecione Continuar.
Em seguida, selecione os dispositivos a serem usados para teste e selecione Continuar.
Por fim, escolha um nome para o perfil em Nome do Perfil de Provisionamento e selecione Gerar.
Quando o novo perfil de provisionamento for criado, selecione Baixar. Lembre-se do local no qual ele foi salvo.
Navegue até o local do perfil de provisionamento e clique duas vezes nele para instalá-lo no computador de desenvolvimento.

Criar um Hub de Notificação

Nesta seção, você criará um hub de notificação e configurará a autenticação com APNS. Você pode usar um certificado push p12 ou uma autenticação baseada em token. Se você quiser usar um hub de notificação que já criou, poderá pular para a etapa 5.

Entre no Azure.
Clique em Criar um recurso, pesquise e escolha Hub de Notificação e clique em Criar.
Atualize os seguintes campos e clique em Criar:

DETALHES BÁSICOS

Assinatura: Escolha a Assinatura de destino na lista suspensa
Grupo de Recursos: Criar um novo Grupo de Recursos (ou escolher um existente)

DETALHES DO NAMESPACE

Namespace do Hub de Notificação: Insira um nome global exclusivo para o namespace do Hub de Notificação

Observação

Verifique se a opção Criar novo está selecionada para este campo.

DETALHES DO HUB DE NOTIFICAÇÃO

Hub de Notificação: Insira um nome para o Hub de Notificação
Localização: Escolha um local adequado na lista suspensa
Tipo de preço: Manter a opção gratuita padrão

Observação

A menos que você tenha atingido o número máximo de hubs na camada gratuita.
Depois que o Hub de Notificação tiver sido provisionado, navegue até esse recurso.
Navegue até o novo Hub de Notificação.
Selecione Políticas de Acesso na lista (em GERENCIAR).
Anote os valores de Nome da Política junto com seus valores de Cadeia de Conexão correspondentes.

Configurar o Hub de Notificação com informações de APNS

Em Serviços de Notificação, selecione Apple e siga as etapas apropriadas com base na abordagem escolhida anteriormente na seção Criando um certificado para hubs de notificação .

Observação

Use a Produção para Modo de Aplicativo somente se você quiser enviar notificações por push para os usuários que compraram seu aplicativo da loja.

OPÇÃO 1: usando um certificado push .p12

Selecione Certificado.
Selecione o ícone de arquivo.
Selecione o arquivo .p12 que você exportou anteriormente e selecione Abrir.
Se necessário, especifique a senha correta.
Selecione Modo de área restrita .
Clique em Salvar.

OPTION 2: Usando a autenticação baseada em token

Selecione Token.
Insira os seguintes valores adquiridos anteriormente:
- ID da chave
- ID do pacote
- ID da equipe
- Token
Escolha Área Restrita.
Clique em Salvar.

Configurar seu hub de notificação com informações de FCM

Selecione Google (GCM/FCM) na seção Configurações no menu à esquerda.
Insira a chave do servidor anotada no Console do Google Firebase.
Selecione Salvar na barra de ferramentas.

Criar um aplicativo de back-end da API Web ASP.NET Core

Nesta seção, você criará o ASP.NET Core back-end da API Web para lidar com o registro do dispositivo e o envio de notificações para o aplicativo móvel Flutter.

Criar um projeto Web

No Visual Studio, selecione Arquivo>Nova Solução.
SelecioneAplicativo>.NET Core>ASP.NET Core>API>Avançar.
Na caixa de diálogo Configurar seu novo ASP.NET Core API Web, selecioneTarget Framework do .NET Core 3.1.
Insira PushDemoApi para o Nome do Projeto e selecione Criar.
Inicie a depuração (Command + Enter) para testar o aplicativo modelo.
Observação

O aplicativo modelo é configurado para usar o WeatherForecastController como launchUrl. Isso é definido em Propriedades>launchSettings.json.

Se você for solicitado com uma mensagem de certificado de desenvolvimento inválido encontrada :
1. Clique em Sim para concordar em executar a ferramenta 'dotnet dev-certs https' para corrigir isso. A ferramenta 'dotnet dev-certs https' solicita que você insira uma senha para o certificado e a senha do conjunto de chaves.
2. Clique em Sim quando solicitado a Instalar e confiar no novo certificado e, em seguida, insira a senha do conjunto de chaves.
Expanda a pasta Controladores e exclua WeatherForecastController.cs.
Excluir WeatherForecast.cs.
Configure valores de configuração local usando a ferramenta Gerenciador de Segredos. A desacoplamento dos segredos da solução garante que eles não acabem no controle do código-fonte. Abra o Terminal e vá para o diretório do arquivo de projeto e execute os seguintes comandos:
```
dotnet user-secrets init
dotnet user-secrets set "NotificationHub:Name" <value>
dotnet user-secrets set "NotificationHub:ConnectionString" <value>
```
Substitua os valores de espaço reservado por seu próprio nome de hub de notificação e valores de cadeia de conexão. Você anotou uma nota deles na seção criar um hub de notificação . Caso contrário, você pode pesquisá-los no Azure.

NotificationHub:Name:
Consulte Nome no resumo do Essentials na parte superior da Visão geral.

NotificationHub:ConnectionString:
Consulte DefaultFullSharedAccessSignature em Políticas de Acesso

Observação

Para cenários de produção, você pode examinar opções como o Azure KeyVault para armazenar com segurança o cadeia de conexão. Para simplificar, os segredos serão adicionados às configurações do aplicativo Serviço de Aplicativo do Azure.

Autenticar clientes usando uma chave de API (opcional)

As chaves de API não são tão seguras quanto os tokens, mas serão suficientes para os fins deste tutorial. Uma chave de API pode ser configurada facilmente por meio do middleware ASP.NET.

Adicione a chave de API aos valores de configuração local.
```
dotnet user-secrets set "Authentication:ApiKey" <value>
```
Observação

Você deve substituir o valor do espaço reservado pelo seu próprio e anote-o.
Controle + Clique no projeto PushDemoApi , escolha Nova Pasta no menu Adicionar e clique em Adicionar usando Autenticação como o Nome da Pasta.
Controle + Clique na pasta Autenticação e escolha Novo Arquivo... no menu Adicionar .

SelecioneClasse VaziaGeral>, insira ApiKeyAuthOptions.cs para o Nome e clique em Novo adicionando a implementação a seguir.

using Microsoft.AspNetCore.Authentication;

namespace PushDemoApi.Authentication
{
    public class ApiKeyAuthOptions : AuthenticationSchemeOptions
    {
        public const string DefaultScheme = "ApiKey";
        public string Scheme => DefaultScheme;
        public string ApiKey { get; set; }
    }
}

Adicione outra Classe Vazia à pasta Autenticação chamada ApiKeyAuthHandler.cs e adicione a implementação a seguir.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Security.Claims;
using System.Text.Encodings.Web;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Authentication;
using Microsoft.Extensions.Logging;
using Microsoft.Extensions.Options;

namespace PushDemoApi.Authentication
{
    public class ApiKeyAuthHandler : AuthenticationHandler<ApiKeyAuthOptions>
    {
        const string ApiKeyIdentifier = "apikey";

        public ApiKeyAuthHandler(
            IOptionsMonitor<ApiKeyAuthOptions> options,
            ILoggerFactory logger,
            UrlEncoder encoder,
            ISystemClock clock)
            : base(options, logger, encoder, clock) {}

        protected override Task<AuthenticateResult> HandleAuthenticateAsync()
        {
            string key = string.Empty;

            if (Request.Headers[ApiKeyIdentifier].Any())
            {
                key = Request.Headers[ApiKeyIdentifier].FirstOrDefault();
            }
            else if (Request.Query.ContainsKey(ApiKeyIdentifier))
            {
                if (Request.Query.TryGetValue(ApiKeyIdentifier, out var queryKey))
                    key = queryKey;
            }

            if (string.IsNullOrWhiteSpace(key))
                return Task.FromResult(AuthenticateResult.Fail("No api key provided"));

            if (!string.Equals(key, Options.ApiKey, StringComparison.Ordinal))
                return Task.FromResult(AuthenticateResult.Fail("Invalid api key."));

            var identities = new List<ClaimsIdentity> {
                new ClaimsIdentity("ApiKeyIdentity")
            };

            var ticket = new AuthenticationTicket(
                new ClaimsPrincipal(identities), Options.Scheme);

            return Task.FromResult(AuthenticateResult.Success(ticket));
        }
    }
}

Observação

Um Manipulador de Autenticação é um tipo que implementa o comportamento de um esquema, nesse caso, um esquema de chave de API personalizado.

Adicione outra Classe Vazia à pasta Autenticação chamada ApiKeyAuthenticationBuilderExtensions.cs e adicione a implementação a seguir.

using System;
using Microsoft.AspNetCore.Authentication;

namespace PushDemoApi.Authentication
{
    public static class AuthenticationBuilderExtensions
    {
        public static AuthenticationBuilder AddApiKeyAuth(
            this AuthenticationBuilder builder,
            Action<ApiKeyAuthOptions> configureOptions)
        {
            return builder
                .AddScheme<ApiKeyAuthOptions, ApiKeyAuthHandler>(
                    ApiKeyAuthOptions.DefaultScheme,
                    configureOptions);
        }
    }
}

Observação

Esse método de extensão simplifica o código de configuração de middleware em Startup.cs tornando-o mais legível e geralmente mais fácil de seguir.

Em Startup.cs, atualize o método ConfigureServices para configurar a autenticação de Chave de API abaixo da chamada para os serviços. Método AddControllers .

using PushDemoApi.Authentication;
using PushDemoApi.Models;
using PushDemoApi.Services;

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllers();

    services.AddAuthentication(options =>
    {
        options.DefaultAuthenticateScheme = ApiKeyAuthOptions.DefaultScheme;
        options.DefaultChallengeScheme = ApiKeyAuthOptions.DefaultScheme;
    }).AddApiKeyAuth(Configuration.GetSection("Authentication").Bind);
}

Ainda em Startup.cs, atualize o método Configure para chamar os métodos de extensão UseAuthentication e UseAuthorization no IApplicationBuilder do aplicativo. Verifique se esses métodos são chamados após UseRouting e antes do aplicativo. UseEndpoints.
```
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.UseHttpsRedirection();

    app.UseRouting();

    app.UseAuthentication();

    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });
}
```
Observação

Chamar UseAuthentication registra o middleware que usa os esquemas de autenticação registrados anteriormente (de ConfigureServices). Isso deve ser chamado antes de qualquer middleware que dependa da autenticação dos usuários.

Adicionar dependências e configurar serviços

ASP.NET Core dá suporte ao padrão de design de software de DI (injeção de dependência), que é uma técnica para alcançar a IoC (Inversão de Controle) entre classes e suas dependências.

O uso do hub de notificação e do SDK dos Hubs de Notificação para operações de back-end é encapsulado em um serviço. O serviço é registrado e disponibilizado por meio de uma abstração adequada.

Controle + Clique na pasta Dependências e escolha Gerenciar Pacotes NuGet....
Pesquise Microsoft.Azure.NotificationHubs e verifique se ele está marcado.
Clique em Adicionar Pacotes e em Aceitar quando solicitado a aceitar os termos de licença.
Controle + Clique no projeto PushDemoApi , escolha Nova Pasta no menu Adicionar e, em seguida, clique em Adicionar usando Modelos como o Nome da Pasta.
Controle + Clique na pasta Modelos e escolha Novo Arquivo... no menu Adicionar .

SelecioneClasse VaziaGeral>, insira PushTemplates.cs para o Nome e clique em Novo adicionando a implementação a seguir.

namespace PushDemoApi.Models
{
    public class PushTemplates
    {
        public class Generic
        {
            public const string Android = "{ \"notification\": { \"title\" : \"PushDemo\", \"body\" : \"$(alertMessage)\"}, \"data\" : { \"action\" : \"$(alertAction)\" } }";
            public const string iOS = "{ \"aps\" : {\"alert\" : \"$(alertMessage)\"}, \"action\" : \"$(alertAction)\" }";
        }

        public class Silent
        {
            public const string Android = "{ \"data\" : {\"message\" : \"$(alertMessage)\", \"action\" : \"$(alertAction)\"} }";
            public const string iOS = "{ \"aps\" : {\"content-available\" : 1, \"apns-priority\": 5, \"sound\" : \"\", \"badge\" : 0}, \"message\" : \"$(alertMessage)\", \"action\" : \"$(alertAction)\" }";
        }
    }
}

Observação

Essa classe contém os conteúdos de notificação com token para as notificações genéricas e silenciosas exigidas por esse cenário. As cargas são definidas fora da Instalação para permitir a experimentação sem precisar atualizar as instalações existentes por meio do serviço. O tratamento de alterações nas instalações dessa maneira está fora do escopo deste tutorial. Para produção, considere modelos personalizados.

Adicione outra Classe Vazia à pasta Modelos chamada DeviceInstallation.cs e adicione a implementação a seguir.

using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;

namespace PushDemoApi.Models
{
    public class DeviceInstallation
    {
        [Required]
        public string InstallationId { get; set; }

        [Required]
        public string Platform { get; set; }

        [Required]
        public string PushChannel { get; set; }

        public IList<string> Tags { get; set; } = Array.Empty<string>();
    }
}

Adicione outra Classe Vazia à pasta Modelos chamada NotificationRequest.cs e adicione a implementação a seguir.

using System;

namespace PushDemoApi.Models
{
    public class NotificationRequest
    {
        public string Text { get; set; }
        public string Action { get; set; }
        public string[] Tags { get; set; } = Array.Empty<string>();
        public bool Silent { get; set; }
    }
}

Adicione outra Classe Vazia à pasta Modelos chamada NotificationHubOptions.cs e adicione a implementação a seguir.

using System.ComponentModel.DataAnnotations;

namespace PushDemoApi.Models
{
    public class NotificationHubOptions
    {
        [Required]
        public string Name { get; set; }

        [Required]
        public string ConnectionString { get; set; }
    }
}

Adicione uma nova pasta ao projeto PushDemoApi chamado Serviços.

Adicione uma Interface Vazia à pasta Serviços chamada INotificationService.cs e adicione a implementação a seguir.

using System.Threading;
using System.Threading.Tasks;
using PushDemoApi.Models;

namespace PushDemoApi.Services
{
    public interface INotificationService
    {
        Task<bool> CreateOrUpdateInstallationAsync(DeviceInstallation deviceInstallation, CancellationToken token);
        Task<bool> DeleteInstallationByIdAsync(string installationId, CancellationToken token);
        Task<bool> RequestNotificationAsync(NotificationRequest notificationRequest, CancellationToken token);
    }
}

Adicione uma Classe Vazia à pasta Serviços chamada NotificationHubsService.cs e adicione o seguinte código para implementar a interface INotificationService :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Threading.Tasks;
using Microsoft.Azure.NotificationHubs;
using Microsoft.Extensions.Logging;
using Microsoft.Extensions.Options;
using PushDemoApi.Models;

namespace PushDemoApi.Services
{
    public class NotificationHubService : INotificationService
    {
        readonly NotificationHubClient _hub;
        readonly Dictionary<string, NotificationPlatform> _installationPlatform;
        readonly ILogger<NotificationHubService> _logger;

        public NotificationHubService(IOptions<NotificationHubOptions> options, ILogger<NotificationHubService> logger)
        {
            _logger = logger;
            _hub = NotificationHubClient.CreateClientFromConnectionString(
                options.Value.ConnectionString,
                options.Value.Name);

            _installationPlatform = new Dictionary<string, NotificationPlatform>
            {
                { nameof(NotificationPlatform.Apns).ToLower(), NotificationPlatform.Apns },
                { nameof(NotificationPlatform.Fcm).ToLower(), NotificationPlatform.Fcm }
            };
        }

        public async Task<bool> CreateOrUpdateInstallationAsync(DeviceInstallation deviceInstallation, CancellationToken token)
        {
            if (string.IsNullOrWhiteSpace(deviceInstallation?.InstallationId) ||
                string.IsNullOrWhiteSpace(deviceInstallation?.Platform) ||
                string.IsNullOrWhiteSpace(deviceInstallation?.PushChannel))
                return false;

            var installation = new Installation()
            {
                InstallationId = deviceInstallation.InstallationId,
                PushChannel = deviceInstallation.PushChannel,
                Tags = deviceInstallation.Tags
            };

            if (_installationPlatform.TryGetValue(deviceInstallation.Platform, out var platform))
                installation.Platform = platform;
            else
                return false;

            try
            {
                await _hub.CreateOrUpdateInstallationAsync(installation, token);
            }
            catch
            {
                return false;
            }

            return true;
        }

        public async Task<bool> DeleteInstallationByIdAsync(string installationId, CancellationToken token)
        {
            if (string.IsNullOrWhiteSpace(installationId))
                return false;

            try
            {
                await _hub.DeleteInstallationAsync(installationId, token);
            }
            catch
            {
                return false;
            }

            return true;
        }

        public async Task<bool> RequestNotificationAsync(NotificationRequest notificationRequest, CancellationToken token)
        {
            if ((notificationRequest.Silent &&
                string.IsNullOrWhiteSpace(notificationRequest?.Action)) ||
                (!notificationRequest.Silent &&
                (string.IsNullOrWhiteSpace(notificationRequest?.Text)) ||
                string.IsNullOrWhiteSpace(notificationRequest?.Action)))
                return false;

            var androidPushTemplate = notificationRequest.Silent ?
                PushTemplates.Silent.Android :
                PushTemplates.Generic.Android;

            var iOSPushTemplate = notificationRequest.Silent ?
                PushTemplates.Silent.iOS :
                PushTemplates.Generic.iOS;

            var androidPayload = PrepareNotificationPayload(
                androidPushTemplate,
                notificationRequest.Text,
                notificationRequest.Action);

            var iOSPayload = PrepareNotificationPayload(
                iOSPushTemplate,
                notificationRequest.Text,
                notificationRequest.Action);

            try
            {
                if (notificationRequest.Tags.Length == 0)
                {
                    // This will broadcast to all users registered in the notification hub
                    await SendPlatformNotificationsAsync(androidPayload, iOSPayload, token);
                }
                else if (notificationRequest.Tags.Length <= 20)
                {
                    await SendPlatformNotificationsAsync(androidPayload, iOSPayload, notificationRequest.Tags, token);
                }
                else
                {
                    var notificationTasks = notificationRequest.Tags
                        .Select((value, index) => (value, index))
                        .GroupBy(g => g.index / 20, i => i.value)
                        .Select(tags => SendPlatformNotificationsAsync(androidPayload, iOSPayload, tags, token));

                    await Task.WhenAll(notificationTasks);
                }

                return true;
            }
            catch (Exception e)
            {
                _logger.LogError(e, "Unexpected error sending notification");
                return false;
            }
        }

        string PrepareNotificationPayload(string template, string text, string action) => template
            .Replace("$(alertMessage)", text, StringComparison.InvariantCulture)
            .Replace("$(alertAction)", action, StringComparison.InvariantCulture);

        Task SendPlatformNotificationsAsync(string androidPayload, string iOSPayload, CancellationToken token)
        {
            var sendTasks = new Task[]
            {
                _hub.SendFcmNativeNotificationAsync(androidPayload, token),
                _hub.SendAppleNativeNotificationAsync(iOSPayload, token)
            };

            return Task.WhenAll(sendTasks);
        }

        Task SendPlatformNotificationsAsync(string androidPayload, string iOSPayload, IEnumerable<string> tags, CancellationToken token)
        {
            var sendTasks = new Task[]
            {
                _hub.SendFcmNativeNotificationAsync(androidPayload, tags, token),
                _hub.SendAppleNativeNotificationAsync(iOSPayload, tags, token)
            };

            return Task.WhenAll(sendTasks);
        }
    }
}

Observação

A expressão de marca fornecida a SendTemplateNotificationAsync é limitada a 20 marcas. Ele é limitado a 6 para a maioria dos operadores, mas a expressão contém apenas ORs (||) nesse caso. Se houver mais de 20 marcas na solicitação, elas deverão ser divididas em várias solicitações. Consulte a documentação Expressões de Roteamento e Marca para obter mais detalhes.

Em Startup.cs, atualize o método ConfigureServices para adicionar o NotificationHubsService como uma implementação singleton de INotificationService.


using PushDemoApi.Models;
using PushDemoApi.Services;

public void ConfigureServices(IServiceCollection services)
{
    ...

    services.AddSingleton<INotificationService, NotificationHubService>();

    services.AddOptions<NotificationHubOptions>()
        .Configure(Configuration.GetSection("NotificationHub").Bind)
        .ValidateDataAnnotations();
}

Criar a API de notificações

Controle + Clique na pasta Controladores e escolha Novo Arquivo... no menu Adicionar .
Selecione ASP.NET Core>Classe de Controlador de API Web, insira NotificationsController para o Nome e clique em Novo.

Observação

Se você estiver seguindo com o Visual Studio 2019, escolha o modelo Controlador de API com ações de leitura/gravação .

Adicione os namespaces a seguir à parte superior do arquivo.

using System.ComponentModel.DataAnnotations;
using System.Net;
using System.Threading;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using PushDemoApi.Models;
using PushDemoApi.Services;

Atualize o controlador modelo para que ele seja derivado de ControllerBase e seja decorado com o atributo ApiController .
```
[ApiController]
[Route("api/[controller]")]
public class NotificationsController : ControllerBase
{
    // Templated methods here
}
```
Observação

A classe base Controller fornece suporte para exibições, mas isso não é necessário nesse caso e, portanto , ControllerBase pode ser usado. Se você estiver seguindo com o Visual Studio 2019, ignore esta etapa.
Se você optar por concluir a seção Autenticar clientes usando uma Chave de API , decore o NotificationsController com o atributo Authorize também.
```
[Authorize]
```

Atualize o construtor para aceitar a instância registrada de INotificationService como um argumento e atribua-o a um membro somente leitura.

readonly INotificationService _notificationService;

public NotificationsController(INotificationService notificationService)
{
    _notificationService = notificationService;
}

Em launchSettings.json (dentro da pasta Propriedades ), altere launchUrl de weatherforecast para api/notifications para corresponder à URL especificada no atributo RegistrationsControllerRoute .
Inicie a depuração (Command + Enter) para validar se o aplicativo está funcionando com o novo NotificationsController e retorna um 401 Status não autorizado.

Observação

O Visual Studio pode não iniciar automaticamente o aplicativo no navegador. Você usará o Postman para testar a API desse ponto em diante.
Em uma nova guia do Postman , defina a solicitação como GET. Insira o endereço abaixo substituindo o espaço reservado< applicationUrl> pelo aplicativo httpsUrl encontrado em Propriedades>launchSettings.json.
```
<applicationUrl>/api/notifications
```
Observação

O applicationUrl deve ser 'https://localhost:5001' para o perfil padrão. Se você estiver usando o IIS (padrão no Visual Studio 2019 no Windows), deverá usar o applicationUrl especificado no item iisSettings . Você receberá uma resposta 404 se o endereço estiver incorreto.
Se você optar por concluir a seção Autenticar clientes usando uma Chave de API , configure os cabeçalhos de solicitação para incluir o valor de apikey .

Chave Valor

apikey <your_api_key>
Clique no botão Enviar .

Observação

Você deve receber uma status 200 OK com algum conteúdo JSON.

Se você receber um aviso de verificação de certificado SSL , poderá alternar a configuração do Postman de verificação de certificado SSL de solicitação nas Configurações.

Chave	Valor
apikey	<your_api_key>

Substitua os métodos de classe com modelo em NotificationsController.cs pelo código a seguir.

[HttpPut]
[Route("installations")]
[ProducesResponseType((int)HttpStatusCode.OK)]
[ProducesResponseType((int)HttpStatusCode.BadRequest)]
[ProducesResponseType((int)HttpStatusCode.UnprocessableEntity)]
public async Task<IActionResult> UpdateInstallation(
    [Required]DeviceInstallation deviceInstallation)
{
    var success = await _notificationService
        .CreateOrUpdateInstallationAsync(deviceInstallation, HttpContext.RequestAborted);

    if (!success)
        return new UnprocessableEntityResult();

    return new OkResult();
}

[HttpDelete()]
[Route("installations/{installationId}")]
[ProducesResponseType((int)HttpStatusCode.OK)]
[ProducesResponseType((int)HttpStatusCode.BadRequest)]
[ProducesResponseType((int)HttpStatusCode.UnprocessableEntity)]
public async Task<ActionResult> DeleteInstallation(
    [Required][FromRoute]string installationId)
{
    var success = await _notificationService
        .DeleteInstallationByIdAsync(installationId, CancellationToken.None);

    if (!success)
        return new UnprocessableEntityResult();

    return new OkResult();
}

[HttpPost]
[Route("requests")]
[ProducesResponseType((int)HttpStatusCode.OK)]
[ProducesResponseType((int)HttpStatusCode.BadRequest)]
[ProducesResponseType((int)HttpStatusCode.UnprocessableEntity)]
public async Task<IActionResult> RequestPush(
    [Required]NotificationRequest notificationRequest)
{
    if ((notificationRequest.Silent &&
        string.IsNullOrWhiteSpace(notificationRequest?.Action)) ||
        (!notificationRequest.Silent &&
        string.IsNullOrWhiteSpace(notificationRequest?.Text)))
        return new BadRequestResult();

    var success = await _notificationService
        .RequestNotificationAsync(notificationRequest, HttpContext.RequestAborted);

    if (!success)
        return new UnprocessableEntityResult();

    return new OkResult();
}

Criar o aplicativo de API

Agora você cria um Aplicativo de API no Serviço de Aplicativo do Azure para hospedar o serviço de back-end.

Entre no portal do Azure.
Clique em Criar um recurso, pesquise e escolha Aplicativo de API e clique em Criar.
Atualize os campos a seguir e clique em Criar.

Nome do aplicativo:
Insira um nome globalmente exclusivo para o aplicativo de API

Assinatura:
Escolha a mesma Assinatura de destino na qual você criou o hub de notificação.

Grupo de Recursos:
Escolha o mesmo Grupo de Recursos no qual você criou o hub de notificação.

Serviço de Aplicativo Plano/Local:
Criar um novo plano de Serviço de Aplicativo

Observação

Altere da opção padrão para um plano que inclua suporte a SSL . Caso contrário, você precisará executar as etapas apropriadas ao trabalhar com o aplicativo móvel para impedir que as solicitações http sejam bloqueadas.

Application Insights:
Mantenha a opção sugerida (um novo recurso será criado usando esse nome) ou escolha um recurso existente.
Depois que o Aplicativo de API tiver sido provisionado, navegue até esse recurso.
Anote a propriedade URL no resumo do Essentials na parte superior da Visão geral. Essa URL é o ponto de extremidade de back-end que será usado posteriormente neste tutorial.

Observação

A URL usa o nome do aplicativo de API especificado anteriormente, com o formato https://<app_name>.azurewebsites.net.
Selecione Configuração na lista (em Configurações).
Para cada uma das configurações abaixo, clique em Nova configuração de aplicativo para inserir o Nome e um Valor e clique em OK.

Nome Valor

Authentication:ApiKey <api_key_value>

NotificationHub:Name <hub_name_value>

NotificationHub:ConnectionString <hub_connection_string_value>

Observação

Essas são as mesmas configurações que você definiu anteriormente nas configurações do usuário. Você deve ser capaz de copiá-los. A configuração Authentication:ApiKey será necessária somente se você optar por concluir a seção Autenticar clientes usando uma chave de API . Para cenários de produção, você pode examinar opções como o Azure KeyVault. Elas foram adicionadas como configurações de aplicativo para simplificar nesse caso.
Depois que todas as configurações do aplicativo tiverem sido adicionadas, clique em Salvar e em Continuar.

Nome	Valor
`Authentication:ApiKey`	<api_key_value>
`NotificationHub:Name`	<hub_name_value>
`NotificationHub:ConnectionString`	<hub_connection_string_value>

Publicar o serviço de back-end

Em seguida, implante o aplicativo no Aplicativo de API para torná-lo acessível de todos os dispositivos.

Observação

As etapas a seguir são específicas para Visual Studio para Mac. Se você estiver seguindo com o Visual Studio 2019 no Windows, o fluxo de publicação será diferente. Consulte Publicar no Serviço de Aplicativo do Azure no Windows.

Altere sua configuração de Depurar para Versão se você ainda não tiver feito isso.
Controle + Clique no projeto PushDemoApi e escolha Publicar no Azure... no menu Publicar .
Siga o fluxo de autenticação se solicitado a fazê-lo. Use a conta que você usou na seção anterior criar o Aplicativo de API .
Selecione o aplicativo de API Serviço de Aplicativo do Azure criado anteriormente na lista como destino de publicação e clique em Publicar.

Depois de concluir o assistente, ele publicará o aplicativo no Azure e abrirá o aplicativo. Anote a URL se você ainda não tiver feito isso. Essa URL é o ponto de extremidade de back-end usado posteriormente neste tutorial.

Validando a API publicada

No Postman , abra uma nova guia, defina a solicitação como PUT e insira o endereço abaixo. Substitua o espaço reservado pelo endereço base que você anotou na seção publicar anteriormente o serviço de back-end .
```
https://<app_name>.azurewebsites.net/api/notifications/installations
```
Observação

O endereço base deve estar no formato https://<app_name>.azurewebsites.net/
Se você optar por concluir a seção Autenticar clientes usando uma Chave de API , configure os cabeçalhos de solicitação para incluir o valor de apikey .

Chave Valor

apikey <your_api_key>
Escolha a opção bruta para o Corpo, escolha JSON na lista de opções de formato e, em seguida, inclua algum conteúdo JSON de espaço reservado:
```
{}
```
Clique em Enviar.

Observação

Você deve receber uma status 422 UnprocessableEntity do serviço.
Execute as etapas de 1 a 4 novamente, mas desta vez especificando o ponto de extremidade de solicitações para validar se você recebe uma resposta de Solicitação Inválida 400 .
```
https://<app_name>.azurewebsites.net/api/notifications/requests
```

Chave	Valor
apikey	<your_api_key>

Observação

Ainda não é possível testar a API usando dados de solicitação válidos, pois isso exigirá informações específicas da plataforma do aplicativo móvel cliente.

Criar um aplicativo Flutter multiplataforma

Nesta seção, você criará um aplicativo móvel Flutter implementando notificações por push de maneira multiplataforma.

Ele permite registrar e cancelar o registro de um hub de notificação por meio do serviço de back-end que você criou.

Um alerta é exibido quando uma ação é especificada e o aplicativo está em primeiro plano. Caso contrário, as notificações aparecerão no centro de notificações.

Observação

Normalmente, você executaria as ações de registro (e desregistração) durante o ponto apropriado no ciclo de vida do aplicativo (ou como parte de sua experiência de primeira execução, talvez) sem entradas explícitas de registro/cancelamento de registro de usuário. No entanto, este exemplo exigirá entrada explícita do usuário para permitir que essa funcionalidade seja explorada e testada com mais facilidade.

Criar a solução Flutter

Abra uma nova instância do Visual Studio Code.
Abra a paleta de comandos (Comando + Shift + P).
Selecione o comando Flutter: New Project e pressione Enter.
Insira push_demo para o Nome do Projeto e selecione um Local do projeto.
Quando solicitado a fazer isso, escolha Obter Pacotes.
Controle + Clique na pasta kotlin (em app>src>main) e, em seguida, escolha Revelar no Localizador. Em seguida, renomeie as pastas filho (na pasta kotlin ) como com, <your_organization>e pushdemo respectivamente.
Observação

Ao usar o modelo Visual Studio Code essas pastas usam como padrão com, por exemplo, <project_name>. Supondo que mobcat seja usado para a organização, a estrutura de pastas deve aparecer como:
- kotlin
  - com
    - mobcat
      
      pushdemo
De volta ao Visual Studio Code, atualize o valor applicationId em android>app>build.gradle para com.<your_organization>.pushdemo.

Observação

Você deve usar seu próprio nome de organização para o <espaço reservado your_organization> . Por exemplo, usar mobcat como a organização resultará em um valor de nome de pacotede com.mobcat.pushdemo.
Atualize o atributo de pacote nos arquivos AndroidManifest.xml, em src>debug, src>main e src>profile, respectivamente. Verifique se os valores correspondem à applicationId usada na etapa anterior.
```
<manifest
    xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.<your_organization>.pushdemo>">
    ...
</manifest>
```
Atualize o android:label atributo no arquivo AndroidManifest.xml em src>main para PushDemo. Em seguida, adicione o android:allowBackup atributo, diretamente em android:label, definindo seu valor como false.
```
<application
    android:name="io.flutter.app.FlutterApplication"
    android:label="PushDemo"
    android:allowBackup="false"
    android:icon="@mipmap/ic_launcher">
    ...
</application>
```
Abra o arquivo build.gradle no nível do aplicativo (android>app>build.gradle) e atualize o compileSdkVersion (da seção android ) para usar a API 29. Em seguida, atualize os valores minSdkVersion e targetSdkVersion (da seção defaultConfig ) para 26 e 29 , respectivamente.

Observação

Somente os dispositivos que executam o nível de API 26 e superiores têm suporte para os fins deste tutorial, no entanto, você pode estendê-lo para dar suporte a dispositivos que executam versões mais antigas.
Controle + Clique na pasta ios e escolha Abrir no Xcode.
No Xcode, clique em Executor (o xcodeproj na parte superior, não a pasta). Em seguida, selecione o Destino do executor e selecione a guia Geral . Com a configuração Toda a compilação selecionada, atualize o Identificador de Pacote para com.<your_organization>.PushDemo.

Observação

Você deve usar seu próprio nome de organização para o <espaço reservado your_organization> . Por exemplo, usar mobcat como a organização resultará em um valor de Identificador de Pacote de com.mobcat.PushDemo.
Clique em Info.plist e atualize o valor do nome do pacote para PushDemo
Feche o Xcode e retorne ao Visual Studio Code.
De volta ao Visual Studio Code, abra pubspec.yaml, adicione os pacoteshttp e flutter_secure_storage Dart como dependências. Em seguida, salve o arquivo e clique em Obter Pacotes quando solicitado a fazer isso.
```
dependencies:
  flutter:
    sdk: flutter

  http: ^0.12.1
  flutter_secure_storage: ^3.3.3
```
No Terminal, altere o diretório para a pasta ios (para seu projeto Flutter). Em seguida, execute o comando de instalação do pod para instalar novos pods (exigidos pelo pacote flutter_secure_storage ).

Controle + Clique na pasta lib e escolha Novo Arquivo no menu usando main_page.dart como o nome do arquivo. Em seguida, adicione o código a seguir.

import 'package:flutter/material.dart';

class MainPage extends StatefulWidget {
  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[],
        )
      )
    );
  }
}

Em main.dart, substitua o código modelo pelo seguinte.

import 'package:flutter/material.dart';
import 'package:push_demo/main_page.dart';

final navigatorKey = GlobalKey<NavigatorState>();

void main() => runApp(MaterialApp(home: MainPage(), navigatorKey: navigatorKey));

No Terminal, compile e execute o aplicativo em cada plataforma de destino para testar as execuções do aplicativo modelo em seus dispositivos. Verifique se os dispositivos com suporte estão conectados.
```
flutter run
```

Implementar os componentes multiplataforma

Controle + Clique na pasta lib e escolha Nova Pasta no menu usando modelos como o Nome da Pasta.

Controle + Clique na pasta modelos e escolha Novo Arquivo no menu usando device_installation.dart como o nome do arquivo. Em seguida, adicione o código a seguir.

class DeviceInstallation {
    final String deviceId;
    final String platform;
    final String token;
    final List<String> tags;

    DeviceInstallation(this.deviceId, this.platform, this.token, this.tags);

    DeviceInstallation.fromJson(Map<String, dynamic> json)
      : deviceId = json['installationId'],
        platform = json['platform'],
        token = json['pushChannel'],
        tags = json['tags'];

    Map<String, dynamic> toJson() =>
    {
      'installationId': deviceId,
      'platform': platform,
      'pushChannel': token,
      'tags': tags,
    };
}

Adicione um novo arquivo à pasta models chamada push_demo_action.dart definindo a enumeração de ações com suporte neste exemplo.
```
enum PushDemoAction {
  actionA,
  actionB,
}
```

Adicione uma nova pasta ao projeto chamada serviços e adicione um novo arquivo a essa pasta chamado device_installation_service.dart com a implementação a seguir.

import 'package:flutter/services.dart';

class DeviceInstallationService {
  static const deviceInstallation = const MethodChannel('com.<your_organization>.pushdemo/deviceinstallation');
  static const String getDeviceIdChannelMethod = "getDeviceId";
  static const String getDeviceTokenChannelMethod = "getDeviceToken";
  static const String getDevicePlatformChannelMethod = "getDevicePlatform";

  Future<String> getDeviceId() {
    return deviceInstallation.invokeMethod(getDeviceIdChannelMethod);
  }

  Future<String> getDeviceToken() {
    return deviceInstallation.invokeMethod(getDeviceTokenChannelMethod);
  }

  Future<String> getDevicePlatform() {
    return deviceInstallation.invokeMethod(getDevicePlatformChannelMethod);
  }
}

Observação

Você deve usar seu próprio nome de organização para o <espaço reservado your_organization> . Por exemplo, usar mobcat como a organização resultará em um nome MethodChannel de com.mobcat.pushdemo/deviceinstallation.

Essa classe encapsula o trabalho com a plataforma nativa subjacente para adquirir os detalhes de instalação do dispositivo necessário. Um MethodChannel facilita a comunicação assíncrona bidirecional com as plataformas nativas subjacentes. O equivalente específico da plataforma para esse canal será criado nas etapas posteriores.

Adicione outro arquivo a essa pasta chamado notification_action_service.dart com a implementação a seguir.

import 'package:flutter/services.dart';
import 'dart:async';
import 'package:push_demo/models/push_demo_action.dart';

class NotificationActionService {
  static const notificationAction =
      const MethodChannel('com.<your_organization>.pushdemo/notificationaction');
  static const String triggerActionChannelMethod = "triggerAction";
  static const String getLaunchActionChannelMethod = "getLaunchAction";

  final actionMappings = {
    'action_a' : PushDemoAction.actionA,
    'action_b' : PushDemoAction.actionB
  };

  final actionTriggeredController = StreamController.broadcast();

  NotificationActionService() {
    notificationAction
        .setMethodCallHandler(handleNotificationActionCall);
  }

  Stream get actionTriggered => actionTriggeredController.stream;

  Future<void> triggerAction({action: String}) async {

    if (!actionMappings.containsKey(action)) {
      return;
    }

    actionTriggeredController.add(actionMappings[action]);
  }

  Future<void> checkLaunchAction() async {
    final launchAction = await notificationAction.invokeMethod(getLaunchActionChannelMethod) as String;

    if (launchAction != null) {
      triggerAction(action: launchAction);
    }
  }

  Future<void> handleNotificationActionCall(MethodCall call) async {
    switch (call.method) {
      case triggerActionChannelMethod:
        return triggerAction(action: call.arguments as String);
      default:
        throw MissingPluginException();
        break;
    }
  }
}

Observação

Isso é usado como um mecanismo simples para centralizar o tratamento de ações de notificação para que elas possam ser tratadas de maneira multiplataforma usando uma enumeração fortemente tipada. O serviço permite que a plataforma nativa subjacente dispare uma ação, quando uma é especificada na carga de notificação. Ele também permite que o código comum marcar retrospectivamente se uma ação foi especificada durante a inicialização do aplicativo quando o Flutter estiver pronto para processá-lo. Por exemplo, quando o aplicativo é iniciado tocando em uma notificação do centro de notificações.

Adicione um novo arquivo à pasta de serviços chamada notification_registration_service.dart com a implementação a seguir.

import 'dart:convert';
import 'package:flutter/services.dart';
import 'package:http/http.dart' as http;
import 'package:push_demo/services/device_installation_service.dart';
import 'package:push_demo/models/device_installation.dart';
import 'package:flutter_secure_storage/flutter_secure_storage.dart';

class NotificationRegistrationService {
  static const notificationRegistration =
      const MethodChannel('com.<your_organization>.pushdemo/notificationregistration');

  static const String refreshRegistrationChannelMethod = "refreshRegistration";
  static const String installationsEndpoint = "api/notifications/installations";
  static const String cachedDeviceTokenKey = "cached_device_token";
  static const String cachedTagsKey = "cached_tags";

  final deviceInstallationService = DeviceInstallationService();
  final secureStorage = FlutterSecureStorage();

  String baseApiUrl;
  String apikey;

  NotificationRegistrationService(this.baseApiUrl, this.apikey) {
    notificationRegistration
        .setMethodCallHandler(handleNotificationRegistrationCall);
  }

  String get installationsUrl => "$baseApiUrl$installationsEndpoint";

  Future<void> deregisterDevice() async {
    final cachedToken = await secureStorage.read(key: cachedDeviceTokenKey);
    final serializedTags = await secureStorage.read(key: cachedTagsKey);

    if (cachedToken == null || serializedTags == null) {
      return;
    }

    var deviceId = await deviceInstallationService.getDeviceId();

    if (deviceId.isEmpty) {
      throw "Unable to resolve an ID for the device.";
    }

    var response = await http
        .delete("$installationsUrl/$deviceId", headers: {"apikey": apikey});

    if (response.statusCode != 200) {
      throw "Deregister request failed: ${response.reasonPhrase}";
    }

    await secureStorage.delete(key: cachedDeviceTokenKey);
    await secureStorage.delete(key: cachedTagsKey);
  }

  Future<void> registerDevice(List<String> tags) async {
    try {
      final deviceId = await deviceInstallationService.getDeviceId();
      final platform = await deviceInstallationService.getDevicePlatform();
      final token = await deviceInstallationService.getDeviceToken();

      final deviceInstallation =
          DeviceInstallation(deviceId, platform, token, tags);

      final response = await http.put(installationsUrl,
          body: jsonEncode(deviceInstallation),
          headers: {"apikey": apikey, "Content-Type": "application/json"});

      if (response.statusCode != 200) {
        throw "Register request failed: ${response.reasonPhrase}";
      }

      final serializedTags = jsonEncode(tags);

      await secureStorage.write(key: cachedDeviceTokenKey, value: token);
      await secureStorage.write(key: cachedTagsKey, value: serializedTags);
    } on PlatformException catch (e) {
      throw e.message;
    } catch (e) {
      throw "Unable to register device: $e";
    }
  }

  Future<void> refreshRegistration() async {
    final currentToken = await deviceInstallationService.getDeviceToken();
    final cachedToken = await secureStorage.read(key: cachedDeviceTokenKey);
    final serializedTags = await secureStorage.read(key: cachedTagsKey);

    if (currentToken == null ||
        cachedToken == null ||
        serializedTags == null ||
        currentToken == cachedToken) {
      return;
    }

    final tags = jsonDecode(serializedTags);

    return registerDevice(tags);
  }

  Future<void> handleNotificationRegistrationCall(MethodCall call) async {
    switch (call.method) {
      case refreshRegistrationChannelMethod:
        return refreshRegistration();
      default:
        throw MissingPluginException();
        break;
    }
  }
}

Observação

Essa classe encapsula o uso do DeviceInstallationService e as solicitações para o serviço de back-end para executar as ações de registro, cancelamento de registro e atualização de requisitos. O argumento apiKey só será necessário se você optar por concluir a seção Autenticar clientes usando uma chave de API .

Adicione um novo arquivo à pasta lib chamada config.dart com a implementação a seguir.
```
class Config {
  static String apiKey = "API_KEY";
  static String backendServiceEndpoint = "BACKEND_SERVICE_ENDPOINT";
}
```
Observação

Isso é usado como uma maneira simples de definir segredos do aplicativo. Substitua os valores de espaço reservado pelos seus próprios. Você deve ter anotado isso quando criou o serviço de back-end. A URL do Aplicativo de API deve ser https://<api_app_name>.azurewebsites.net/. O membro apiKey só será necessário se você optar por concluir a seção Autenticar clientes usando uma chave de API .

Adicione isso ao arquivo gitignore para evitar a confirmação desses segredos no controle do código-fonte.

Implementar a interface do usuário multiplataforma

Em main_page.dart, substitua a função de build pelo seguinte.

@override
Widget build(BuildContext context) {
return Scaffold(
    body: Padding(
      padding: const EdgeInsets.symmetric(horizontal: 20.0, vertical: 40.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          FlatButton(
            child: Text("Register"),
            onPressed: registerButtonClicked,
          ),
          FlatButton(
            child: Text("Deregister"),
            onPressed: deregisterButtonClicked,
          ),
        ],
      ),
    ),
  );
}

Adicione as importações necessárias à parte superior do arquivo main_page.dart .

import 'package:push_demo/services/notification_registration_service.dart';
import 'config.dart';

Adicione um campo à classe _MainPageState para armazenar uma referência ao NotificationRegistrationService.

final notificationRegistrationService = NotificationRegistrationService(Config.backendServiceEndpoint, Config.apiKey);

Na classe _MainPageState , implemente os manipuladores de eventos para os botões Registrar e Cancelar Registro em Eventos compactados . Chame os métodos Register/Deregister correspondentes e mostre um alerta para indicar o resultado.

void registerButtonClicked() async {
    try {
      await notificationRegistrationService.registerDevice(List<String>());
      await showAlert(message: "Device registered");
    }
    catch (e) {
      await showAlert(message: e);
    }
  }

  void deregisterButtonClicked() async {
    try {
      await notificationRegistrationService.deregisterDevice();
      await showAlert(message: "Device deregistered");
    }
    catch (e) {
      await showAlert(message: e);
    }
  }

  Future<void> showAlert({ message: String }) async {
    return showDialog<void>(
      context: context,
      barrierDismissible: false,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('PushDemo'),
          content: SingleChildScrollView(
            child: ListBody(
              children: <Widget>[
                Text(message),
              ],
            ),
          ),
          actions: <Widget>[
            FlatButton(
              child: Text('OK'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }

Agora, em main.dart, verifique se as seguintes importações estão presentes na parte superior do arquivo.

import 'package:flutter/material.dart';
import 'package:push_demo/models/push_demo_action.dart';
import 'package:push_demo/services/notification_action_service.dart';
import 'package:push_demo/main_page.dart';

Declare uma variável para armazenar a referência a uma instância de NotificationActionService e inicialize-a.
```
final notificationActionService = NotificationActionService();
```

Adicione funções para manipular a exibição de um alerta quando uma ação é disparada.

void notificationActionTriggered(PushDemoAction action) {
  showActionAlert(message: "${action.toString().split(".")[1]} action received");
}

Future<void> showActionAlert({ message: String }) async {
  return showDialog<void>(
    context: navigatorKey.currentState.overlay.context,
    barrierDismissible: false,
    builder: (BuildContext context) {
      return AlertDialog(
        title: Text('PushDemo'),
        content: SingleChildScrollView(
          child: ListBody(
            children: <Widget>[
              Text(message),
            ],
          ),
        ),
        actions: <Widget>[
          FlatButton(
            child: Text('OK'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );
}

Atualize a função main para observar o fluxo NotificationActionServiceactionTriggered e marcar para todas as ações capturadas durante a inicialização do aplicativo.
```
void main() async {
  runApp(MaterialApp(home: MainPage(), navigatorKey: navigatorKey,));
  notificationActionService.actionTriggered.listen((event) { notificationActionTriggered(event as PushDemoAction); });
  await notificationActionService.checkLaunchAction();
}
```
Observação

Isso é simplesmente para demonstrar o recebimento e a propagação de ações de notificação por push. Normalmente, eles seriam tratados silenciosamente, por exemplo, navegando para uma exibição específica ou atualizando alguns dados em vez de exibir um alerta nesse caso.

Configurar o projeto nativo do Android para notificações por push

Adicionar o arquivo JSON do Google Services

Controle + Clique na pasta android e escolha Abrir no Android Studio. Em seguida, alterne para o modo de exibição Projeto (se ainda não estiver).
Localize o arquivo de google-services.json baixado anteriormente ao configurar o projeto PushDemo no Console do Firebase. Em seguida, arraste-o para o diretório raiz do módulo do aplicativo (aplicativoandroid>android>).

Definir configurações e permissões de build

Alterne o modo de exibição Projeto para Android.

Abra AndroidManifest.xml, em seguida, adicione as permissões internet e READ_PHONE_STATE após o elemento de aplicativo antes da marca de fechamento .

<manifest>
    <application>...</application>
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
</manifest>

Adicionar os SDKs do Firebase

No Android Studio, abra o arquivo build.gradle no nível do projeto (Gradle Scripts>build.gradle (Project: android)). e verifique se você tem o classpath 'com.google.gms:google-services' no buildscript> nó de dependências.

buildscript {

  repositories {
    // Check that you have the following line (if not, add it):
    google()  // Google's Maven repository
  }

  dependencies {
    // ...

    // Add the following line:
    classpath 'com.google.gms:google-services:4.3.3'  // Google Services plugin
  }
}

allprojects {
  // ...

  repositories {
    // Check that you have the following line (if not, add it):
    google()  // Google's Maven repository
    // ...
  }
}

Observação

Certifique-se de referenciar a versão mais recente de acordo com as instruções fornecidas no Console do Firebase quando você criou o Projeto Android.

No arquivo build.gradle no nível do aplicativo (Gradle Scripts>build.gradle (Módulo: aplicativo)), aplique o plug-in Gradle do Google Services. Aplique o plug-in logo acima do nó android .
```
// ...

// Add the following line:
apply plugin: 'com.google.gms.google-services'  // Google Services plugin

android {
  // ...
}
```
No mesmo arquivo, no nó dependências , adicione a dependência para a biblioteca do Android do Cloud Messaging .
```
dependencies {
    // ...
    implementation 'com.google.firebase:firebase-messaging:20.2.0'
}
```
Observação

Certifique-se de referenciar a versão mais recente de acordo com a documentação do cliente Android do Cloud Messaging.
Salve as alterações e clique no botão Sincronizar Agora (no prompt da barra de ferramentas) ou Sincronizar Projeto com Arquivos Gradle.

Manipular notificações por push para Android

No Android Studio, Clique em Controle + na pasta do pacote com.your_organization.pushdemo<> (app>src>main>kotlin), escolha Pacote no menu Novo. Insira serviços como o nome e pressione Return.
Controle + Clique na pasta serviços , escolha Arquivo/Classe Kotlin no menu Novo . Insira DeviceInstallationService como o nome e pressione Return.

Implemente o DeviceInstallationService usando o código a seguir.

package com.<your_organization>.pushdemo.services

import android.annotation.SuppressLint
import android.content.Context
import android.provider.Settings.Secure
import com.google.android.gms.common.ConnectionResult
import com.google.android.gms.common.GoogleApiAvailability
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.MethodCall
import io.flutter.plugin.common.MethodChannel

@SuppressLint("HardwareIds")
class DeviceInstallationService {

    companion object {
        const val DEVICE_INSTALLATION_CHANNEL = "com.<your_organization>.pushdemo/deviceinstallation"
        const val GET_DEVICE_ID = "getDeviceId"
        const val GET_DEVICE_TOKEN = "getDeviceToken"
        const val GET_DEVICE_PLATFORM = "getDevicePlatform"
    }

    private var context: Context
    private var deviceInstallationChannel : MethodChannel

    val playServicesAvailable
        get() = GoogleApiAvailability.getInstance().isGooglePlayServicesAvailable(context) == ConnectionResult.SUCCESS

    constructor(context: Context, flutterEngine: FlutterEngine) {
        this.context = context
        deviceInstallationChannel = MethodChannel(flutterEngine.dartExecutor.binaryMessenger, DEVICE_INSTALLATION_CHANNEL)
        deviceInstallationChannel.setMethodCallHandler { call, result -> handleDeviceInstallationCall(call, result) }
    }

    fun getDeviceId() : String
        = Secure.getString(context.applicationContext.contentResolver, Secure.ANDROID_ID)

    fun getDeviceToken() : String {
        if(!playServicesAvailable) {
            throw Exception(getPlayServicesError())
        }

        // TODO: Revisit once we have created the PushNotificationsFirebaseMessagingService
        val token = "Placeholder_Get_Value_From_FirebaseMessagingService_Implementation"

        if (token.isNullOrBlank()) {
            throw Exception("Unable to resolve token for FCM.")
        }

        return token
    }

    fun getDevicePlatform() : String = "fcm"

    private fun handleDeviceInstallationCall(call: MethodCall, result: MethodChannel.Result) {
        when (call.method) {
            GET_DEVICE_ID -> {
                result.success(getDeviceId())
            }
            GET_DEVICE_TOKEN -> {
                getDeviceToken(result)
            }
            GET_DEVICE_PLATFORM -> {
                result.success(getDevicePlatform())
            }
            else -> {
                result.notImplemented()
            }
        }
    }

    private fun getDeviceToken(result: MethodChannel.Result) {
        try {
            val token = getDeviceToken()
            result.success(token)
        }
        catch (e: Exception) {
            result.error("ERROR", e.message, e)
        }
    }

    private fun getPlayServicesError(): String {
        val resultCode = GoogleApiAvailability.getInstance().isGooglePlayServicesAvailable(context)

        if (resultCode != ConnectionResult.SUCCESS) {
            return if (GoogleApiAvailability.getInstance().isUserResolvableError(resultCode)){
                GoogleApiAvailability.getInstance().getErrorString(resultCode)
            } else {
                "This device is not supported"
            }
        }

        return "An error occurred preventing the use of push notifications"
    }
}

Observação

Essa classe implementa a contraparte específica da plataforma para o com.<your_organization>.pushdemo/deviceinstallation canal. Isso foi definido na parte Flutter do aplicativo em DeviceInstallationService.dart. Nesse caso, as chamadas são feitas do código comum para o host nativo. <Substitua your_organization> por sua própria organização onde quer que isso seja usado.

Essa classe fornece uma ID exclusiva (usando Secure.AndroidId) como parte do conteúdo de registro do hub de notificação.

Adicione outro Arquivo/Classe Kotlin à pasta de serviços chamada NotificationRegistrationService e adicione o código a seguir.

package com.<your_organization>.pushdemo.services

import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.MethodChannel

class NotificationRegistrationService {

    companion object {
        const val NOTIFICATION_REGISTRATION_CHANNEL = "com.<your_organization>.pushdemo/notificationregistration"
        const val REFRESH_REGISTRATION = "refreshRegistration"
    }

    private var notificationRegistrationChannel : MethodChannel

    constructor(flutterEngine: FlutterEngine) {
        notificationRegistrationChannel = MethodChannel(flutterEngine.dartExecutor.binaryMessenger, NotificationRegistrationService.NOTIFICATION_REGISTRATION_CHANNEL)
    }

    fun refreshRegistration() {
        notificationRegistrationChannel.invokeMethod(REFRESH_REGISTRATION, null)
    }
}

Observação

Essa classe implementa a contraparte específica da plataforma para o com.<your_organization>.pushdemo/notificationregistration canal. Isso foi definido na parte Flutter do aplicativo em NotificationRegistrationService.dart. Nesse caso, as chamadas são feitas do host nativo para o código comum. Novamente, tome cuidado para substituir <your_organization> por sua própria organização onde quer que isso seja usado.

Adicione outro Arquivo/Classe Kotlin à pasta de serviços chamada NotificationActionService e adicione o código a seguir.

package com.<your_organization>.pushdemo.services

import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.MethodCall
import io.flutter.plugin.common.MethodChannel

class NotificationActionService {
    companion object {
        const val NOTIFICATION_ACTION_CHANNEL = "com.<your_organization>.pushdemo/notificationaction"
        const val TRIGGER_ACTION = "triggerAction"
        const val GET_LAUNCH_ACTION = "getLaunchAction"
    }

    private var notificationActionChannel : MethodChannel
    var launchAction : String? = null

    constructor(flutterEngine: FlutterEngine) {
        notificationActionChannel = MethodChannel(flutterEngine.dartExecutor.binaryMessenger, NotificationActionService.NOTIFICATION_ACTION_CHANNEL)
        notificationActionChannel.setMethodCallHandler { call, result -> handleNotificationActionCall(call, result) }
    }

    fun triggerAction(action: String) {
        notificationActionChannel.invokeMethod(NotificationActionService.TRIGGER_ACTION, action)
    }

    private fun handleNotificationActionCall(call: MethodCall, result: MethodChannel.Result) {
        when (call.method) {
            NotificationActionService.GET_LAUNCH_ACTION -> {
                result.success(launchAction)
            }
            else -> {
                result.notImplemented()
            }
        }
    }
}

Observação

Essa classe implementa a contraparte específica da plataforma para o com.<your_organization>.pushdemo/notificationaction canal. Isso foi definido na parte Flutter do aplicativo em NotificationActionService.dart. As chamadas podem ser feitas em ambas as direções nesse caso. <Substitua your_organization> por sua própria organização onde quer que isso seja usado.

Adicione um novo Arquivo/Classe Kotlin ao pacote com.your_organization.pushdemo<> chamado PushNotificationsFirebaseMessagingService e implemente usando o código a seguir.

package com.<your_organization>.pushdemo

import android.os.Handler
import android.os.Looper
import com.google.firebase.messaging.FirebaseMessagingService
import com.google.firebase.messaging.RemoteMessage
import com.<your_organization>.pushdemo.services.NotificationActionService
import com.<your_organization>.pushdemo.services.NotificationRegistrationService

class PushNotificationsFirebaseMessagingService : FirebaseMessagingService() {

    companion object {
        var token : String? = null
        var notificationRegistrationService : NotificationRegistrationService? = null
        var notificationActionService : NotificationActionService? = null
    }

    override fun onNewToken(token: String) {
        PushNotificationsFirebaseMessagingService.token = token
        notificationRegistrationService?.refreshRegistration()
    }

    override fun onMessageReceived(message: RemoteMessage) {
        message.data.let {
            Handler(Looper.getMainLooper()).post {
                notificationActionService?.triggerAction(it.getOrDefault("action", null))
            }
        }
    }
}

Observação

Essa classe é responsável por lidar com notificações quando o aplicativo está em execução em primeiro plano. Ele chamará condicionalmente triggerAction no NotificationActionService se uma ação for incluída na carga de notificação recebida em onMessageReceived. Isso também chamará refreshRegistration no NotificationRegistrationService quando o token firebase for regenerado substituindo a função onNewToken .

Mais uma vez, tome cuidado para substituir <your_organization> por sua própria organização onde quer que ela seja usada.

Em AndroidManifest.xml (app>src>main), adicione o PushNotificationsFirebaseMessagingService à parte inferior do elemento de aplicativo com o filtro de com.google.firebase.MESSAGING_EVENT intenção.

<manifest>
    <application>
        <!-- EXISTING MANIFEST CONTENT -->
         <service
            android:name="com.<your_organization>.pushdemo.PushNotificationsFirebaseMessagingService"
            android:exported="false">
            <intent-filter>
                <action android:name="com.google.firebase.MESSAGING_EVENT" />
            </intent-filter>
        </service>
    </application>
</manifest>

De volta a DeviceInstallationService, verifique se as seguintes importações estão presentes na parte superior do arquivo.
```
package com.<your_organization>.pushdemo
import com.<your_organization>.pushdemo.services.PushNotificationsFirebaseMessagingService
```
Observação

Substitua <your_organization> pelo valor da sua própria organização.

Atualize o texto do espaço reservado Placeholder_Get_Value_From_FirebaseMessagingService_Implementation para obter o valor do token do PushNotificationFirebaseMessagingService.

fun getDeviceToken() : String {
    if(!playServicesAvailable) {
        throw Exception(getPlayServicesError())
    }

    // Get token from the PushNotificationsFirebaseMessagingService.token field.
    val token = PushNotificationsFirebaseMessagingService.token

    if (token.isNullOrBlank()) {
        throw Exception("Unable to resolve token for FCM.")
    }

    return token
}

Em MainActivity, verifique se as seguintes importações estão presentes na parte superior do arquivo.

package com.<your_organization>.pushdemo

import android.content.Intent
import android.os.Bundle
import com.google.android.gms.tasks.OnCompleteListener
import com.google.firebase.iid.FirebaseInstanceId
import com.<your_organization>.pushdemo.services.DeviceInstallationService
import com.<your_organization>.pushdemo.services.NotificationActionService
import com.<your_organization>.pushdemo.services.NotificationRegistrationService
import io.flutter.embedding.android.FlutterActivity

Observação

Substitua <your_organization> pelo valor da sua própria organização.

Adicione uma variável para armazenar uma referência ao DeviceInstallationService.
```
private lateinit var deviceInstallationService: DeviceInstallationService
```

Adicione uma função chamada processNotificationActions para marcar se uma Intenção tem um valor extra chamado action. Dispare condicionalmente essa ação ou armazene-a para uso posterior se a ação estiver sendo processada durante a inicialização do aplicativo.

 private fun processNotificationActions(intent: Intent, launchAction: Boolean = false) {
    if (intent.hasExtra("action")) {
        var action = intent.getStringExtra("action");

        if (action.isNotEmpty()) {
            if (launchAction) {
                PushNotificationsFirebaseMessagingService.notificationActionService?.launchAction = action
            }
            else {
                PushNotificationsFirebaseMessagingService.notificationActionService?.triggerAction(action)
            }
        }
    }
}

Substitua a função onNewIntent para chamar processNotificationActions.
```
override fun onNewIntent(intent: Intent) {
    super.onNewIntent(intent)
    processNotificationActions(intent)
}
```
Observação

Como LaunchMode para MainActivity é definido como SingleTop, uma Intenção será enviada para a instância de Atividade existente por meio da função onNewIntent em vez da função onCreate e, portanto, você deve manipular uma Intenção de entrada nas funções onCreate e onNewIntent .

Substitua a função onCreate , defina deviceInstallationService como uma nova instância de DeviceInstallationService.

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    flutterEngine?.let {
        deviceInstallationService = DeviceInstallationService(context, it)
    }
}

Defina as propriedades notificationActionService e notificationRegistrationService em PushNotificationFirebaseMessagingServices.

flutterEngine?.let {
  deviceInstallationService = DeviceInstallationService(context, it)
  PushNotificationsFirebaseMessagingService.notificationActionService = NotificationActionService(it)
  PushNotificationsFirebaseMessagingService.notificationRegistrationService = NotificationRegistrationService(it)
}

Na mesma função, chame condicionalmente FirebaseInstanceId.getInstance().instanceId. Implemente o OnCompleteListener para definir o valor de token resultante em PushNotificationFirebaseMessagingService antes de chamar refreshRegistration.

if(deviceInstallationService?.playServicesAvailable) {
    FirebaseInstanceId.getInstance().instanceId
        .addOnCompleteListener(OnCompleteListener { task ->
            if (!task.isSuccessful)
                return@OnCompleteListener

            PushNotificationsFirebaseMessagingService.token = task.result?.token
            PushNotificationsFirebaseMessagingService.notificationRegistrationService?.refreshRegistration()
        })
}

Ainda em onCreate, chame processNotificationActions no final da função. Use true para o argumento launchAction para indicar que essa ação está sendo processada durante a inicialização do aplicativo.
```
processNotificationActions(this.intent, true)
```

Observação

Você deve registrar novamente o aplicativo sempre que executá-lo e interrompê-lo de uma sessão de depuração para continuar recebendo notificações por push.

Configurar o projeto nativo do iOS para notificações por push

Configurar o destino do executor e o Info.plist

Em Visual Studio Code, Controle + Clique na pasta ios e escolha Abrir no Xcode.
No Xcode, clique em Executor (o xcodeproj na parte superior, não na pasta) e selecione o destino executor e, em seguida, Assinatura & Funcionalidades. Com a configuração Toda a compilação selecionada, escolha sua conta de Desenvolvedor para a Equipe. Verifique se a opção "Gerenciar assinatura automaticamente" está marcada e se o Certificado de Autenticação e o Perfil de Provisionamento estão selecionados automaticamente.

Observação

Se você não vir o novo valor de Perfil de Provisionamento, tente atualizar os perfis da Identidade de Assinatura selecionandoContade Preferências> do Xcode> e, em seguida, selecione o botão Baixar Perfis Manuais para baixar os perfis.
Clique em + Funcionalidade e pesquise Notificações por Push. Clique duas vezes em Notificações por Push para adicionar essa funcionalidade.
Abra Info.plist e defina Versão mínima do sistema como 13.0.

Observação

Somente os dispositivos que executam o iOS 13.0 e superior têm suporte para os fins deste tutorial, no entanto, você pode estendê-lo para dar suporte a dispositivos que executam versões mais antigas.
Abra Runner.entitlements e verifique se a configuração ambiente do APS está definida como desenvolvimento.

Manipular notificações por push para iOS

Controle + Clique na pasta Executor (dentro do projeto Executor) e escolha Novo Grupo usando Serviços como o nome.
Controle + Clique na pasta Serviços e escolha Novo Arquivo.... Em seguida, escolha Arquivo Swift e clique em Avançar. Especifique DeviceInstallationService para o nome e clique em Criar.

Implemente DeviceInstallationService.swift usando o código a seguir.

import Foundation

class DeviceInstallationService {

    enum DeviceRegistrationError: Error {
        case notificationSupport(message: String)
    }

    var token : Data? = nil

    let DEVICE_INSTALLATION_CHANNEL = "com.<your_organization>.pushdemo/deviceinstallation"
    let GET_DEVICE_ID = "getDeviceId"
    let GET_DEVICE_TOKEN = "getDeviceToken"
    let GET_DEVICE_PLATFORM = "getDevicePlatform"

    private let deviceInstallationChannel : FlutterMethodChannel

    var notificationsSupported : Bool {
        get {
            if #available(iOS 13.0, *) {
                return true
            }
            else {
                return false
            }
        }
    }

    init(withBinaryMessenger binaryMessenger : FlutterBinaryMessenger) {
        deviceInstallationChannel = FlutterMethodChannel(name: DEVICE_INSTALLATION_CHANNEL, binaryMessenger: binaryMessenger)
        deviceInstallationChannel.setMethodCallHandler(handleDeviceInstallationCall)
    }

    func getDeviceId() -> String {
        return UIDevice.current.identifierForVendor!.description
    }

    func getDeviceToken() throws -> String {
        if(!notificationsSupported) {
            let notificationSupportError = getNotificationsSupportError()
            throw DeviceRegistrationError.notificationSupport(message: notificationSupportError)
        }

        if (token == nil) {
            throw DeviceRegistrationError.notificationSupport(message: "Unable to resolve token for APNS.")
        }

        return token!.reduce("", {$0 + String(format: "%02X", $1)})
    }

    func getDevicePlatform() -> String {
        return "apns"
    }

    private func handleDeviceInstallationCall(call: FlutterMethodCall, result: @escaping FlutterResult) {
        switch call.method {
        case GET_DEVICE_ID:
            result(getDeviceId())
        case GET_DEVICE_TOKEN:
            getDeviceToken(result: result)
        case GET_DEVICE_PLATFORM:
            result(getDevicePlatform())
        default:
            result(FlutterMethodNotImplemented)
        }
    }

    private func getDeviceToken(result: @escaping FlutterResult) {
        do {
            let token = try getDeviceToken()
            result(token)
        }
        catch let error {
            result(FlutterError(code: "UNAVAILABLE", message: error.localizedDescription, details: nil))
        }
    }

    private func getNotificationsSupportError() -> String {

        if (!notificationsSupported) {
            return "This app only supports notifications on iOS 13.0 and above. You are running \(UIDevice.current.systemVersion)"
        }

        return "An error occurred preventing the use of push notifications."
    }
}

Observação

Essa classe fornece uma ID exclusiva (usando o valor UIDevice.identifierForVendor ) como parte do conteúdo de registro do hub de notificação.

Adicione outro Arquivo Swift à pasta Serviços chamada NotificationRegistrationService e adicione o código a seguir.

import Foundation

class NotificationRegistrationService {

    let NOTIFICATION_REGISTRATION_CHANNEL = "com.<your_organization>.pushdemo/notificationregistration"
    let REFRESH_REGISTRATION = "refreshRegistration"

    private let notificationRegistrationChannel : FlutterMethodChannel

    init(withBinaryMessenger binaryMessenger : FlutterBinaryMessenger) {
       notificationRegistrationChannel = FlutterMethodChannel(name: NOTIFICATION_REGISTRATION_CHANNEL, binaryMessenger: binaryMessenger)
    }

    func refreshRegistration() {
        notificationRegistrationChannel.invokeMethod(REFRESH_REGISTRATION, arguments: nil)
    }
}

Observação

Adicione outro Arquivo Swift à pasta Serviços chamada NotificationActionService e adicione o código a seguir.

import Foundation

class NotificationActionService {

    let NOTIFICATION_ACTION_CHANNEL = "com.<your_organization>.pushdemo/notificationaction"
    let TRIGGER_ACTION = "triggerAction"
    let GET_LAUNCH_ACTION = "getLaunchAction"

    private let notificationActionChannel: FlutterMethodChannel

    var launchAction: String? = nil

    init(withBinaryMessenger binaryMessenger: FlutterBinaryMessenger) {
        notificationActionChannel = FlutterMethodChannel(name: NOTIFICATION_ACTION_CHANNEL, binaryMessenger: binaryMessenger)
        notificationActionChannel.setMethodCallHandler(handleNotificationActionCall)
    }

    func triggerAction(action: String) {
       notificationActionChannel.invokeMethod(TRIGGER_ACTION, arguments: action)
    }

    private func handleNotificationActionCall(call: FlutterMethodCall, result: @escaping FlutterResult) {
        switch call.method {
        case GET_LAUNCH_ACTION:
            result(launchAction)
        default:
            result(FlutterMethodNotImplemented)
        }
    }
}

Observação

Em AppDelegate.swift, adicione variáveis para armazenar uma referência aos serviços criados anteriormente.

var deviceInstallationService : DeviceInstallationService?
var notificationRegistrationService : NotificationRegistrationService?
var notificationActionService : NotificationActionService?

Adicione uma função chamada processNotificationActions para processar os dados de notificação. Dispare condicionalmente essa ação ou armazene-a para uso posterior se a ação estiver sendo processada durante a inicialização do aplicativo.

func processNotificationActions(userInfo: [AnyHashable : Any], launchAction: Bool = false) {
    if let action = userInfo["action"] as? String {
        if (launchAction) {
            notificationActionService?.launchAction = action
        }
        else {
            notificationActionService?.triggerAction(action: action)
        }
    }
}

Substitua a função didRegisterForRemoteNotificationsWithDeviceToken definindo o valor do token para DeviceInstallationService. Em seguida, chame refreshRegistration no NotificationRegistrationService.

override func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
  deviceInstallationService?.token = deviceToken
  notificationRegistrationService?.refreshRegistration()
}

Substitua a função didReceiveRemoteNotification passando o argumento userInfo para a função processNotificationActions .

override func application(_ application: UIApplication, didReceiveRemoteNotification userInfo: [AnyHashable : Any]) {
    processNotificationActions(userInfo: userInfo)
}

Substitua a função didFailToRegisterForRemoteNotificationsWithError para registrar o erro em log.
```
override func application(_ application: UIApplication, didFailToRegisterForRemoteNotificationsWithError error: Error) {
    print(error);
}
```
Observação

Este é um espaço reservado. Você desejará implementar o registro em log e o tratamento de erros adequados para cenários de produção.

Em didFinishLaunchingWithOptions, instancie as variáveis deviceInstallationService, notificationRegistrationService e notificationActionService .

let controller : FlutterViewController = window?.rootViewController as! FlutterViewController

deviceInstallationService = DeviceInstallationService(withBinaryMessenger: controller.binaryMessenger)
notificationRegistrationService = NotificationRegistrationService(withBinaryMessenger: controller.binaryMessenger)
notificationActionService = NotificationActionService(withBinaryMessenger: controller.binaryMessenger)

Na mesma função, solicite condicionalmente autorização e registre-se para notificações remotas.

if #available(iOS 13.0, *) {
  UNUserNotificationCenter.current().requestAuthorization(options: [.alert, .sound, .badge]) {
      (granted, error) in

      if (granted)
      {
          DispatchQueue.main.async {
              let pushSettings = UIUserNotificationSettings(types: [.alert, .sound, .badge], categories: nil)
              application.registerUserNotificationSettings(pushSettings)
              application.registerForRemoteNotifications()
          }
      }
  }
}

Se launchOptions contiver a chave remoteNotification , chame processNotificationActions no final da função didFinishLaunchingWithOptions . Passe o objeto userInfo resultante e use true para o argumento launchAction . Um valor true indica que a ação está sendo processada durante a inicialização do aplicativo.
```
if let userInfo = launchOptions?[.remoteNotification] as? [AnyHashable : Any] {
    processNotificationActions(userInfo: userInfo, launchAction: true)
}
```

Testar a solução

Agora você pode testar o envio de notificações por meio do serviço de back-end.

Enviar uma notificação de teste

Abra uma nova guia no Postman.

Defina a solicitação como POST e insira o seguinte endereço:

https://<app_name>.azurewebsites.net/api/notifications/requests

Se você optar por concluir a seção Autenticar clientes usando uma Chave de API , configure os cabeçalhos de solicitação para incluir o valor de apikey .

Chave Valor

apikey <your_api_key>
Escolha a opção bruta para o Corpo, escolha JSON na lista de opções de formato e, em seguida, inclua algum conteúdo JSON de espaço reservado:
```
{
    "text": "Message from Postman!",
    "action": "action_a"
}
```
Selecione o botão Código , que fica no botão Salvar no canto superior direito da janela. A solicitação deve ser semelhante ao exemplo a seguir quando exibida para HTML (dependendo se você incluiu um cabeçalho apikey ):
```
POST /api/notifications/requests HTTP/1.1
Host: https://<app_name>.azurewebsites.net
apikey: <your_api_key>
Content-Type: application/json

{
    "text": "Message from backend service",
    "action": "action_a"
}
```
Execute o aplicativo PushDemo em uma ou ambas as plataformas de destino (Android e iOS).

Observação

Se você estiver testando no Android , verifique se não está em execução na Depuração ou se o aplicativo foi implantado executando o aplicativo, force o fechamento do aplicativo e inicie-o novamente no inicializador.
No aplicativo PushDemo , toque no botão Registrar .
De volta ao Postman, feche a janela Gerar Snippets de Código (se você ainda não fez isso) e clique no botão Enviar .
Valide se você obtém uma resposta 200 OK no Postman e o alerta aparece no aplicativo mostrando a ação ActionA recebida.
Feche o aplicativo PushDemo e clique no botão Enviar novamente no Postman.
Valide se você obtém uma resposta 200 OK no Postman novamente. Valide se uma notificação aparece na área de notificação do aplicativo PushDemo com a mensagem correta.
Toque na notificação para confirmar que ele abre o aplicativo e exibiu o alerta Ação AA recebida .
De volta ao Postman, modifique o corpo da solicitação anterior para enviar uma notificação silenciosa especificando action_b em vez de action_a para o valor da ação .
```
{
    "action": "action_b",
    "silent": true
}
```
Com o aplicativo ainda aberto, clique no botão Enviar no Postman.
Valide se você recebeu uma resposta 200 OK no Postman e se o alerta aparece no aplicativo mostrando a ação actionB recebida em vez da ação ActionA recebida.
Feche o aplicativo PushDemo e clique no botão Enviar novamente no Postman.
Valide se você obteve uma resposta 200 OK no Postman e se a notificação silenciosa não aparece na área de notificação.

Chave	Valor
apikey	<your_api_key>

Solução de problemas

Nenhuma resposta do serviço de back-end

Ao testar localmente, verifique se o serviço de back-end está em execução e se está usando a porta correta.

Se estiver testando no Aplicativo de API do Azure, marcar o serviço está em execução e foi implantado e foi iniciado sem erros.

Certifique-se de marcar você especificou o endereço base corretamente no Postman ou na configuração do aplicativo móvel ao testar por meio do cliente. O endereço base deve ser https://<api_name>.azurewebsites.net/ indicativamente ou https://localhost:5001/ ao testar localmente.

Não receber notificações no Android depois de iniciar ou interromper uma sessão de depuração

Verifique se você se registrou novamente depois de iniciar ou parar uma sessão de depuração. O depurador fará com que um novo token do Firebase seja gerado. A instalação do hub de notificação também deve ser atualizada.

Recebendo um código 401 status do serviço de back-end

Valide se você está definindo o cabeçalho de solicitação apikey e esse valor corresponde ao que você configurou para o serviço de back-end.

Se você receber esse erro ao testar localmente, verifique se o valor da chave definido na configuração do cliente corresponde ao valor de configuração de usuário Authentication:ApiKey usado pela API.

Se você estiver testando com um Aplicativo de API, verifique se o valor da chave no arquivo de configuração do cliente corresponde à configuração do aplicativo Authentication:ApiKey que você está usando no Aplicativo de API.

Observação

Se você tiver criado ou alterado essa configuração depois de implantar o serviço de back-end, deverá reiniciar o serviço para que ele entre em vigor.

Se você optou por não concluir a seção Autenticar clientes usando uma chave de API , verifique se você não aplicou o atributo Authorize à classe NotificationsController .

Recebendo um código 404 status do serviço de back-end

Valide se o ponto de extremidade e o método de solicitação HTTP estão corretos. Por exemplo, os pontos de extremidade devem ser indicativamente:

[PUT]https://<api_name>.azurewebsites.net/api/notifications/installations
[DELETE]https://<api_name>.azurewebsites.net/api/notifications/installations/<installation_id>
[POST]https://<api_name>.azurewebsites.net/api/notifications/requests

Ou ao testar localmente:

[PUT]https://localhost:5001/api/notifications/installations
[DELETE]https://localhost:5001/api/notifications/installations/<installation_id>
[POST]https://localhost:5001/api/notifications/requests

Ao especificar o endereço base no aplicativo cliente, verifique se ele termina com um /. O endereço base deve ser https://<api_name>.azurewebsites.net/ indicativamente ou https://localhost:5001/ ao testar localmente.

Não é possível registrar e uma mensagem de erro do hub de notificação é exibida

Verifique se o dispositivo de teste tem conectividade de rede. Em seguida, determine a resposta Http status código definindo um ponto de interrupção para inspecionar o valor da propriedade StatusCode no HttpResponse.

Examine as sugestões de solução de problemas anteriores, quando aplicável com base no código status.

Defina um ponto de interrupção nas linhas que retornam esses códigos de status específicos para a respectiva API. Em seguida, tente chamar o serviço de back-end ao depurar localmente.

Valide se o serviço de back-end está funcionando conforme o esperado por meio do Postman usando o conteúdo apropriado. Use o conteúdo real criado pelo código do cliente para a plataforma em questão.

Examine as seções de configuração específicas da plataforma para garantir que nenhuma etapa tenha sido perdida. Verifique se os valores adequados estão sendo resolvidos para installation id variáveis e token para a plataforma apropriada.

Não é possível resolve uma ID para a mensagem de erro do dispositivo é exibida

Examine as seções de configuração específicas da plataforma para garantir que nenhuma etapa tenha sido perdida.

Próximas etapas

Agora você deve ter um aplicativo Flutter básico conectado a um hub de notificação por meio de um serviço de back-end e pode enviar e receber notificações.

Provavelmente, você precisará adaptar o exemplo usado neste tutorial para se ajustar ao seu próprio cenário. A implementação de tratamento de erros, lógica de repetição e registro em log mais robustos também é recomendada.

O Visual Studio App Center pode ser rapidamente incorporado em aplicativos móveis, fornecendo análise e diagnóstico para ajudar na solução de problemas.

Share via

Tutorial: Enviar notificações por push para aplicativos Flutter usando os Hubs de Notificação do Azure por meio de um serviço de back-end

Pré-requisitos

Configurar os Serviços de Notificação por Push e o Hub de Notificação do Azure

Criar um projeto do Firebase e habilitar o Firebase Cloud Messaging para Android

Registrar seu aplicativo iOS para notificações por push

Criando um certificado para Hubs de Notificação

OPÇÃO 1: Criando um certificado push p12 que pode ser carregado diretamente no Hub de Notificação

OPTION 2: Criando um certificado p8 que pode ser usado para autenticação baseada em token

Criar um perfil de provisionamento para o aplicativo

Criar um Hub de Notificação

Configurar o Hub de Notificação com informações de APNS

OPÇÃO 1: usando um certificado push .p12

OPTION 2: Usando a autenticação baseada em token

Configurar seu hub de notificação com informações de FCM

Criar um aplicativo de back-end da API Web ASP.NET Core

Criar um projeto Web

Autenticar clientes usando uma chave de API (opcional)

Adicionar dependências e configurar serviços

Criar a API de notificações

Criar o aplicativo de API

Publicar o serviço de back-end

Validando a API publicada

Criar um aplicativo Flutter multiplataforma

Criar a solução Flutter

Implementar os componentes multiplataforma

Implementar a interface do usuário multiplataforma

Configurar o projeto nativo do Android para notificações por push

Adicionar o arquivo JSON do Google Services

Definir configurações e permissões de build

Adicionar os SDKs do Firebase

Manipular notificações por push para Android

Configurar o projeto nativo do iOS para notificações por push

Configurar o destino do executor e o Info.plist

Manipular notificações por push para iOS

Testar a solução

Enviar uma notificação de teste

Solução de problemas

Nenhuma resposta do serviço de back-end

Não receber notificações no Android depois de iniciar ou interromper uma sessão de depuração

Recebendo um código 401 status do serviço de back-end

Recebendo um código 404 status do serviço de back-end

Não é possível registrar e uma mensagem de erro do hub de notificação é exibida

Não é possível resolve uma ID para a mensagem de erro do dispositivo é exibida

Links relacionados

Próximas etapas

Recursos adicionais