Transformando uma aplicacao AMP em uma PWA

Convertendo uma aplicação AMP em uma PWA

Agora chegou o momento de conectar os meus dois assuntos favoritos, Progressive Web Apps(PWA) e AMP. Se você ainda não sabe o que é uma PWA podemos definir conjunto de tecnologias que nos permitem criar aplicações web com recursos que antes só possíveis em aplicações nativas se quiser saber mais sobre PWA tenho um curso dedicado no meu canal.

As PWA possui uma série de diferentes APIs que podem ser aplicadas a diferentes soluções, mas para o caso da nossa aplicação AMP, vamos abordar dois items:

  1. Tonar a nossa aplicação instalável
  2. Adicionar suporte a versão offline.

Criando uma web app manifest para a nossa PWA

Primeiro passo vamos criar um web app manifest arquivo json que permite que dispositivos que reconheçam que a nossa aplicação pode se instalável. Para isso vamos adicionar no nosso projeto um arquivo chamado manifest.json e nele vamos adicionar o seguinte código:

{
  "short_name": "Caipirinha",
  "name": "How to prepare the best caipirinha",
  "icons": [
    {
      "src": "./images/capi_icon_192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "./images/capi_icon_512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/index.html",
  "background_color": "#00d1c3",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#00d1c3"
 }
Code language: JSON / JSON with Comments (json)

O código acima descreve as informações que exibiremos para o usuário quando ele instalar a nossa aplicação, são elas:

  • short_name: o nome que será exibido na tela inicial do nosso usuário.
  • icons: com uma lista de ícones que exibiremos em diferentes plataformas.
  • start_url: o endereço da nossa aplicação irá carregar quando acessada através do ícone na tela inicial do usuário.
  • background_color: a cor do background da splash screen do nosso app.
  • display: o modo em que a nossa PWA será exibida
  • theme_color: as cores do tema da nossa aplicação, por exemplo, barra de controle.

Depois que criarmos o nosso arquivo manifest.json temos de adicionar uma referência na tag head de nosso index.html ao arquivo de configuração, como podemos ver no código abaixo:

<link rel="manifest" href="/manifest.json">
Code language: HTML, XML (xml)

Adicionando suporte a versão off-line

Agora que já definimos como o nosso app será instalado é hora de adicionar a versão off-line da nossa aplicação para isso vamos trabalhar com service workers.

Service Worker um script que é executando por nosso browser em background, separado de nosso DOM onde funciona como proxy acompanhando as requisições no nosso app.

Caso queira saber mais sobre o assunto confira o post sobre service worker.

Mas com esse recurso conseguimos controlar quando o nosso app faz requisições a rede e definir estratégias de cache e suporte a versão offline utilizando em conjunto com a cache API.

Atualmente existem bibliotecas que facilitam a implementação desses recursos, por exemplo, Workbox onde também tenho um post mais detalhado sobre o assunto aqui.

Mas AMP vai um passo além do Workbox e abstrai uma série de passos na configuração de um service worker para implantação de estratégias de cache e versão off-line. Isso tudo utilizando AMP Service Worker ele armazena automaticamente os scripts e os documentos da nossa aplicação.

Como criar um service worker com AMP?

Passo 1 – criar o arquivo que irá importar o AMP Service Worker e incializa-lo, para isso vamos criar um arquivo JavaScript chamado sw.js e adicionar o seguinte código:

importScripts('https://cdn.ampproject.org/sw/amp-sw.js');
AMP_SW.init();
Code language: JavaScript (javascript)

Passo 2 – Incluímos o script que irá instalar o AMP Service Worker próximos os scripts que você já carrega na sua aplicação AMP.

<script async custom-element="amp-install-serviceworker" src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js"></script>Code language: HTML, XML (xml)

Passo 3 – Adicionamos no corpo da nossa página HTML o componente amp-install-servieworker:

<amp-install-serviceworker src="/sw.js"
           data-iframe-src="install-sw.html"
           layout="nodisplay">
</amp-install-serviceworker>Code language: HTML, XML (xml)

O componente amp-install-serviceworker irá registrar um service worker definido na propriedade src, dois pontos importantes sobre o service worker:

  • Precisa estar na pasta raiz da aplicação.
  • Precisa ser servido via HTTPS.

A segunda propriedade é o data-iframe-src é um atributo opicional que será responsável por verificar se o browser possui suporte a service worker e instalá-lo em caso possua.

Passo 4 – o último passo, vamos criar o arquivo definida pela propriedade data-iframe-src:

<!doctype html>
<title>installing service worker</title>
<script type='text/javascript'>
 if('serviceWorker' in navigator) {
   navigator.serviceWorker.register('./sw.js');
 };
</script>
Code language: HTML, XML (xml)

Com esses 4 passos temos a nossa primeira versão offline, o AMP Service Worker nos permite definir estratégias de cache para arquivos específicos. Caso queira saber mais sobre estratégias de cache eu escrevi um post aqui.

Vou criar mais um post de como modificar estratégias de cache e exibir uma página específica parar quando os usuários estiverem off-line.


Publicado

em

por

Comentários

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *