Blazor - Criando aplicações PWA

Hoje veremos o que são e como podemos criar aplicações PWA com Blazor.

Se você esta chegando agora e não sabe o que é o Blazor leia o artigo ASP .NET Core - Iniciando com o Blazor - Macoratti; se você já conhece e quer saber mais pode fazer o curso de Blazor Essencial.  

Uma aplicação PWA - Progressive Web Application é geralmente um aplicativo de Página Única (SPA) que usa APIs e recursos modernos do navegador para se comportar como um aplicativo de desktop.

De forma geral as aplicações PWA usa tecnologias que permitem ao usuário ter uma experiência de uso muito próxima da oferecida pelas aplicações mobile apresentando as seguintes funcionalidades:

As aplicações Blazor WebAssembly executam do lado do cliente e podem usar qualquer API do navegador, incluindo APIs do PWA que são necessárias para oferecer os recursos que caracterizam uma aplicação PWA como:

Assim podemos afirmar que podemos criar aplicações PWA usando o Blazor WebAssembly. Para isso os pré-requisitos necessários são os seguintes:

  1. Possuir instalado o .NET Core SDK 3.1.3 ou superior;
  2. No Windows : Visual Studio 2019 16.6 ou superior;
  3. Windows/Linux/macOs : Visual Studio Code com extensão C#;
  4. Blazor WebAssembly - 3.2 ou superior;

A seguir veremos como criar uma aplicação PWA com Blazor no VS 2019 Community.

Recursos usados:

Criando o projeto Blazor WebAssembly no VS Community 2019

Abra o VS 2019 Community (versão mínima 16.6) e selecione a opção Create a New Project;

A seguir selecione a opção Blazor app e clique em next;

Informe o nome do projeto :  Blazor_PWA1, a localização e clique em Create;

A seguir teremos uma janela com duas opções :

  1. Blazor Server App
  2. Blazor WebAssembly App

Para o nosso projeto qualquer uma das opções de projeto vai funcionar.

Selecione a segunda opção - Blazor WebAssembly App e a seguir podemos marcar as opções :

  • ASP.NET Core hosted
  • Progressive Web Application

 

A opção ASP .NET Core hosted pode ser selecionada se voce planejar integrar alguns serviços de back-end no futuro e também porque o uso de um site hospedado na ASP.NET Core facilita a execução de uma versão publicada do aplicativo no ambiente de desenvolvedor local.

Mas essa opção não é obrigatória para criar a aplicação PWA que independente do modelo de hospedagem.

Vamos marcar as duas opções e a seguir clicar em Create.

Nota: Para criar o mesmo projeto usando oa NET CLI digite o comando: dotnet new blazorwasm --pwa --hosted

Analisando a estrutura do projeto criado vamos nota que as diferenças estão apenas na pasta wwwroot onde temos agora três arquivos novos:

  1. manifest.json
  2. service-worker.js
  3. service-worker.published.js

Abaixo temos o conteúdo do arquivo manifest.json :

Onde temos:

  • O nome da aplicação
  • A url de inicio da aplicação
  • E informações que serão usadas quando o usuário instalar a aplicação PWA localmente (ícone, tema, etc.)

Abaixo temos o conteúdo do arquivo service-worker.json que é usado durante o desenvolvimento:

// In development, always fetch from the network and do not enable offline support.
// This is because caching would make development more difficult (changes would not
// be reflected on the first load after each change).
self.addEventListener('fetch', () => { });
 

Aqui podemos intercepta os eventos como um request http por exemplo e dar um tratamento desejado.

O código do arquivo service-worker.published.js é usado depois que a aplicação for publicada e resolve requisições usando uma estratégia de cache.  Isso significa que o service worker prefere retornar o conteúdo em cache, independentemente de o usuário ter acesso à internet ou se um conteúdo mais recente está disponível no servidor.

Obs: Após o publish da aplicação é gerado um service-worker.js na pasta wwwroot com o conteúdo do service-workder.published.

No arquivo index.html temos a referência o manifest.json e o registro do 'service-worker' :

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Blazor_PWA1</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="manifest.json" rel="manifest" />
    <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
</head>

<body>
    <app>Loading...</app>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
    <script>navigator.serviceWorker.register('service-worker.js');</script>
</body>

</html>

Vamos executar o projeto em um navegador compativel com o Chromium (Chrome ou Edge).

Após a aplicação ser carregada você verá um novo botão de instalação no navegador que permite instalar a nossa aplicação Blazor PWA localmente.

Para isso basta clicar no botão Instalar.

Nossa aplicação será instalada e imediatamente executada na sua própria janela sem uma barra de endereços.

Observe que a aplicação vai exibir o seu ícone na barra de tarefas :

O título da janela, o esquema de cores, o ícone e outros detalhes são personalizáveis usando o arquivo manifest.json do projeto.

Para testar o modo offline pressione F12 e na guia Network habilite o modo Offline para simular a navegação sem internet.

Atualize a página e você vai ver que não a aplicação não vai funcionar e vai aparecer a mensagem 'sem internet'. Porque ???

Esse é o comportamento padrão, os aplicativos PWA possuem suporte para execução offline, mas o usuário deve primeiro acessar o aplicativo enquanto estiver online e o navegador faz o download e armazena automaticamente  todos os recursos necessários para operar offline em cache.

Acontece que o suporte Offline interferiria no desenvolvimento local, pois você pode exibir arquivos offline em cache ao fazer atualizações. Por esse motivo, o suporte offline está disponível apenas para aplicativos publicados e não esta disponível na fase de desenvolvimento.

Então para testar o modo offline precisamos publicar o aplicativo, e eu vou fazer uma publicação local.

Clique com o botão direito do mouse no projeto Server Blazor_PWA1.Server e selecione Publish;

Selecione Folder e clique em Next;

Aceite o local padrão para instalação (bin\Release\netcoreapp3.1\publish\) e clique em Finish.

Para concluir clique no botão Publish e aguarde a conclusão da publicação local.

Agora podemos testar a nossa aplicação no modo offline.

Abra um terminal e navegue até o diretório de publicação (bin\Release\netcoreapp3.1\publish\) e Inicie o aplicativo do servidor usando este comando:

dotnet Blazor_PWA1.Server.dll

Isso inicia o aplicativo publicado em execução na porta localhost 5001.

A maneira mais fácil de testar o modo offline é pressione F12 e na guia Network habilite o modo Offline para simular a navegação sem internet.

Atualize a página e veremos agora nossa aplicação funcionando Offline em quase todas as opções exceto quando acionamos a opção Fetch Data.

Se você verificar o conteúdo da pasta wwwroot da pasta onde publicou a aplicação vai encontrar o arquivo service-worker com o conteúdo e lógica para tratamento do request e do cache.

Neste caso não teremos os dados carregados porque isso é feito fazendo uma requisição http que retorna os resultados, e, não temos os resultados armazenados no cache.

 forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("WeatherForecast");

Na próxima parte do artigo veremos como transformar uma aplicação blazor já existente em uma aplicação PWA.

"E Jesus lhe disse: Ninguém, que lança mão do arado e olha para trás, é apto para o reino de Deus."
Lucas 9:62


 

Referências:

José Carlos Macoratti