Progressive Web Apps

WictorP · Janeiro 30, 2019

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.

Gabriel Heming · Janeiro 31, 2019

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 no Chrome, para validar o quanto de técnicas PWA seu app está usando.

WictorP · Fevereiro 1, 2019

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 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')
} else {
  //Register the ServiceWorker
  navigator.serviceWorker.register('pwabuider-sw.js', {
  }).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.

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.

Gabriel Heming · Fevereiro 1, 2019

O arquivo pwabuilder.js não está sendo localizado. Como está a sua árvore/diretório de arquivos?

WictorP · Fevereiro 1, 2019

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

Gabriel Heming · Fevereiro 1, 2019

Você está usando algum servidor para rodar sua aplicação? Como eu sempre utilizei um servidor node, não tive esse problema.

WictorP · Fevereiro 1, 2019

A aplicação está hospedada em um cPanel da hostigator.

WictorP · Fevereiro 1, 2019

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.

Gabriel Heming · Fevereiro 1, 2019

Mas aonde você configurou o arquivo offline.html?

WictorP · Fevereiro 2, 2019

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.

Gabriel Heming · Fevereiro 4, 2019

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.

https://jakearchibald.github.io/isserviceworkerready/

WictorP · Fevereiro 5, 2019

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.

Arquivado

Progressive Web Apps

Recommended Posts

WictorP 9

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gabriel Heming 766

Compartilhar este post

Link para o post

Compartilhar em outros sites

WictorP 9

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gabriel Heming 766

Compartilhar este post

Link para o post

Compartilhar em outros sites

WictorP 9

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gabriel Heming 766

Compartilhar este post

Link para o post

Compartilhar em outros sites

WictorP 9

Compartilhar este post

Link para o post

Compartilhar em outros sites

WictorP 9

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gabriel Heming 766

Compartilhar este post

Link para o post

Compartilhar em outros sites

WictorP 9

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gabriel Heming 766

Compartilhar este post

Link para o post

Compartilhar em outros sites

WictorP 9

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Dúvida em Relação a Teclas

Conexão mysql com outro domínio

[Resolvido] JavaScript - Exibir logo dentro da Tabela html

Conteúdo Similar

Fóruns

Tempo Real

Informação importante