AJ 1.3 Progressive Web Apps
Table of contents
PWA - Progressive Web App
En PWA är en uppsättning av best practices för att få en webapp att fungera som en nativ mobil- eller desktop-app. Målsättningen är att använda sidan som om det vore en “riktig” app, och få funktionalitet (och andra fördelar) som inte är tillgängliga annars. Termen PWA är relativt ny. En progressiv webbapp är alltså en webbsida som använder teknik för att leverera app-liknande upplevelser på webben.
I begreppet PWA ingår flera tekniker och strukturer, som gås igenom lite mer ingående nedan.
Fördelar med PWA
En vanlig webbsida kan ha begränsningar, och det kan finnas problem som sätter käppar i hjulet.
- Långsam internethastighet
- Om initial load går för segt så stannar inte folk på sidan
- Folk orkar inte installera nativa appar
Långsam internet hastighet
Internethastighet är ett stort problem, speciellt utanför Norden. Även i Europa har många längder väldigt mycket långsammare internet än vi har här uppe.
| Nedladdningshastighet ► Aktivitet ▼ | 4G | 3G | 2G |
|---|---|---|---|
| Besöka en typisk vanlig hemsida | 0.1 sekunder | 0.2 sekunder | 8 sekunder |
| Skicka ett mail utan bifogade filer | <0.1 sekunder | <0.1 sekunder | 0.8 sekunder |
| Ladda ned ett fotografi med hög upplösning | 1 sekund | 4 sekunder | 3 minuter |
| Ladda ned musik (.mp3) | 3 sekunder | 10 sekunder | 7 minuter |
| Ladda ned en applikation | 3 sekunder | 12 sekunder | 8 minuter |
I snitt väntar hälften av användarna 3 sekunder innan de lämnar en sida, om ingenting visas på den.
Väldigt få användare orkar installerar nativa appar (trots pop-ups och annat på sidor).
Fördelar för användaren
- Snabb
- Tiden till första interaktionen på sidan är snabb
- Pga cache så är den ännu snabbare nästa gång vi öppnar den (även utan internet)
- Integrerad
- Känns som och ser ut som en native app
- Beter sig som en native app på ens hemskärm
- Kan skicka push-notiser (och har andra nativa funktioner)
- Pålitlig
- Tack vare service workers kan vi rendera saker även om internetuppkopplingen avbrutits
Fördelar för utvecklaren
- Standarder
- Baserat på standarder och inte av specifik leverantör (även om Google är drivande, men övriga hänger på)
- Kontroll
- Utvecklaren har kontroll över uppdateringar etc
- Expertis
- Räcker att kunna webbutveckling
- Behöver inte kunna några plattformsspecifika språk
Att göra en progressiv webbapp
För att en webb app räknas som PWA så bör den följa vissa principer. 1
- Upptäckbar
- Vara lättare att hitta i sökmotorer
- Installerbar
- Ska gå att installera som en native app (med icon) på hemskärmen
- Länkbar
- Gå att öppna i webbläsaren via en URL som en vanlig webbsida
- Oberoende av internetuppkoppling
- Fungera när internet är opålitligt eller ligger nere
- Responsiv
- Använda viewport och media queries för att den ska fungera i alla typer av enheter och storlek på skärmar
- Progressiv
- Fungera oavsett vilken enhet eller operativsystem användaren har
- Säker
- Säker plattform via HTTPS
För att uppnå detta så använder vi olika verktyg. 2
- Ett webb manifest med korrekt ifyllda fält
- Service worker
- Ikon för hemskärmen
- Serva sidan via säker domän (HTTPS)
Webb manifest
Manifestet är en fil som listar all information om sidan i JSON-format. Den sparas i rooten av projektet och länkas in i head. 2
<link rel="manifest" href="pwa.webmanifest">
Manifestet innehåller info om t.ex beskrivning av appen, namn, språk, ikon, protocol-handlers, start-URL etc (mer går att läsa på de här länkarna).
Service worker
En service worker är ett script som ligger mellan din app och nätverket. Den kan fånga upp och hantera alla nätverksförfrågningar, och se till att de fungerar även med dåligt internet eller ibland till och med offline.
När användaren laddar in sidan första gången, så lägger service workern alla resources i sitt cache. När så sidan laddas in en andra gång (och tredje och fjärde etc) så hämtas datan från service workern istället för från nätverket, och det går väldigt mycket fortare.
Andra grejer service workers kan användas till. 3
- Synkronisera data i bakgrunden
- Svara på resource-requests från andra källor
- Få centraliserade uppdateringar av data som är dyr att beräkna, t.ex. geolokalisering eller gyroskop, så att flera sidor kan använda sig av samma data
- Kompilering på klientsidan och hantering av dependencies
- Hooks för bakgrundstjänster
- Anpassad templating baserad på vissa URLs
- Prestandaförbättringar, t.ex. pre-fetchning av resurser som användaren sannolikt kommer att behöva inom en snar framtid (som nästkommande bilder i ett fotoalbum)
Create React App (CRA)
Förut var service workers alltid med i CRA, men nu måste de väljas till (pga en del problem som PWA har ibland). 4
$ npx create-react-app my-app --template cra-template-pwa
Exempel på aktivering av service workern
import ∗ as serviceWorker from './serviceWorker';
serviceWorker.unregister();
serviceWorker.register();
Lighthouse
Vi kan kolla att en app håller standarden för PWA, genom att använda oss av Lighthouse i Chrome dev-tools. Vi kan då få en rapport på om sidan/appen uppfyller alla krav för att vara PWA. 5