Innehåll
- Uppstigningen av PWA
- PWA i aktion idag
- Installation
- Offline och omedelbar lansering
- Första klassens upplevelse
- App-butiker
- Plattformsintegration
- Design och UX utmaningar
- Året för PWA
Precis som lyhörd webbdesign stängde klyftan mellan stationära och mobila webbplatser för några år sedan, stänger progressiva tekniker för webbapp för närvarande klyftan mellan webben och appvärlden. Med användarupplevelser från stationära till mobila appar som snabbt konvergerar verkar det som om ett mycket snyggare och mer effektivt internet utvecklas - även om det oundvikligen inte är utan några betydande förändringar av dess underliggande genetiska kod.
- Hur man bygger en progressiv webbapp
Uppenbarligen finns det några betydande selektiva tryck som driver detta. Först och främst är det inte nödvändigtvis en effektiv resursanvändning att skapa inbyggda appar för varje nisch: användare får hundratals stora appar som slösar bort bandbredd och värdefullt diskutrymme och företag spenderar mycket pengar på att skapa appar bara för att de ska överges. efter deras första versioner. Och de flesta av dessa appar drivs bara av webbinnehåll: information som kommer från webbtjänster eller ett innehållshanteringssystem.
Definitionen av en progressiv webbapp är inte konkret. En PWA är bara en webbapp som använder flera nya API: er och förmågor på webbplattformen med progressiv förbättring för att erbjuda en appliknande upplevelse på varje plattform med samma kodbas. Det är mer en uppsättning bästa metoder och API-användning som skapar en utmärkt appliknande upplevelse för dina användare, så det är inte som om du har eller inte har en PWA; det är mer som din webbplats är mer eller mindre PWA.
Vill du börja bygga en ny webbplats? Försök använda en webbplatsbyggare. Och se till att du får det stöd du behöver från en anständig webbhotell också. Eller för något något annorlunda, se vår guide till bästa molnlagring.
Uppstigningen av PWA
Medan namnet PWA myntades 2015 i artikeln Escaping Tabs Without Losing our Soul av Alex Russell som arbetade på Google för Chrome-teamet, började deras resa faktiskt inte där. Vi brukade ha HTML-applikationer (HTA), som skapades av Microsoft 1999, tillsammans med många andra webbappsplattformar från Nokia, BlackBerry och andra företag. Sedan 2007 presenterade Steve Jobs vad som då var det enda sättet att skapa appar för den ursprungliga iPhone: PWA, om än med ett annat namn. Chrome startade därifrån, förbättrade API: er några år senare och uppfann PWA-namnet.
Med så många tidigare misslyckade upplevelser som försökte ta med webbinnehåll till apparvärlden, varför tror vi att det fungerar nu? Först och främst beror det på de företag som nu arbetar och marknadsför tekniken bakom PWA, som Microsoft, Google, Apple och Mozilla, för att bara nämna några. Dessutom nådde webbplattformens prestanda en punkt där det inte upplevs någon skillnad när du jämför en väldesignad PWA med en inbyggd app. Dessa förhållanden har aldrig funnits tidigare och det är en anledning till att webbgemenskapen har bestämt att tiden är inne för PWA.
PWA i aktion idag
Idag är PWA: er fullt funktionella och installerbara på:
- Android med de flesta webbläsare, med Chrome som ger den bästa upplevelsen
- iOS med Safari
- Chromebooks
- Windows 10 från Microsoft Store
- Funktionstelefoner med KaiOS - en gaffel från Firefox OS - för närvarande tillgänglig för miljoner användare, främst i Indien
Support kommer också till macOS, Windows och Linux via Chrome senare i år. Det finns idag som en experimentell flagga 'Desktop PWA' om du vill prova det nu. Installation på Windows on Edge utan användning av butiken kommer också senare, även om ingen specifik tidsram definieras.
Om du läser om listan kan du se att varje plattform har eller är på väg att ha stöd för fullt installerbara PWA under de följande månaderna. Och eftersom en PWA bara är en webbplats med funktioner på toppen som endast aktiveras i kompatibla webbläsare, kan vi till och med säga att den är kompatibel med alla webbläsare från dess grundläggande funktionalitet.
Dessutom genereras för närvarande PWA från de flesta av CLI: erna för olika ramar, inklusive Angular 6+ CLI, React Create App, PWA Starter Kit från Polymer och Preact CLI. Slutligen kom Ionic Framework-teamet fram till idén om Capacitor, en öppen källkodsbyte som möjliggör inbyggda PWA i varje appbutik.
Installation
En av de kritiska aspekterna av en PWA är installationen av appen. Denna process görs i två valfria steg: nedladdning och offlinelagring av appens filer och ikoninstallationen i operativsystemet. Eftersom båda stegen är valfria kan du erbjuda en offlineupplevelse i webbläsaren eller så kan du erbjuda en ikon utan offlineinstallation. Men en riktig PWA bör innehålla båda: den måste serveras med TLS under HTTPS och användaren bestämmer om de ska använda den i webbläsaren eller inom sin egen installerade ikon.
Offline och omedelbar lansering
Hjärnan i en PWA är tjänstearbetaren, en JavaScript-fil installerad på användarens enhet som ansvarar för att ladda ner appens filer, lagra dem i en cache och senare servera dem vid behov. När tjänstearbetaren är installerad fungerar den som en nätverksproxy för varje resurs som webbappen behöver: den kan välja att hämta den från nätverket eller leverera den från den lokala cachen, vilket gör appen tillgänglig offline och också tillgänglig på bara ett par millisekunder, även om användaren har anslutning, emulerar en inbyggd applansering.
För att installera en servicearbetare måste ditt HTML-dokument innehålla något som:
if (’serviceWorker’ in navigator) navigator.serviceWorker.register ("sw.js");
Det installerar filen "sw.js" på användarnas enheter för den aktuella mappen i den aktuella domänen - ett koncept som kallas omfattningen. När den har installerats hanteras nästa besök på vilken URL som helst inom dess räckvidd av den servicearbetaren.
Låt oss säga att vi har en PWA med fyra filer: index.html, app.js, app.css och logo.png. Det första är att installera dessa filer i cachen i sw.js-filen.
const resources = ["index.html", "app.js", "app.css", "logo.png"]; själv. addEventListener ("install", event => {event. waitUntil (caches.open ("myPWAcache"). därefter (cache => cache.addAll (resurser)));});
För att PWA alltid ska serveras från cacheminnet måste vi lyssna efter hämtningshändelsen inom servicearbetaren och bestämma cachepolicyn som ska användas, till exempel cache först med följande utdrag.
self.addEventListener ("hämta", e => e.respondWith (caches.match (e.request). sedan (res => res);
I det här fallet, varje gång användaren kommer åt PWA (både från en webbläsare eller från en installerad ikon), kommer motorn att hämta filerna från cachen. En fördel med PWA jämfört med inbyggda appar är att enheter inte behöver ladda ner alla filer igen när det finns en förändring, bara filen som har förändrats med en transparent process. Vi kan också fortfarande ladda ner delar av appen på begäran.
Men utmaningen är hur vet du vilka filer som uppdaterades på servern så att du kan ersätta dem i cachen? Om du inte vill skriva en tjänst på låg nivå för att hantera detta kan du använda open source-biblioteket Workbox, vilket hjälper dig med genereringen av servicearbetaren och resursmanifestet för att uppdatera det installerade paketet.
Tänk på att filerna i din PWA kommer att raderas om det finns lagringstryck på enheten, såvida du inte begär bestående lagring om det finns:
om ('lagring' i navigator && 'kvarstår' i navigator.storage) navigator.storage.persist ();
I Chrome och de flesta Android-webbläsare kan din app inte använda mer än fem procent av det tillgängliga utrymmet. på iOS är det bara 50 MB (nära 50 MB) per värd; i Edge varierar det beroende på den totala minnesstorleken och i Windows Store är det obegränsat.
Första klassens upplevelse
Vi har hjärnan och nu är det dags för hjärtat: webbappens manifest. Syftet med att förvandla en webbplats till en PWA är inte bara att säkerställa att den är tillgänglig snabbt eller offline men också att göra det möjligt för den att ha sin egen ikon i operativsystemet och erbjuda en helt fristående upplevelse som alla andra installerade appar.
Manifestet är en JSON-fil som definierar metadata för PWA som används av en webbläsare eller en appbutik för att definiera installationsbeteendet.
Filen definierar flera egenskaper som metadata för din PWA. Varje operativsystem läser dessa egenskaper och gör sitt bästa för att matcha den upplevelse du föredrar. Till exempel kommer Android att läsa 'display: standalone' och skapa en normal appupplevelse. Med 'display: minimal-ui' skapas en upplevelse med en synlig URL och TLS-certifikat - användbart för säkerhetskänsliga appar. Med 'display: fullscreen' skapas helt uppslukande appar utan statusfält eller synlig bakåtknapp. En uppsättning ikoner och färger definierar hur stänkskärmarna eller titelraderna ser ut för appens fönster.
Det finns några manifestgeneratorer, till exempel Web App Manifest Generator eller PWA Builder som också kommer att ändra storlek på ikonen för dig i olika upplösningar om du ger en högupplöst (minst 512 pixlar).
När du har manifestfilen länkad i ditt HTML-dokument kan användare installera appen med olika tekniker beroende på webbläsaren, vanligtvis kallad Lägg till på startskärmen, Installera eller bara Lägg till. Om din PWA kan genomsökas av Bing kommer Microsoft automatiskt att lägga till den i Microsoft Store så att Windows 10-användare kan installera den därifrån.
På vissa operativsystem har din PWA möjlighet att fånga länkar. Detta innebär att efter att användaren har installerat appen kommer alla webbadresser inom ramen för ditt manifest att öppnas inom appens gränser och inte i webbläsaren, oavsett om den visas i webbläsaren eller andra appar som WhatsApp, Facebook eller ett e-postmeddelande.
Om du uppfyller PWA-kraven som vi definierar här, erbjuder vissa plattformar omgivande märkning (en liten ikon vanligtvis i URL-fältet som anger att webben kan installeras) eller en webbappbanner. Om du föredrar kan du också lägga till din egen anpassade installationsknapp med följande utdrag:
window.addEventListener ("beforeinstallpr ompt", funktion (e) {e.prompt (); // visar installationens ursprungliga prompt))
Om PWA är installerat kommer händelsen ”installerad” att avfyras på fönsterobjektet så att du kan spåra statistik som lyssnar efter det.
App-butiker
En av de största fördelarna med att installera från en webbläsare är att kunna undvika godkännandeprocessen för app-butiken eller att behöva betala för att vara en utgivare. Det kommer med uppenbara fördelar, som omedelbar publicering, skapande av privata appar för företag eller appar som inte bör accepteras i butikerna.
Men vissa företag vill vara i butiken. Från och med idag är de enda butikerna som officiellt accepterar PWA Windows Store och kaiOS Store. Lyckligtvis kan vi med verktyg som kondensator (för närvarande i Alpha) eller PWA Builder skapa och underteckna inbyggda paket för andra plattformar.
Det finns några PWA som redan har publicerats i Google Play Store, som Twitter Lite och Google Maps Go, för närvarande under anpassade implementeringar. Chrome kommer att erbjuda en lösning från Chrome 68 via betrodda webbaktiviteter. Från den tiden kommer vi att kunna skapa ett Android-paket (APK) med en launcher till vår PWA och ladda upp den till butiken. För Microsoft Store på Windows 10 hjälper webbplatsen PWA Builder för närvarande med genereringen av ett APPX Windows 10-paket. Med hjälp av en webbvy kan du kanske skapa en iOS-app manuellt för App Store men var extremt försiktig med butikens regler.
Plattformsintegration
Genom att implementera progressiva förbättringstekniker kan du använda många funktioner, inklusive push-meddelanden, kamera- och mikrofonåtkomst, geolokalisering, sensorer, betalningar, delningsdialogrutor och offlinelagring. Alla dessa funktioner körs direkt i webbläsarens säkerhetsmodell, inklusive behörighetsdialoger.
Vi kan också kommunicera med andra appar via URI-scheman, som att öppna Twitter, YouTube eller WhatsApp via deras webbadresser eller anpassade URI, till exempel whatsapp: //.
Slutligen, när vi skapar inbyggda PWA som publiceras i butiken med hjälp av kondensator eller till Microsoft Store, kommer vi att kunna överbrygga till inbyggda API: er som gör det möjligt för oss att utföra praktiskt taget vilken native-kod som helst. Den integrationen med Windows 10 inkluderar maskinvaruåtkomst men också integration med operativsystemet, som erbjuder alternativ som Pin to Start. Till exempel låter Twitter PWA dig fästa valfri användare till din startskärm.
Design och UX utmaningar
Att designa PWA har unika utmaningar, så det är viktigt att ägna lite tid åt att undersöka, testa så mycket som möjligt och överväga följande:
- Användare förväntar sig appliknande upplevelser.
- Installationsprocessen är fortfarande ny, så vi måste göra extra ansträngningar för att förklara hur appen installeras.
- Att uppdatera appen i bakgrunden utan användarinteraktion är bra men det lägger också till några utmaningar för UX.
- På skrivbordet tar responsiv webbdesign en ny gräns eftersom PWA-fönster kan vara små, mycket mindre än en mobil visningsport. Det betyder att vi måste skapa specifika vyer eller små widgets för det här formatet, vilket ses i Chrome OS idag.
- Push-aviseringar bör bara tillföra värde för användaren, så lär dig att fråga i rätt ögonblick och slösa inte bort möjligheten att skicka meddelanden som inte är användbara eller intressanta.
- Vi måste utforma för webbprestanda och för offlineåtkomst.
Året för PWA
Med tillägg av iOS och desktop i år finns PWA överallt idag. Men vi måste komma ihåg att deras resa precis har börjat, så förvänta dig täta förändringar och se till att hålla dig uppdaterad med de senaste teknikerna och idéerna för att leverera en utmärkt användarupplevelse medan plattformen utvecklas.
Denna artikel publicerades ursprungligen i nummer 308 av netto, världens bästsäljande tidning för webbdesigners och utvecklare. Köp nummer 308 här eller prenumerera här.
