Felipe Regino
Como transformar um site no github pages feito com jekyll em uma pwa
24 Apr 2019
Reading time ~3 minutes
BackOlá você, tudo em cima?
Nesse post, irei comentar o processo que fiz, para transformar esse site no qual você está agora em uma PWA.
Antes de mais nada, gostaria de pedir desculpas por não colocar o link dos lugares onde pesquisei pois acabei perdendo meu histórico :(
Sem mais delongas vamos direto ao ponto agora. Primeiramente indico fortemente que instalem uma extensão para chrome chamada Lighthouse, ela vai nos ajudar a ver se estamos fazendo tudo direitinho, retornando para a gente uma tela com dados como esta:
Como podem ver, preciso melhor a acessibilidade do meu site.
Manifest.json
A partir dai, precisamos criar um manifest.json
na pasta raiz do seu projeto, que vai ficar mais ou menos como isso aqui:
{
"name": "Felipe Regino",
"short_name": "Felipe Regino",
"theme_color": "#333333",
"background_color": "#333333",
"display": "standalone",
"Scope": "/",
"start_url": "/",
"icons": [
{
"src": "https://feliperegino.github.io/assets/img/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "https://feliperegino.github.io/assets/img/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "https://feliperegino.github.io/assets/img/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "https://feliperegino.github.io/assets/img/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "https://feliperegino.github.io/assets/img/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "https://feliperegino.github.io/assets/img/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "https://feliperegino.github.io/assets/img/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "https://feliperegino.github.io/assets/img/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"splash_pages": null
}
Para facilitar, utlizei o site Web App Manifest Generator que já gera o manifest.json
e todos os icones nos tamanhos corretos para você, só é preciso atualizar no manifest.json
para os caminhos corretos onde você colocou seus icones.
Com o manifest.json
e os icones prontos, você precisa declarar no <head> do seu site. Adicione a seguinte tag dentro do seu <head>:
<link rel="manifest" href="/manifest.json">
Service Worker
Precisamos agora criar um service worker para nos ajudar com o cache!
Crie um arquivo na raiz do seu projeto como o nome serice-worker.js
, cole esse código e faça as alterações necessarias para as especificidades do seu site.
Essa é uma adaptação minha de um código que achei na internet, novamente desculpem por não dar os créditos. Tentei alguns outros códigos mas esse foi o que funcionou melhor no meu caso, que tenho um blog estático no github pages.
Agora que ja temos nosso Service Worker, precisamos registra-lo! Volte no seu <head> e cole o seguinte código:
Com isso o seu site já funcionará como uma PWA!
hasta la vista!