Categorias
AMP Accelerated mobile pages

Compartilhando conteúdo nas redes sociais com AMP

Nesse post iremos ver como compartilhar conteúdo nas redes sociais com AMP. Compartilhamento de conteúdo é um dos pontos chaves para trazer novos usuários para sua aplicação e um pontos chaves na plataforma AMP por questões de perfomance é o bloqueio de scripts de terceiros, ou seja, por vias tradicionais é impossível utilizar o botões de compartilhamento de plataformas como Twitter e Facebook, uma solução rápida é a utilização da share API, mas ela é apenas suportada por browsers mobile.

Mas isso não significa que AMP não suporta compartilhamento de conteúdo. Para isso temos o componente amp-social-share com ele podemos compartilhar conteúdo com diferentes opções:

  • Web share api
  • Email
  • Facebook
  • Linkedin
  • Pinterest
  • Tumblr
  • Twitter
  • Whatsapp
  • LINE
  • SMS

E seu uso é bem simples, primeiramente precisamos carregar os script amp-social-share-0.1.js:

<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>

Depois em nosso código chamar os botões de compartilhamento que queremos utilizar, a plataforma será definida pelo parâmetro type, como no exemplo a seguir:

<div class="social-bar">
<amp-social-share type="twitter"></amp-social-share>
<amp-social-share type="email"></amp-social-share>
<amp-social-share type="linkedin"></amp-social-share>
<amp-social-share type="facebook"></amp-social-share>
<amp-social-share type="whatsapp"></amp-social-share>
</div>

E o formato default será o seguinte:

Propriedades

Podemos modificar nossos botões de compartilhamento através de propriedades e o componente amp-social-share trabalha em geral com os seguintes atributos:

  • type – qual a plataforma que iremos compartilhar
  • data-target – se iremos abrir uma uma nova aba
  • data-share-endpoint – caso a plataforma em que requeremos compartilhar não esteja na lista acima podemos definir um endpoint caso a plataforma que queremos utilizar possua.
  • data-param-* – podemos adicionar atributos relacionados a plataforma em que queremos compartilhar o conteúdo.
  • width e height – podemos definir as dimensões de nossos componentes.

Customizando o estilo dos nosso botões

Por padrão sabemos que nosso componente carrega algum estilo como ícones e cores específicas da plataforma, também sabemos podemos modificar algumas funcionalidades e o formato do nosso botão através de propriedades.

Mas caso queiramos modificar a cor do nosso botão, por exemplo, para isso vamos precisar modificar o nosso CSS. Para essa ação podemos utilizar seletores específicos. Como no exemplo abaixo:

amp-social-share[type='twitter'],
amp-social-share[type='facebook'],
amp-social-share[type='email'],
amp-social-share[type='whatsapp'],
amp-social-share[type='linkedin'] {
background-color: black;
color: white;
}

No código acima temos a seleção dos items por tags e tipo, poderíamos aplicar um seletor genérico por tag, mas nesse exemplo eu adicionei o tipo como uma opção de alterar item a item.

Esse tutorial faz parte de um curso online que estou criando no meu canal do youtube, caso deseja acompanhar, só assinar o canal:

Veja mais posts sobre AMP na página da categoria ou qualquer dúvida deixe um comentário e até o próximo post

Categorias
AMP Accelerated mobile pages

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 em meu canal.

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

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

Criando um web app manifest para nossa PWA

Primeiro passo vamos criar um web app manifest arquivo json que permite que dispositivos que reconheçam que nossa aplicação pode se instalável. Para isso vamos adicionar em 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"
}

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

  • short_name: o nome que sera exibido na tela inicial do nosso usuário.
  • icons: com uma lista de ícones que iremos exibir em diferentes plataformas.
  • start_url: o endereço 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 nossa PWA será exibida
  • theme_color: as cor do tema da nossa aplicação, por exemplo, barra de controle.

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

<link rel="manifest" href="/manifest.json">

Adicionando suporte a versão off-line

Agora que já definimos como nosso app será instalado é hora de adicionar a versão off-line de 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 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 de 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 os seguinte código:

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

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

<script async custom-element="amp-install-serviceworker" src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js"></script>

Passo 3 – Adicionamos dentro do 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>

O componente amp-install-serviceworker irá registrar um service worker definido na propriedade src, dois pontos importante 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 instalar-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>

Com esse 4 passos temos nossa primeira versao offline, o AMP Service Worker nos permite definir estratégias de cache para arquivos especificos. Caso queira saber mais sobre estrategias 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.