February 29, 2024
Projeto Disciplinas (PWA)
Criar estrutura com HTML e CSS- Responsivo
Implementação de manifest.json- Implementação de Services Worker
- Instalação do Services Worker
- Botão Like nas disciplinas
Códigos (services-worker.js):
const CACHE_NAME = 'static-cache-v1';
const assetsToCache = [ '/', '/index.html', '/css/style.css', '/img/avancar.svg', '/img/voltar.svg', '/img/dark.svg', '/img/icon-192x192.png', '/img/icon.png', '/js/index.js', '/manifest.json' ];
// Instalar o service worker e cache os ativos estáticos self.addEventListener('install', e => { e.waitUntil( caches.open(CACHE_NAME) .then(cache => { console.log('Caching all: app shell and content'); return cache.addAll(assetsToCache); }) ); });
Códigos (instalação de services-worker.js):
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
// Registro foi bem-sucedido
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) {
// Registro falhou :(
console.log('ServiceWorker registration failed: ', err);
});
});
}
</script>
Exercício (0,5 pts)
- Deixar o nosso projeto responsive. https://github.com/370100961/revisao-capw-pmc
- Apaguem os códigos referente ao tamanho do main.
- Utilizem as práticas que vimos em sala de aula.
- Enviem para o link no item 4.
- Quem não colocou o conteúdo dos períodos 4, 5, 6, 7 e 8, também adicionar.
- Ignorem por enquanto os itens 2 e 3 abaixo 👇
- Criem o botão Like nas disciplinas.
- Salve a lista de disciplinas no localStorage.
- Link para envio: https://forms.office.com/r/U1qRVh1eUw