Jump to content
WictorP

Progressive Web Apps

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

 

image.thumb.png.d5ae86a64b44612d5e5ea7a54032dfb0.png

 

Obrigado!

 

Abraços, Wictor Pamplona

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Mas aonde você configurou o arquivo offline.html?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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/

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Edgard Hufelande
      Olá, tenho algumas dúvidas sobre o uso de PWA para desenvolvimento de uma aplicação mobile offline, vou colocar como questões ficará mais fácil de entende-las.
      Ficaria extremamente grato se algum especialista em PWA possa tirar minhas dúvidas. rs
       
      1 - A tecnologia PWA realmente é algo que tem futuro? Acham que boa parte dos futuros apps poderão ser feitos em PWA?
      2 - Caso a aplicação deva ser totalmente offline, entrar no modo online apenas para sincronização de dados produzidos, vale a pena o uso do PWA?
      3 - No uso do armazenamento do IndexedDB, há alguma forma de implementar uma segurança dos dados? Ex: Autenticação de usuários, dados restritos etc...
      4 - É possível que eu tenha alguma dor de cabeça futuramente, que seja um problema geral? Algo que ocorra com bastante gente?
      5 - Pra finalizar, uma sugestão sua PWA ou Cordova?
         Explicação: estou fazendo uma aplicação em Angular 5 e preciso que essa aplicação funcione totalmente offline, em um certo momento irei sincronizar com o servidor os dados produzidos, é uma
                               aplicação com prazo pra ser desenvolvido, achei interessante a tecnologia do pwa e ao meu ver poderia dar praticidade tanto no desenvolvimento quanto na disponibilização da aplicação
                               para os usuários.
    • By gabrieldarezzo
      Salve salve!
       
      Eu queria fazer um Menu estilo whatsApp: 
       
       
      O mais próximo que cheguei foi isso: (LIVE DEMO)
      http://gabrieldarezzo.github.io/menuTouch/ 
       
      Source completo:
      https://github.com/gabrieldarezzo/menuTouch
       
      Alguem tem alguma dica de Plugin/jQuery/Angular ou qualquer PWA que tenha o mesmo comportamento?
       
      Basicamente tentei dividir o 'problemão' em problemas menores...
      O menu do Whats tem:
      (Feito) Opção de clicar direto pelos menus 
      (Feito) Opção de Arrastar o touch/mouse 
      Animação da borda Bottom (já me indicaram a do Sergio Lopes, então acho q me viro daqui pra frente...
      Empurrar todo o box div para a direita e simultaneamente o outro para a esquerda.
       
      Então basicamente vou ter 3 divs correspontende a cada item do menu:
       
      <div class="tab-content"> <div id="recados" role="tabpanel" class="tab-pane fade in active" ng-swipe-right="menuInschoolRight(this)" ng-swipe-left="menuInschoolLeft(this)"> Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker. </div><!-- / #recados --> <div id="avisos" role="tabpanel" class="tab-pane fade in" ng-swipe-right="menuInschoolRight()" ng-swipe-left="menuInschoolLeft(this)"> aralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker. Ntate inalterado. Se popularizou na década de 60, quando a Letrase </div><!-- / #avisos --> <div id="eventos" role="tabpanel" class="tab-pane fade in" ng-swipe-right="menuInschoolRight()" ng-swipe-left="menuInschoolLeft(this)"> Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker. inando sua diagramação. A vantagem de usar Lorem Ipsum é que ele tem uma distribuição normal de letras, ao contrário de "Conteúdo aqui, conteúdo aqui", fazendo com que ele tenha uma aparência similar a de um texto legível. Muitos softwares de publicação e editores de páginas na internet agora usam Lorem Ipsum como texto-modelo padrão, e uma rápida busca por 'lorem ipsum' mostra vários websites ainda e </div><!-- / #eventos --> </div><!-- / .tab-content -->  
      Minha duvida principal é como fazer esse comportamento do SlideIn /Left  + SlideIn /Right, to estudando até Theread pra vocês terem uma noção... hahaha
      Enfim qlq luz ta valendo, abraço a todos.
       
       
       
       
      Quem quiser pode dar uma olhada no resultado:
      https://github.com/gabrieldarezzo/menuTouch
       
      Outra opção:
      http://materializecss.com/tabs.html
      (Abas) / swipeable 
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.