Geekly articles weekly

PWA é fácil. Hello habr

Continuando a conhecer os Aplicativos da Web Progressivos. Após a última parte teórica , é hora de começar a praticar.

Hoje vamos construir um simples, mas completo PWA "Hello Habr".




O aplicativo está disponível em https://altrusl.imtqy.com/habr-pwa/hello-habr/ . Quando aberto em um navegador em um dispositivo móvel, é possível adicionar um atalho à tela inicial e iniciar no modo de tela cheia.

Se alguém quiser experimentar o exemplo em questão no computador, o Chrome permitirá que você trabalhe localmente com aplicativos simples do PWA sem instalar servidores Web de terceiros com certificados SSL.
Instruções para executar "Hello Habr" localmente
Você deve instalar esta extensão ou uma extensão similar na Chrome Web Store, que é o servidor da web local. Sem suporte ao PHP, é claro.



Os arquivos Hello Habr podem ser obtidos no GitHub-a - https://github.com/altrusl/habr-pwa/tree/master/hello-habr

Coloque tudo em um diretório e aponte para o servidor web.


"Olá Habr" consiste em uma página. Ele mostra uma foto (logotipo) e uma inscrição animada.

Código "Olá Habr"

index.html


<html> <head> <title>Hello Habr</title> <script src="hh.js"></script> <link rel="stylesheet" href="hh.css" /> <script type="text/javascript"> if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js') .then(function(registration) { console.log('Registration successful, scope is:', registration.scope); }) .catch(function(error) { console.log('Service worker registration failed, error:', error); }); } </script> </head> <body> <div class="center"> <p id="text"></p> </div> <div id="logo"></div> </body> </html>

hh.css


 @font-face { font-family: Zaplyv-Heavy; src: url(Zaplyv-Heavy.otf); } body { display: flex; align-items: center; align-content: center; justify-content: center; overflow: auto; } .center { font-family: Zaplyv-Heavy; font-size: 8vmax; } #logo { background-image: url(logo.jpg); background-size: 100%; width: 100px; height: 100px; position: absolute; top: 0; right: 0; margin: 10px; }

hh.js


 window.onload = function() { fetch("hh.txt?mode=nocache").then(data => data.text()).then(data => { animateText(data) }); } function animateText(data) { var ele = document.getElementById("text"), txt = data.split(""); var interval = setInterval(function(){ if(!txt[0]){ return clearInterval(interval); }; ele.innerHTML += txt.shift(); }, 150); }

hh.txt


 Hello Hubr


Fonte personalizada também está presente. Total - o conjunto mínimo completo de recursos de um site médio. Se você abrir index.html em um navegador, uma imagem e uma inscrição serão exibidas. A inscrição é carregada por javascript via busca no arquivo hh.txt - o modelo mais simples de um aplicativo PWA geral.

Se você abrir sem o sw.js., este será um site comum. Adicione o Service Worker aos nossos arquivos.

sw.js
 // Caches var CURRENT_CACHES = { font: 'font-cache-v1', css:'css-cache-v1', js:'js-cache-v1', site: 'site-cache-v1', image: 'image-cache-v1' }; self.addEventListener('install', (event) => { self.skipWaiting(); console.log('Service Worker has been installed'); }); self.addEventListener('activate', (event) => { var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function(key) { return CURRENT_CACHES[key]; }); // Delete out of date caches event.waitUntil( caches.keys().then(function(cacheNames) { return Promise.all( cacheNames.map(function(cacheName) { if (expectedCacheNames.indexOf(cacheName) == -1) { console.log('Deleting out of date cache:', cacheName); return caches.delete(cacheName); } }) ); }) ); console.log('Service Worker has been activated'); }); self.addEventListener('fetch', function(event) { console.log('Fetching:', event.request.url); event.respondWith(async function() { const cachedResponse = await caches.match(event.request); if (cachedResponse) { console.log("\tCached version found: " + event.request.url); return cachedResponse; } else { console.log("\tGetting from the Internet:" + event.request.url); return await fetchAndCache(event.request); } }()); }); function fetchAndCache(request) { return fetch(request) .then(function(response) { // Check if we received a valid response if (!response.ok) { return response; // throw Error(response.statusText); } var url = new URL(request.url); if (response.status < 400 && response.type === 'basic' && url.search.indexOf("mode=nocache") == -1 ) { var cur_cache; if (response.headers.get('content-type') && response.headers.get('content-type').indexOf("application/javascript") >= 0) { cur_cache = CURRENT_CACHES.js; } else if (response.headers.get('content-type') && response.headers.get('content-type').indexOf("text/css") >= 0) { cur_cache = CURRENT_CACHES.css; } else if (response.headers.get('content-type') && response.headers.get('content-type').indexOf("font") >= 0) { cur_cache = CURRENT_CACHES.font; } else if (response.headers.get('content-type') && response.headers.get('content-type').indexOf("image") >= 0) { cur_cache = CURRENT_CACHES.image; } else if (response.headers.get('content-type') && response.headers.get('content-type').indexOf("text") >= 0) { cur_cache = CURRENT_CACHES.site; } if (cur_cache) { console.log('\tCaching the response to', request.url); return caches.open(cur_cache).then(function(cache) { cache.put(request, response.clone()); return response; }); } } return response; }) .catch(function(error) { console.log('Request failed for: ' + request.url, error); throw error; }); }


Como você pode ver, criamos cinco caches para cada tipo de recurso. O cache do site é para arquivos html. Todos os recursos são armazenados em cache, com exceção daqueles que possuem "mode = nocache" na consulta GET - e esta é a nossa solicitação para o arquivo hh.txt com uma linha para a inscrição.
Às vezes, você pode ver que o recurso foi retirado do cache do disco. Esse é um problema comum ao desenvolver aplicativos com o Service Worker, portanto, é melhor desativar o cache do disco (cache do navegador). E não no meu navegador, mas no servidor - por exemplo, em
.htaccess
 # Cache-Control Headers <ifModule mod_headers.c> <FilesMatch (\.css|\.js|sprites\.png)$> Header unset ETag Header unset Expires Header set Cache-Control "no-cache" </FilesMatch> </IfModule>

A lógica por trás do sw.js. é simples - “Cache retornando à rede”. Primeiro, o recurso solicitado é verificado no cache, se estiver presente, é retirado e devolvido ao navegador a partir daí. Caso contrário, é obtido da rede, retornado ao navegador e uma cópia do recurso é armazenada em cache.

Após a primeira abertura da página index.html no console do Chrom-a, os registros sobre a instalação e ativação do Service Worker estão visíveis. Após a segunda abertura, nossos caches são criados no armazenamento e nossos recursos são colocados neles. Também é visto que, durante as aberturas subseqüentes, apenas as solicitações para hh.txt vão para o servidor da Web, todos os outros recursos são obtidos do Service Worker-a.

Captura de tela


Index.html, hh.css, hh.js, hh.otf, logo.jpg armazenados localmente - esse é o próprio shell do aplicativo, um shell de recursos e dados estáticos, que atua como um shell do programa no cliente. Todas as informações dinâmicas necessárias para o funcionamento do site são obtidas por solicitações de javascript para o servidor e pela exibição dos dados recebidos no aplicativo shell-e. No nosso caso, esta é uma solicitação para text.txt.

Para ser chamado de PWA totalmente funcional, “Hello Habr” não tem uma coisa - os ícones na tela inicial dos smartphones e iniciam no modo de tela cheia.

Para fazer isso, você precisa conectar o manifesto do aplicativo em index.html:
manifest.json
 { "short_name": "Hello Habr", "name": "Hello Habr - PWA example", "icons": [ { "src": "logo3.jpg", "type": "image/jpg", "sizes": "192x192" }, { "src": "logo2.jpg", "type": "image/jpg", "sizes": "512x512" } ], "start_url": "index.html", "background_color": "#3367D6", "display": "standalone", "scope": "/habr-pwa/hello-habr/", "theme_color": "#3367D6" }

Ele está conectado no index.html:
 <link rel="manifest" href="manifest.json">


Depois disso, os navegadores móveis (cada um à sua maneira) oferecerão a criação de um atalho para o aplicativo na tela inicial. Quando iniciado por um atalho, o aplicativo será aberto no modo autônomo - sem os controles do navegador. Mais detalhes sobre as opções de manifesto estão no Google Developers .

O aplicativo Hello Habr possui minimamente todos os recursos do PWA e é essencialmente ele. Como você pode ver, para transferir um site simples para o PWA, você só precisa conectar o manifesto e o arquivo Service Worker. Usado pelo sw.js é bastante universal.

Da próxima vez, transferiremos o site finalizado para o PWA para o CMS Joomla (o site está "pronto para uso" com os dados de demonstração iniciais). Além disso, o sw.js permanecerá quase o mesmo.

Source: https://habr.com/ru/post/pt419585/

More articles:


All Articles