Intro till Accelerated Mobile Pages (AMP) och Progressive Web Apps (PWA)

HTML-kod

Google har lösningen på problemet med långsamma webbplatser (särskilt inom media), dessutom har de en mer webbig lösning på intresset för appar. Shut up and take my money! Eller?Problemen med AMP (Accelerated Mobile Pages)

”Make no mistake. AMP is about lock-in for Google. AMP is meant to keep publishers tied to Google. ”
Kyle Schreiber via Daring Fireball

De jag talat med som är experter inom gränssnittsprogrammering fnyser när jag nämnt AMP. De vill instinktivt och å det bestämdaste hävda att man kan bygga snabba, rent utav accelererade, webbplatser även för mobiler genom den reguljära och öppna webbstandarden. Jag är beredd att hålla med.

Och om inte den anekdoten imponerar så har webbkändisar som Ethan Marcotte [2] (han bakom responsiv webbdesign), Jeremy Keith och Adrian Roselli varnat för konsekvenserna. AMP är ett projekt som Google försöker få att verka öppet, men av en händelse råkar det gynna Googles position som den monopolist de varit sedan några år.

“the only voices promoting AMP’s performance benefits are coming from inside Google. Most companies I’ve spoken with don’t consider “happier users” or “faster pages” the business case for AMP. (In fact, some have found that AMP pages perform worse than their own websites.) Rather, those companies use AMP to ensure their articles appear in the carousel near the top of Google’s search results, a carousel that only displays content published with AMP’s proprietary format—which then, in turn, drives more traffic to publishers’ content.”
Ethan Marcotte (min fetning)

Så varför har AMP dykt upp?

Det är på sätt och vis ganska talande när Smashing Magazine väljer att i rubriken påtala att AMP tillhör Google – ”Everything You Need To Know About Google’s Accelerated Mobile Pages”. För övrigt en utmärkt skrivelse de flesta bör läsa.

Om man inte är konspiratorisk så finns det ett stort problem med hur etablerade mediers affärsmodell på nätet (inte) fungerar. Dagens annonsörer kräver data om läsarna, ju mer data desto bättre. Därför finns det massor med kodsnuttar på dessa webbplatser som lämnar över data om användarna till annonsörer och andra samarbetspartners. Dessa kodsnuttar och att man fyller allt ledigt utrymme med annonser gör att många av webbplatserna är långsamma. Det är ett problem för användarna då det ger en undermålig upplevelse. Det råkar också vara ett problem för Google när de ständigt kontrollerar alla webbplatser efter nytt eller uppdaterat innehåll. För Google blir det dyrare att indexera långsamma webbplatser, därför har de internt ett incitament att webbplatser är snabba.

Enklare vore att knyta medierna tätare till sig, och det är precis vad man gör med AMP.

Att använda AMP ger i teorin vissa fördelar. Dels är det ett sätt att inte vara så slösaktig när man designar sin webbplats, men samtidigt kan man enklare nå ut via Google.

För Google är detta komplett bingo. De utökar sin övervakning av hur webben används genom att ha koll på AMP-webbplatser, webben blir snabbare att indexera och samtidigt stärker de sitt grepp om alla som desperat försöker nå ut via deras sök.

Dock finns det också bevis för att AMP ger en sämre upplevelse, exempelvis i ehandeln. Se länkarna i slutet av bloggposten.

Vad är det för fel på Progressive Web Apps/AMPs då?!

Progressive Web Apps (PWA, vilket ibland uttyds Progressive Web AMPs) är en samling tekniker som allt oftare paketeras tillsammans med AMP.

Poängen är att skapa en mer appliknande och modern upplevelse via webben och på så sätt nå alla stora mobilsystem med ett och samma system. Den som är bekant med begrepp inom webbdesign skulle säkert tycka att detta “bara” är nästa steg efter Adaptive Web Design, det vill säga att göra mesta möjliga av respektive användares session. Vill man dra det till sin extrem är det egentligen en naturlig fortsättning på Progressive Enhancements.

PWA har ett antal komponenter, nämligen:

  • Offline-stöd
  • Mobile first för användarens gränssnitt
  • Snabb, rent utav omedelbar
  • Går att installera på en mobils hemskärm
  • Push-notifieringar

Ett minimum för att en webbplats ska ses som PWA är tre kriterier, nämligen:

  1. Måste köra på HTTPS. Då kan webbplatsen dra nytta av större åtkomst till prylens resurser.
  2. Ett webbmanifest behövs. Det är en JSON-fil som ger lite metadata om webbplatsen, dock är det viktigt att länka till den från sin HTML-kod.
  3. Du behöver en Service Worker. Det är denna del som är själva appen, att det finns en liten process som jobbar med din webbplats i användarens pryl.

Problemet med PWA är att gränsen mellan den öppna och standardiserade webben och de av IT-giganter kontrollerade appbutikerna börjar smälta samman. Webbens styrka i att vara öppen och oberoende monteras ner lite grand varje dag. Så för all del, använd PWA, men se till att göra det med eftertanke. Exempelvis genom att låta bli att använda AMP eller andra pseudoöppna lösningar.

Offline first

Något alla borde titta på som ingår i PWA är att stödja svajig internetuppkoppling, något som skrivits om tidigare, så kallad offline first. Så här har SVT löst det när man tappar uppkopplingen:

SVT Play visar att uppkopplingen försvunnit, med tekniken Progressive Web App

Lästips: Ännu mer om PWA och AMP