Översikt

Nu går du in i sista delen av kursen och den del som också är kopplad till den sista examinationsuppgiften. Nu ska du knyta ihop säcken genom att börja skriva progressiva webbapplikationer. 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?

Stödjande inspelningar

Webbapplikationer och introduktion till PWA

Video och presentation
Sammanfattning

2021-11-30 58:23

Presentation

Single Page Application

En Single Page Application (SPA) är en webbapplikation eller webbplats som ryms på en enda sida, med målet att ge en mer flytande användarupplevelse som liknar en skrivbordsapplikation – istället för att en helt ny sida laddas för varje interaktion.

Offline first

Ett tankesätt: sluta behandla avsaknad av uppkoppling som ett fel. En applikation bör kunna hantera avbrutna anslutningar och fortsätta fungera så smidigt som möjligt, snarare än att bara krascha eller visa en tom sida så fort nätverket försvinner.

Applikationstyper

Fyra huvudsakliga sätt att bygga en applikation för webb och mobil:

Responsiv webbsida – en vanlig webbplats som anpassar sig efter skärmstorlek.
Progressiv webbapplikation (PWA) – webbteknik som ändå kan installeras och fungera offline.
Hybridapp – skriven i JavaScript/HTML/CSS men kompilerad till native kod.
Native app – skriven direkt i plattformens eget språk.

Native apps

Native applikationer var där allt en gång började, skrivna i språk som Java, C++, Swift eller Kotlin – ett separat kodspråk och en separat kodbas för varje plattform (iOS, Android, Windows, macOS).

Hybrida mobilappar

Ramverk som React Native, Flutter och Xamarin låter en utvecklare skriva applikationen en gång (ofta i JavaScript, HTML och CSS) och sedan generera native kod för respektive plattform. Instagram, Facebook och Discord är exempel på appar byggda på det sättet. På desktop fyller Electron samma roll – det paketerar en webbapplikation (HTML/CSS/JS) till en fristående skrivbordsapplikation. Slack, Messenger, Twitch och VS Code är alla i grunden Electron-applikationer.

Progressiva webbapplikationer (PWA)

En PWA kräver en säker kontext (HTTPS, med localhost som undantag under utveckling) och gör tung användning av löften (promises). Det är snarare ett tankesätt och en kombination av tekniker än en enskild teknik i sig, och fältet är fortfarande relativt ungt – stödet skiljer sig åt mellan Android och iOS. Spotify är ett exempel på en känd tjänst med en PWA.

En PWA kännetecknas av flera egenskaper: progressiv, upptäckbar, länkbar, responsiv och säker, precis som en bra webbplats redan bör vara – men därutöver också:

Installerbar – med hjälp av Service Workers och en manifest.json.
Pålitlig – fungerar konsekvent tack vare routing/historik, offline-stöd och cachning.
Kapabel – kan använda samma kraftfulla webb-API:er som vilken annan webbapplikation som helst.

Jämförelse mellan applikationstyperna

	Responsiv webbsida	PWA	Hybridapp	Native app
Kodbas	En	En	En	Flera
Appbutik	Nej	Delvis	Ja	Ja
Prestanda	Ingen fördel	Viss fördel	Hög	Högst
API-åtkomst	Begränsad	Viss	Mycket	All
Snabba uppdateringar	Ja	Ja	Nej	Nej
Offline	Nej	Ja	Ja	Ja
Installerbar	Nej	Ja	Ja	Ja
Länkbar	Ja	Ja	Nej	Nej

En PWA landar med andra ord mitt emellan en vanlig responsiv webbsida och en hybrid-/native app – bättre prestanda och offline-stöd än en ren webbsida, men fortfarande en enda kodbas och samma snabba uppdateringscykel som webben normalt erbjuder.

2020-12-01 1:31:51

Presentation

Service Workers

En service worker är en programmerbar nätverksproxy som låter en applikation styra hur nätverksanrop från sidan hanteras. Den körs i ett eget, separat scope (ServiceWorkerGlobalScope, ofta refererat till som self) – skilt från både window (den vanliga sidan) och WorkerGlobalScope (en vanlig Web Worker) – och har inte tillgång till DOM:en eller Web Storage. Den kan däremot använda Cache API, Fetch API, IndexedDB, WebSockets och liknande.

Vad en service worker möjliggör: cachning av resurser, offline-stöd, push-notiser och klientsidig lastbalansering.

Krav

En service worker kräver HTTPS (localhost undantaget under utveckling), tillåter bara asynkrona anrop, kräver goda kunskaper i löften (promises), och behöver en modern webbläsare.

Livscykel

En service worker går igenom ett antal tillstånd: den installeras (installing), blir antingen activated eller hamnar i error, väntar sedan i idle tills den antingen tar emot en fetch/message-händelse eller termineras (terminated).

Registrera en service worker

En service worker registreras med ett scope som motsvarar var i filstrukturen den ligger placerad – för att få scope över hela sajten (./) måste filen ligga i webbplatsens rot (t.ex. public/):

if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      const registration = await navigator.serviceWorker.register('./serviceworker.js')
      console.log('ServiceWorker: Registration successful with scope: ', registration.scope)
    } catch (error) {
      console.log('ServiceWorker: Registration failed: ', error)
    }
  })
}

'serviceWorker' in navigator är en form av “feature detection” – kontrollerar att webbläsaren stöder service workers innan registrering ens försöks.

Serviceworkerns egna händelser

Själva service worker-filen lyssnar på ett antal händelser:

const version = '1.0.0'

self.addEventListener('install', event => {
  // TODO: Cache resources needed to start
})

self.addEventListener('activate', event => {
  // TODO: Clean up older versions of the cache
})

self.addEventListener('fetch', event => {
  // TODO: Cache new resources when online and serve cached content if offline
})

self.addEventListener('message', event => {
  // TODO: Handle events from the main application
})

self.addEventListener('push', event => {
  // TODO: Show a notification for the user
})

CacheStorage: cacha vid installation

CacheStorage-API:et lagrar par av Request- och Response-objekt. Ett vanligt mönster är att cacha de resurser som krävs för att appen ska starta redan när service workern installeras, och att medvetet vänta med event.waitUntil() tills det är klart:

self.addEventListener('install', event => {
  const cacheAssets = async () => {
    const cache = await self.caches.open(version)
    return cache.addAll(['index.html', 'css/styles.css'])
  }

  event.waitUntil(cacheAssets())
})

Cacha vid nätverksanrop

Ett annat mönster: försök hämta en resurs från nätverket och spara en kopia i cachen om det lyckas; misslyckas anropet (till exempel offline), returnera istället den cachade versionen:

const cachedFetch = async request => {
  try {
    const response = await fetch(request)
    const cache = await self.caches.open(version)
    cache.put(request, response.clone())  // svaret måste klonas eftersom det både returneras och cachas
    return response
  } catch (error) {
    return self.caches.match(request)
  }
}

self.addEventListener('fetch', event => {
  event.respondWith(cachedFetch(event.request))
})

Städa bort gamla cache-versioner

Vid activate-händelsen är det lämpligt att ta bort cachar från tidigare versioner av applikationen, så att gammalt cachat innehåll inte ligger kvar och tar plats:

self.addEventListener('activate', event => {
  const removeCachedAssets = async () => {
    const cacheKeys = await self.caches.keys()
    return Promise.all(
      cacheKeys.map(cache => {
        if (cache !== version) {
          return self.caches.delete(cache)
        }
        return undefined
      })
    )
  }

  event.waitUntil(removeCachedAssets())
})

Service workerns tillstånd, inklusive möjligheten att simulera offline-läge, går att inspektera under fliken “Application” → “Service Workers” i webbläsarens utvecklarverktyg.

Web Manifest

För att en PWA ska gå att installera som en fristående applikation krävs, utöver en registrerad service worker och HTTPS, en manifestfil (.webmanifest) med bland annat namn, ikoner och visningsläge:

{
  "name": "Memory game",
  "short_name": "Memory",
  "start_url": "./",
  "display": "standalone",
  "background_color": "#ffe001",
  "description": "A simple memory game!",
  "icons": [
    { "src": "images/homescreen48.png", "sizes": "48x48", "type": "image/png" },
    { "src": "images/homescreen192.png", "sizes": "192x192", "type": "image/png" }
  ]
}

Manifestfilen länkas in från HTML-dokumentet:

<link rel="manifest" href="/memory.webmanifest" />

display styr hur appen ser ut när den är installerad – bland annat fullscreen, standalone, minimal-ui eller browser. Manifestfilen och service worker-filen måste ligga i den mapp som byggverktyget publicerar oförändrad (till exempel public/), inte bearbetas som vanlig applikationskod.

Läsanvisningar

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

Handledning

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

Frågor inför handledning

Examinationsuppgift B3

Sista examinationsuppgiften i kursen! Denna kan du påbörja när helst 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.

Förklara kort vad SPA-begreppet innebär man man bygger webbapplikationer.
Vad innebär “Offline first”?
Vad innebär hybridappwebbapplikationer?
Finns det även för desktop applikationer?
Vad innebär konceptet PWA?
Förklara kort om Service Worker.
Visa exempel på en manifestfil.
Hur använder man CacheStorage tillsammans med PWA?

Här är en utskrift från hur det såg ut när jag diskuterade ovan frågor 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.

Titta igenom föreläsningarna då de ger teknikområden som är högst relevanta. Det hjälper dig att skapa förståelse för vilken typ av applikationer som en webbprogrammerare kan bygga.
Jobba vidare med förra veckans övningsuppgift Memory. Ett memory-spel är dessutom ett av kraven till B3 så det är ett sätt att komma igång med den examinationsuppgiften.
Läs igenom kraven till B3 och börja fundera på hur du skall strukturera din kod. Kanske är det dags att börja bygga en prototyp av din fönsterhantering?