Fagdag PWA Oppgave - Sonat-Consulting/fagdag-pwa GitHub Wiki

Vi skal lage ein applikasjon som hentar ut kontaktinformasjon frå våre kjære kollegaer i Sonat og deretter presentere denne informasjonen i form av kontakt-kort. Dataen er gjort tilgjengelig her. Kvar person kan ha følgande informasjon tilgjengeleg:

{
  "email": "[email protected]",
  "image": "http://www.sonat.no/wp-content/uploads/2016/07/profile.png",
  "mobile": "+4799999999",
  "name": "Fornavn Etternavn",
  "status": "Test av statusoppdatering"
}

Kva vi skal lære oss

Oppsett av manifest.json
Bruk av service worker og event hooks for fetch og install
Offlinestøtte ved hjelp av caching av filer
Om vi får tid kan vi sjå på indexdb og synkronisering av lokal data når man får tilbake nettverkstilkobling etter å ha vore offline.
Vi anbefaler å sjå gjennom Google sin tutorial med tittel Your First Progressive Web App som du kan finne her

Det du treng for å komme i gang

NPM
Ein editor, t.d. Atom
Anbefalar også ein plugin til Atom language-javascript-jsx
Google Chrome

Kom i gang

Fork dette repoet
Hent ned koden

git clone [email protected]:{ditt brukarnamn}/fagdag-pwa.git

Installer alle dependencies

npm i

Start webpack devserver som vil lytte på filendringar og automatisk vises siste versjon i nettlesar.

npm start

Oppgåve 1 - Service worker (`sw.js`)

Vi skal lage service workeren vår (sw.js) som seinare skal ta seg av å lagre filer og eventuell applikasjons-data i cache.

Huk av checkboxen Update on reload under fanen Application > Service Workers i Chrome dev tools
Registrer lyttere for eventene install og fetch.
Logg ei melding i callback på følgande måte.

Hint! sw.js du skal jobbe på ligger under /src/

self.addEventListener('install', (e) => {
  console.log('[sw] onInstall');
});

Observer konsollen når sida lastar og merk deg når desse eventene blir fyrt.

Oppgåve 2 - Lag manifest

Web App Manifestet er ei enkel JSON fil som lar deg kontrollere korleis applikasjonen din vil sjå ut og oppføre seg dersom den blir lagra som snarvei på smarttelefonar. Les meir om Web App Manifest her. Når du er ferdig med denne oppgåva skal du kunne åpne Application > Manifest og sjå tilsvarande grafikk som under.

Hint! manifest.json ligger under /dist/

Oppgåve 3 - Cache App Shell

App "shell" er minimum av javascript, html og css som trengs for at applikasjonen skal kunne laste og rendre eit GUI til brukaren. Les meir om App Shell her. I denne oppgåva skal du lagre alle filene i vårt app shell i cache. Når du er ferdig skal du kunne inspisere Application > Cache > Cache Storage i Chrome Devtools og sjå alle filene lista ut der.

Hint! Denne sida kan være til hjelp

Hint! Dette er filene i vårt app shell:

const appShellFiles = [
  '/offline.html',
  '/manifest.json',
  '/app.js',
  '/icons/sonat_200x200.png',
  '/icons/sonat_400x400.jpg',
  '/icons/sonat_32x32.png',
  '/style.css',
  '/cards.css'
];

Hint! Om du står fast, kan kanskje denne metoden være til hjelp:

const cacheOfflineResources = () =>
  Promise.all([caches.open(FILE_CACHE)])
    .then(([fileCache]) => {
      fileCache.addAll(appShellFiles);
    });

Oppgåve 4 - Returner App Shell frå cache

I forrige oppgåve lagra vi alle filene som inngår i App Shell i cache. I denne oppgåva skal vi returnere desse filene fra cache i staden for å gå på nettverket for å finne dei. Når du er ferdig skal du kunne sjå i fanen Network i Chrome Dev Tools at desse filene blir returnert frå cache, eller om du har ein debugging proxy ala. Fiddler så skal du ikkje sjå desse filene i nettverkstrafikken.

Hint! Ved nettverksforespørsler blir eventen fetch fyrt.

Hint! Dersom du står fast kan kanskje metoden under være til hjelp.

const getCachedFiles = e =>
  caches.match(e.request)
    .then(response => response || fetch(e.request))
    .catch(handleOffline(e));

Oppgåve 5 - Vis `offline.html` når appen blir lasta uten internettilkobling

Vi har laga ei enkel html-side vi skal vise når vi ikkje har internettilkobling, som erstatning for den kjedelige chrome-sida This site can’t be reached. Når denne oppgåva er ferdig skal vi kunne sjå vår custom offline-side når du laster appen på nytt uten nett.

Hint! Når e.request.mode er 'navigate' i fetch event, så betyr dette at dette er lasting av nettside og ikkje lasting av ein ressurs (css, js, etc.)

Oppgåve 6 - Lagre applikasjonsdata (ansatt-data) i cache eller i indexdb

Vi opererer med relativt statiske data, som kontaktinformasjon. Denne informasjonen lar seg fint lagre i cache slik at den er tilgjengeleg også offline. Bruk sw.js til å lagre desse dataene i tillegg til statiske filer som css, js og html. Når du har gjort denne oppgåva skal du kunne huke av Offline, under Application > Service Workers og fortsatt få opp ansattdata når du laster sida på nytt.

Hint! Det kan være lurt å lage ein eigen cache-indeks for desse dataene slik at cache kan invalideres separat.

Hint! Vi må her utvide lista med filer vi vil cache, ettersom vi skal returnere index.html og ikkje offline.html når vi er uten nett:

const appShellFiles = [
  '/',
  '/index.html'
  '/offline.html',
  '/manifest.json',
  '/app.js',
  '/icons/sonat_200x200.png',
  '/icons/sonat_400x400.jpg',
  '/icons/sonat_32x32.png',
  '/style.css',
  '/cards.css'
];

Oppgåve 7 - Oppdater data cache (ansatt-data) når web appen blir lasta og vi har internettilkobling

Vi har allerede ansatt-data i cache, men det er jo litt synd om denne dataen aldri blir oppdatert! Det skal du få orden på no. Når denne oppgåva er gjort skal du kunne oppdatere statusen din, gå tilbake til hovudsida og sjå at den nye statusen din er satt. Gå offline og verifiser at den nye statusen fortsatt er satt. Før du begynner må du slå av Update on reload i Chrome devtools, under Application > Service Workers.

Hint! Lytteren vi har registrert på eventen fetch vil bli trigget når getEmployees blir kalt. Ellers kan det være greit å vite at navigator.onLine returnerer ein boolean som kan bli nyttig.

Hint 2! Dersom du treng litt hjelp på vegen har vi laga ein hjelpefunksjon du kan bruke, men prøv først å finne ut av det sjølv.

const fetchEmployeeData = request =>
    Promise.all([caches.open(DATA_CACHE), fetch(request)])
      .then(([dataCache, response]) => {
        dataCache.put(request.url, response.clone());
        return response;
      })
      .catch(error => { /* No internet connection */ });

Oppgåve 8 - Lagre profilbilder i cache for offline bruk

I denne oppgåva skal du forsøke å lagre profilbildene i cache slik at vi får ein fullgod opplevelse, også offline.

Hint! fetch(url) returnerer promise som resolver med eit response objekt. Les meir på developer.mozilla.org. Ansatt-data finnes her.

Oppgåve 9 - Oppdater status offline, synkroniser når du får tilbake internettforbindelsen

Bruk indexdb til å oppdatere status for ansatte når du er offline. Når du igjen får nettverk bruker du sw.js til å synkronisere database med lokal data.

Her har du komt lenger enn forfatteren, så du er on your own. Indexdb er kjent for å ha eit litt vanskelig API å jobbe med, men det finnes pakkar som feks. idb som tilbyr eit meir vennleg API på toppen av indexdb.

Publiser applikasjonen

Github pages er eit fint alternativ for hosting av denne applikasjonen ettersom du der kan serve statiske filer over https rett fra repositoriet ditt. Om du velger denne måten har vi eit npm script som kan gjere jobben enkel. Følgande kommando vil bygge filer til dist og pushe branch gh-pages til remote. Din PWA vil bli tilgjengelig på url https://{ditt brukarnamn}.github.io/fagdag-pwa/. Merk at rot-urlen i dette tilfellet blir /fagdag-pwa/ og dette må du ta høgde for i koden din.

npm run deploy