Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa tarde, tudo bem? Espero que sim!
Estou fazendo um projeto de pequeno porte, porém preciso que esta página funcione através de um PWA.
Até ai tranquilo...
Vi alguns artigos de como fazer, inclusive o https://imasters.com.br/front-end/progressive-web-apps-pwa-e-evolucao-da-web registrado aqui na iMasters.
Fiz todos os passos (eu acho), não entendo muito... Mas segue abaixo os códigos que inseri:
Código manifest.json
{
"short_name": "SJ",
"name": "Sistema Jéssica",
"icons": [
{
"src": "arquivos/imagens/logo.png",
"sizes": "126x126",
"type": "image/png"
}
],
"scope": "/",
"start_url": "/inicio",
"orientation": "portrait",
"display": "fullscreen",
"theme_color": "#ffffff",
"background_color": "#ffffff"
}
Inserido no .js global do site
self.addEventListener('install', (event) => {
let plugins = [
new WorkboxPlugin({
globDirectory: DIST_DIR,
globPatterns: ['**/*.{php,js,css,json,png}'], // {21}
swDest: path.join(DIST_DIR, 'sw.js') //{22}
})
];
const workboxSW = new WorkboxSW();
const networkFirst = workboxSW.strategies.networkFirst();
workboxSW.router.registerRoute('/arquivos', networkFirst); // {23}
});
self.addEventListener('activate', (event) => {
// SW está instalado e ativo
// Podemos terminar o setup
// Ou limpar cache antigo
});
self.addEventListener('fetch', (event) => {
// Escuta cada evento de fetch
// E faz alguma coisa para cada request
// feito da app para API server
});
**Inserido dentro do <head> global do site**
<link rel="manifest" href="manifest.json">
Verifico e não há registro de cache no navegador, então não está funcionando.
Estou fazendo algo errado?
**Abraços, Wictor Pamplona.**>
8 horas atrás, Gabriel Heming disse:
Mas você informou para o navegador qual é o ServiceWorker que será utilizado?
O comando é similar a este:
if ('serviceWorker' in navigator)
{
navigator.serviceWorker
.register('/sw.js')
.then(function() {
console.log('Service worker resgistered!');
});
}
Outra é instalar o add-on [Lighthouse](https://developers.google.com/web/tools/lighthouse/) no Chrome, para validar o quanto de técnicas PWA seu app está usando.
Olá Gabriel, tudo bem?
Desde já agradeço a ajuda.
Estou sim utilizando uma função para chamar o SW:[/
//This is the "Offline page" service worker
//Add this below content to your HTML page, or add the js file to your page at the very top to register service worker
if (navigator.serviceWorker.controller) {
console.log('[PWA Builder] active service worker found, no need to register') }).then(function(reg) {
console.log('Service worker has been registered for scope:'+ reg.scope);
});
}
Porém ele está retornando no navegador que o arquivo não está no mesmo diretório e o ServiceWorker fica como **redundant**, não é lido.
/monthly_2019_02/image.png.15784539f0252924731917cbb18f5e6e.png" />
**Erro que o navegador apresenta:**
A bad HTTP response code (404) was received when fetching the script.
Failed to load resource: net::ERR_INVALID_RESPONSE
offline.html:1 Uncaught (in promise) TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.O arquivo pwabuilder.js não está sendo localizado. Como está a sua árvore/diretório de arquivos?
Boa tarde.
Todos os arquivos estão dentro da pasta principal (htdocs).
Realmente o arquivo que chama o pwabuilder estava chamando o nome incorreto, o erro que aparecia no navegador desapareceu, porém ele ainda não cria o serviceworker.
Obrigado!
Abraços, Wictor Pamplona
Você está usando algum servidor para rodar sua aplicação? Como eu sempre utilizei um servidor node, não tive esse problema.
A aplicação está hospedada em um cPanel da hostigator.
Consegui resolver!
O problema estava na chamada da função dentro da página.
Apenas mais uma ajuda, Gabriel.
O ServiceWorker está redirecionando para a página offline.html mesmo estando com internet.
Consegui me apontar algum erro no código?
Obrigado!
Abraços, Wictor Pamplona.
Mas aonde você configurou o arquivo offline.html?
Opa Gabriel!
Consegui resolver com muita pesquisa e sua ajuda, claro!
Porém me deparei com um "pequeno grande" problema. Fiquei tão engajado para fazer o PWA funcionar que não me atentei à procurar suas funcionalidades e acabei percebendo que ele não é totalmente funcional no iOS ao qual eu precisava atingir.
De qualquer forma agradeço sua ajuda e se tiver alguma outra solução para tornar o site um aplicativo nativo do iOS, eu agradeço.
Abraços, Wictor Pamplona.
Adicione todas as modificações que você fez para corrigir, isso ajudará futuro desenvolvedores.
Melhor que PWA, só mesmo um app, seja híbrido ou nativo.
Um site bem desenvolvido, responsivo, se não for totalmente PWA, só perderá as funcionalidades se estiver offline (ou seja, não é um app).
Sobre a compatibilidade, existe algumas incompatibilidade, mas na maioria, as funcionalidades já estão no Safari.
Claro Gabriel!
pwabuilder-sw-register.js
if ('serviceWorker' in navigator)
{
navigator.serviceWorker
.register('/pwabuilder-sw.js')
.then(function() {
console.log('Service worker resgistered!');
});
}
**pwabuilder-sw.js**//This is the "Offline page" service worker
//Install stage sets up the offline page in the cache and opens a new cache
self.addEventListener('install', function(event) {
var offlinePage = new Request('offline.html');
event.waitUntil(
fetch(offlinePage).then(function(response) {
return caches.open('pwabuilder-offline').then(function(cache) {
console.log('[PWA Builder] Cached offline page during Install'+ response.url);
return cache.put(offlinePage, response);
});
}));
});//If any fetch fails, it will show the offline page.
//Maybe this should be limited to HTML documents?
self.addEventListener('fetch', function(event) {
event.respondWith(
fetch(event.request).catch(function(error) {
console.error( '[PWA Builder] Network request Failed. Serving offline page ' + error );
return caches.open('pwabuilder-offline').then(function(cache) {
return cache.match('offline.html');
});
}
));
});
//This is a event that can be fired from your page to tell the SW to update the offline page
self.addEventListener('refreshOffline', function(response) {
return caches.open('pwabuilder-offline').then(function(cache) {
console.log('[PWA Builder] Offline page updated from refreshOffline event: '+ response.url);
return cache.put(offlinePage, response);
});
});
Feito isso basta adicionar o seu **manifest.json** e o **pwabuilder-sw-register.js** na HEADER da sua página.
Lembrando que este código apenas redireciona para uma página offline caso o usuário esteja sem internet, ou seja, ele armazena em CACHE apenas a página offline, assim não aparecerá o erro do navegador e sim a sua página de aviso.
----
Obrigado pela dica, Gabriel! Irei ler o artigo.
**Abraços, Wictor Pamplona.**
Mas você informou para o navegador qual é o ServiceWorker que será utilizado?
O comando é similar a este:
if ('serviceWorker' in navigator)
{
navigator.serviceWorker
.register('/sw.js')