February 29

Projeto Disciplinas (PWA)

  1. Criar estrutura com HTML e CSS
  2. Responsivo
  3. Implementação de manifest.json
  4. Implementação de Services Worker
  5. Instalação do Services Worker
  6. 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)

  1. Deixar o nosso projeto responsive. https://github.com/370100961/revisao-capw-pmc
    1. Apaguem os códigos referente ao tamanho do main.
    2. Utilizem as práticas que vimos em sala de aula.
    3. Enviem para o link no item 4.
    4. Quem não colocou o conteúdo dos períodos 4, 5, 6, 7 e 8, também adicionar.
    5. Ignorem por enquanto os itens 2 e 3 abaixo 👇
  2. Criem o botão Like nas disciplinas.
  3. Salve a lista de disciplinas no localStorage.
  4. Link para envio: https://forms.office.com/r/U1qRVh1eUw