Översikt

Förra veckan blev applikationen installerbar och fungerade offline. Den här veckan gör du den snabbare och mer pålitlig. Veckans artiklar går igenom hur en SPA håller URL:en i takt med det som visas, hur du laddar kod först när den behövs, vilket krävs för högre betyg på B3, och hur applikationen beter sig när nätverket finns men inte fungerar. Information om veckans upplägg annonseras löpande i kursens Zulip-kanal.

2023-12-11 38:35

Vill du ändå se en gammal "Stå-upp"-vlogg med Johan & Mats, 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. Routing i en SPA – URL och URLSearchParams, pushState() och bakåtknappen, query string, hash eller sökväg, och vad routing betyder för service workern. Routing är inget krav i B3.

2. Lazy loading – loading="lazy" för bilder, dynamisk import() i ett Vite-projekt, custom elements som definieras sent och vad som fungerar offline.

3. Online, offline och Lie-Fi – vad navigator.onLine inte säger, timeouts med AbortSignal.timeout(), network first med timeout och att återansluta en WebSocket.

Läsanvisningar

Under läsanvisningar hittar du veckans kapitel som ska läsas i kurslitteraturen. Planera upp och dela upp läsningen under veckan.

Övningar

Ingen ny övningsuppgift den här veckan. Exemplen i artiklarna bygger vidare på Memory från kursvecka 14, och det går bra att prova dem där.

Utmaningar

Under Utmaningar hittar du sex frågor om routing, lazy loading och opålitliga nätverk, 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, loading="lazy" beskrivs som experimentellt och exemplet med import() använder en sökväg som inte fungerar i ett Vite-projekt. 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.

2020-12-08 1:03:48

Pålitliga PWA:er: routing med window.location, pushState och popstate, online eller offline och klientsidebibliotek. Motsvarar den första och tredje artikeln.

2021-12-13 19:28

Lazy loading: strategier, bilder och dynamisk import av JavaScript-moduler. Motsvarar den andra 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

Inte kommit igång med uppgiften? Nu är det hög tid! 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 ska en URL i en SPA beskriva, och vad hör inte hemma där?
2. Vad gör history.pushState(), och när utlöses popstate?
3. Vad är skillnaden mellan att lägga det som visas i query stringen, i hashen och i sökvägen?
4. Vad innebär lazy loading, och när är det inte värt det?
5. Vad händer i webbläsaren från att import() anropas tills ett custom element har uppgraderats?
6. Varför kan inte navigator.onLine avgöra om applikationen når servern?
7. Vad är Lie-Fi, och hur kan en service worker skydda användaren mot det?

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. Börja koda B3, lös grunderna för fönsterhanteringen först, därefter lägger du till en applikation. Sedan är grunden på plats och du kan lägga till fler applikationer.
2. Lägg ett fönster överst med z-index, inte genom att flytta det i DOM:en. En flytt kör komponentens disconnectedCallback() och connectedCallback(), så det som startats i fönstret börjar om.
3. Siktar du på högre betyg, läs Lazy loading innan du kopplar ihop dockan med underapplikationerna. Det är enklare att ladda dem med import() från början än att bygga om senare.
4. Routing behövs inte i B3. Läs artikeln för att förstå hur History API fungerar, men lägg inte till routing i ditt PWD om du inte har ett tydligt skäl.