Översikt

Nu går du in i sista delen av kursen, den som hör till den sista examinationsuppgiften, B3. Den här veckan tar du steget från webbsidor i en flik till progressiva webbapplikationer, som går att installera och som fungerar utan uppkoppling. Det är vad som krävs för högre betyg på B3. Veckans artiklar går igenom begreppen och manifestet, service workerns livscykel och hur den cachar filerna så att applikationen fungerar offline. Information om veckans upplägg annonseras löpande i kursens Zulip-kanal.

2024-12-09 53:53

Vill du ändå se en gammal "Stå-upp"-vlogg med Mats & Mikael, inspelad under en tidigare kursomgång?

Veckans artiklar

Veckans teori finns samlad i tre artiklar. Läs dem i ordning; varje artikel bygger på den föregående.

1. Progressiva webbapplikationer – SPA, olika sätt att bygga en app, vad som gör en webbapplikation progressiv och hur ett manifest gör den installerbar.

2. Service workers – vad en service worker är, var filen ska ligga i ett Vite-projekt, hur den registreras och varför en ny version inte tar över direkt.

3. Offline med Cache API – network first och cache first, Vites filnamn med hash, att städa gamla cachar och att testa offline.

Läsanvisningar

Under läsanvisningar hittar du veckans kapitel som ska läsas i kurslitteraturen. Ett kort kapitel den här veckan.

Övningar

Ingen ny övningsuppgift den här veckan. Är du inte klar med förra veckans Memory är det väl använd tid: memoryspelet är en av underapplikationerna i B3, och exemplen i veckans artiklar bygger på det.

Utmaningar

Under Utmaningar hittar du sex frågor om progressiva webbapplikationer, ett bra sätt att stämma av att du har förstått artiklarna.

Äldre inspelningar

Inspelningarna från 2020 och 2021 går igenom samma stoff som artiklarna, men är delvis inaktuella. Bland annat nämns byggverktyget Snowpack i stället för Vite, service workerns väntetillstånd saknas och exemplen sparar även misslyckade svar i cachen. Artiklarna räcker, men vill du se genomgången i rörlig bild finns den kvar här. Sammanfattningar och presentationer till inspelningarna hittar du i samlingen av inspelningar för delkurs B.

2021-11-30 58:23

Webbapplikationer och introduktion till PWA: SPA, offline first, applikationstyper och PWA. Motsvarar den första artikeln.

2020-12-01 1:31:51

Installerbara PWAs: service workers, livscykel, CacheStorage och webbmanifest. Motsvarar den andra och tredje artikeln.

Handledning

Skicka gärna in frågor på förhand via formuläret som du når här:

• Frågor inför öppen handledning

Examinationsuppgift B3

Sista examinationsuppgiften i kursen! Den kan du påbörja när du vill. Läs mer om examinationsuppgift B3.

Studiefrågor

Här är ett antal frågor som du kan försöka besvara och diskutera tillsammans med din AI-assistent. Tveka inte att lyfta någon av frågorna till handledningen för att fortsätta diskussionen med lärare och studiekamrater.

1. Vad är en SPA, och vad händer med applikationens tillstånd när sidan laddas om?
2. Vad skiljer en PWA från en native app, en plattformsoberoende app och ett Electron-program?
3. Vad innebär “offline first”?
4. Vad betyder progressiv i progressiv webbapplikation?
5. Visa ett exempel på ett manifest. Vad krävs för att Chrome ska erbjuda installation?
6. Vad är en service worker, och varför ska filen ligga i public/ i ett Vite-projekt?
7. Varför tar inte en ny version av service workern över när du laddar om sidan?
8. Hur använder du Cache API i en service worker, och när passar network first respektive cache first?

Här är en utskrift från hur det såg ut när jag diskuterade ett par av frågorna med min AI-assistent Ajj.

Tips

Här följer tips till hur du kan prioritera bland kursmaterialet för att komma igång med veckan.

1. Läs artiklarna, och prova gärna att göra ditt memoryspel installerbart och offlineredo. Det tar inte lång tid, och du har gjort det mesta av PWA-delen i B3 när du flyttar över det.
2. Läs igenom kraven till B3 och börja fundera på hur du ska strukturera din kod. Kanske är det dags att bygga en prototyp av fönsterhanteringen?
3. Service workern kan vänta till sist i B3. Den gör ingen nytta förrän applikationen fungerar, och registrerar du den bara i bygget, som i artikeln, är den avstängd under npm run dev.