Como criar um Progressive Web App (PWA)?

Para que um PWA funcione é preciso que cada item desse check list seja atendido:

  • Use HTTPS e redirecione sempre para HTTPS
  • Site Responsivo e Rápido
  • Cor de tema no site
  • Manifesto com informações do seu site
  • Registre um Service Worker

Para facilitar o teste de todos os itens desse checklist, e muitos outros testes, você pode utilizar o Lighthouse que é um plugin do Google Chrome. Segue o link: https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk

O manifest.json deve ser linkado ao html da seguinte forma:

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

Segue código fonte do manifest.json:

{
"name": "Suculentas Campo Grande - MS",
"short_name": "SuculentasCG",
"theme_color": "#535e4e",
"background_color": "#535e4e",
"display": "standalone",
"scope": "/",
"start_url": "/?utm_source=homescreen",
"lang": "pt-BR",
"orientation": "any",
"icons": [
{
"src": "\/assets/icon/android-icon-36x36.png",
"sizes": "36x36",
"type": "image\/png",
"density": "0.75"
},
{
"src": "\/assets/icon/android-icon-48x48.png",
"sizes": "48x48",
"type": "image\/png",
"density": "1.0"
},
{
"src": "\/assets/icon/android-icon-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "\/assets/icon/android-icon-96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{
"src": "\/assets/icon/android-icon-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": "3.0"
},
{
"src": "\/assets/icon/android-icon-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
},
{
"src": "\/assets/icon/splashscreen.png",
"sizes": "640x640",
"type": "image\/png",
"density": "4.0"
}
]
}

Um Service Worker é um script que seu navegador executa em segundo plano, separado da página da Web, possibilitando recursos que não precisam de uma página da Web ou de interação do usuário.

Segue código do sw.js:

// Cache on install

var staticCacheName = 'suculentas_cg_ms_2019_02_16_20_13'
this.addEventListener("install", event => {
this.skipWaiting();

event.waitUntil(
caches.open(staticCacheName)
.then(cache => {
return cache.addAll([
'/offline',
'/assets/manifest.json',
'/assets/images/logo.png',
'/assets/images/sobre_destaque.png',
'/assets/images/offline.png',
'/assets/css/suculentas_template.css',
'/assets/js/vendor/ssg.css',
'/assets/js/vendor/ssg.js',
'/assets/js/jquery.mask.min.js',
'/assets/js/cdQuery.js',
'/assets/js/navbar.js',
'/assets/js/dropdown.js',
'/assets/js/mask.js',
'/assets/js/alert.js'
]);
})
)
});


// Clear cache on activate
this.addEventListener('activate', event => {
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames
.filter(cacheName => (cacheName.startsWith('suculentas_cg_ms_')))
.filter(cacheName => (cacheName !== staticCacheName))
.map(cacheName => caches.delete(cacheName))
);
})
);
});


// Serve from Cache
this.addEventListener("fetch", event => {
event.respondWith(
caches.match(event.request)
.then(response => {
return response || fetch(event.request);
})
.catch(() => {
return caches.match('/offline');
})
)
});

O service worker deve ser iniciado dentro da tag head da página inicial do site da seguinte forma:

<script>
           if ('serviceWorker' in navigator) {
                navigator.serviceWorker.register('/sw.js')
                    .then(reg => console.info('registered sw', reg))
                    .catch(err => console.error('error registering sw', err));
            } else {
                console.log('ServiceWorker não é suportado.');
            }
</script>

O service worker não deve ser colocado no cache do browser, para tanto, caso esteja utilizando uma aplicação Nodejs com Express pode proceder da seguinte forma:

app.use('/sw.js', express.static(path.join(__dirname, 'sw.js'), {
    maxAge: 0
}));

Artigos:
https://tableless.com.br/crie-seu-primeiro-progressive-web-app/
https://willianjusten.com.br/como-fazer-seu-site-funcionar-offline-com-pwa/
https://medium.com/tableless/como-criar-seu-primeiro-progressive-web-app-do-zero-a7e6ca5fb21e

Muito obrigado e até a próxima!

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s

Este site utiliza o Akismet para reduzir spam. Saiba como seus dados em comentários são processados.