Hur man bygger en progressiv webbapp

Sep 16, 2025
Hur

Mobile står nu för över hälften av webbens trafik, och webbapplikationer gör det möjligt för användare att göra saker i webbläsaren som rivaliserar inhemska appar, men det finns ett problem: Kvaliteten på anslutningar och enheter varierar massivt över hela världen.

Catering både till användare på Lightning-Snabba anslutningar i Seoul, och användare i landsbygden Indien på en föråldrad telefon, är den senaste användbarhetsutmaningen, och progressiva webbapps är lösningen.

PWAS använder progressiv förbättring för att ladda det viktigaste innehållet först och lägg sedan till presentations- och funktionella extras som krävs, vilket innebär att alla dina användare får samma kärnupplevelse så fort som möjligt. Om du vill nå den bredaste möjliga publiken, är Pwas vägen att gå.

  • 10 steg till en engagerande användarupplevelse

Även om progressiva webbapps ger många fördelar och funktionalitet till webben, behöver de inte omskriva hela din ansökan. Varje app kan omvandlas till en PWA genom att lägga till några extra lager till det.

För bästa resultat vill du lägga en stark betoning på prestanda från början - men det är sant för någon webbapp. Här går vi igenom stegen för att göra din app progressiv.

Om du vill bygga en jämn löpande webbplats, se till att du är webbhotell är plats på och använd ett anständigt Website Builder .

01. Servera över https

Låt oss vara ärliga: du borde göra det ändå. SSL lägger till ett extra lager av säkerhet till webben, vilket hjälper dina användare att känna sig säkra på att använda din webbplats. Med PWAS är HTTPS avgörande för att använda servicearbetare och tillåta installation av startskärm. Du kan köpa ett SSL-certifikat från din domänregistrator på Little Expense och sedan konfigurera det via din webbhotell.

02. Skapa ett programskal

Ditt App Shell är det första som laddar - det första som användaren ser. Det bör existera helt i ditt index HTML-dokument, med inline CSS, för att säkerställa att det visas så snabbt som möjligt och din användare stirrar inte på en vit skärm längre än nödvändigt. Applikationsskalet utgör en del av mönstret för progressiv förbättring. Din app ska ge användarinnehållet så snart som möjligt och sedan gradvis förbättra det som mer data (sannolikt javascript) belastning.

Exemplet nedan är taget från en reaktion.js-applikation. Användaren presenteras med en skiss av appen och en laddningsindikator i index.html. Sedan, när JavaScript laddar och reagerar stövlar upp, görs full applikation i skalet. 

 & lt;! - index.html - & gt;
& lt; kropp & gt;
& lt; div id = "root" & gt;
  & lt; div id = "container" & gt;
  & lt; div klass = "innerbehållare" & gt;
  & lt; div id = "header" & gt;
  & lt; img src = "/ tillgångar / icon.png" alt = "logo" / & gt;
  & lt; h1 & gt; chat & lt; / h1 & gt;
  & lt; / div & gt;
  & lt; div ID = "Laddarbehållare" & GT;
  & lt; img src = "/ tillgångar / icon.png" alt = "logo" id = "loader" / & gt;
  & lt; / div & gt;
  & lt; / div & gt;
  & lt; / div & gt;
  & lt; / div & gt;
& LT; / Body & GT;
// index.js
Reactdom.Render (
& lt; app / & gt ;,
document.getElementByid ('root')
);

03. Registrera en tjänsteman

Att knacka in i det fulla spektrumet av PWA-godisar (tryckmeddelanden, caching, installera uppmaningar) du behöver en servicemästare.

Lyckligtvis är de ganska lätta att sätta upp. Nedan kontrollerar vi först om användarens webbläsare stöder servicearbetare. Sedan, om så är fallet, kan vi gå vidare med att registrera servicearbetarfilen, här ringde service-arbetare.js . Observera att du inte behöver något speciellt inuti den filen vid denna tidpunkt - det kan vara tomt.

I exemplet nedan visar vi dock hur man trycker på de tre tangentjänstemänens livscykelhändelser. Dessa är "installera", när användaren först besöker din sida; "Aktivera", strax innan registreringen är klar. och "hämta", när ansökan gör en nätverksförfrågan. Den sista är relevant för caching och offline kapacitet. 

& lt; script & gt;
  Om ("Serviceworker" i Navigator) {
  fönster.Addeventlistener ('load', funktion () {
  navigator.serviceworker.register ('service -arbetare.js'). Då (funktion (registrering) {
  // Registreringen lyckades
  Console.log ('Registered!');
  }, funktion (fel) {
  // registreringen misslyckades :(
  Console.log ("Serviceworker-registrering misslyckades:", fel);
  }). Fånga (funktion (Err) {
  Console.log (err);
  });
  });
  } annars {
  Console.log ("Servicearbetare stöds inte");
  }
  & lt; / script & gt;
// service-arbetare.js
self.addeventlistener ("installera", funktion () {
  Console.log ("Installera!");
});
self.addeventlistener ("aktivera", händelse = & gt; {
  Console.log ('Aktivera!');
});
self.addeventlistener ('hämta', funktion (händelse) {
  Console.log ('hämta!', evenemang.request);
});

04. Lägg till tryckmeddelanden

Servicearbetare gör det möjligt för dina användare att få push-meddelanden via webben. För att komma åt det kan du trycka på self.registration.pushmanager från din tjänstesignal. Eftersom sändningen av push-meddelanden är starkt beroende av din backend-inställning, kommer vi inte att dyka in i det här.

Om du börjar en app från början, kommer Googles Firebase-tjänst med Firebase Cloud Messaging för relativt smärtfria tryckmeddelanden (kom ihåg: Se till att du håller dina designfiler säkra i molnlagring) . Koden nedan visar hur man registrerar för push-meddelanden via push API. 

 Navigator.Serviceworker.Ready.then (Funktion (Registrering) {
  om (! registrering.pushmanager) {
    varning ("No push notifications support. ');
    returnera false;
  }
  // För att prenumerera `push Notification` från Push Manager
  registrering.pushmanager.subscribe ({
  UseserveribleOly: True // Visa alltid anmälan när den mottas
  })
  .Then (funktion (prenumeration) {
  Console.log ('prenumererar.');
  })
  .Catch (funktion (fel) {
  Console.log ('Prenumerationsfel:', felet);
  });
})

05. Lägg till en webbapp manifest

För att göra din ansökan installerbar måste du inkludera en manifest.json i programmets rotkatalog. Du kan tänka på detta som en beskrivning av din ansökan, som liknar vad du kan skicka till App Store. Det innehåller ikoner, en stänkskärm, ett namn och en beskrivning.

Det finns också en konfiguration för hur din ansökan visas när den lanseras från användarens startskärm: Vill du visa adressfältet i webbläsaren eller inte? Vilken färg vill du att statusfältet ska vara? Och så vidare. Observera att en riktig manifest.json bör innehålla ett komplett spektrum av ikonstorlekar för olika enheter. Koden nedan är en förhandsgranskning av några av de egenskaper som din manifest kan inkludera. 

 {
  "Short_Name": "Chat",
  "Namn": "Chat",
  "Ikoner": [
  {
  "src": "/ tillgångar / icon.png",
  "Storlekar": "192x192",
  "Typ": "Bild / PNG"
  }
  ]
  "start_url": "/? utm_source = homescreen",
  "Background_color": "# E05A47",
  "Theme_Color": "# E05A47",
  "Display": "fristående"
}

06. Konfigurera installationsprompten

När en användare besöker en PWA med en servicearbetare och manifest, kommer Chrome automatiskt att uppmana dem att installera den till sin hemskärm, med tanke på följande: Användaren måste besöka webbplatsen två gånger, med fem minuter mellan besök.

Tanken är att vänta tills användaren visar intresse för din ansökan, och sedan be dem att göra det till en armatur av sin enhet (det här är i skarp kontrast till den inhemska appen.

Men det kan finnas fall där du vill visa installationen i olika situationer, till exempel efter att användaren har en viss användbar åtgärd. Att göra det, avlyssnar vi föreinstallprompt händelse och spara det för senare, använd sedan prompten när vi passar. 

 Window.Addeventlistener ('Preceinstallprompt', e = & gt; {
  konsole.log ('föreinstallprompt evenemang avfyrade');
  E.PreventDefault ();
  // Stash händelsen så det kan utlösas senare.
  this.defferredprompt = e;
  returnera false;
  });
// När du vill utlösa prompten:
this.defferredprompt.prompt ();
  this.DePreditPrompt.userchoice.then (val = & gt; {
  konsol.log (val);
  });
this.deprerredprompt = null;

07. Analysera din apps prestanda

Prestanda är Pwas hjärta och själ. Din app ska vara snabb för användare på alla nätverksförhållanden. Caching och offline-kapacitet hjälper mycket, men i slutet av dagen ska din ansökan vara snabbare även om användaren inte har webbläsaren att stödja servicearbetare. Detta är definitionen av progressiv förbättring - ger en stor upplevelse för alla, oavsett modernitet eller nätverksvillkor.

För att göra det är en användbar uppsättning mätvärden järnvägssystemet. Rail är vad Google kallar en "användarcentrerad prestationsmodell" - en uppsättning riktlinjer för att mäta vår apps prestanda.

Akronym står för svar (hur lång tid det tar för din app att svara på användaråtgärder), animering (hålla animationshastighet vid 60fps), tomgång (med tid när din app inte gör något annat för att ladda och cache tilläggstillgångar) och Ladda (ladda din app på en sekund eller mindre).

Här är ett bord med meningsfulla riktmärken för applikationsbelastning, som levereras av Meggin Kearney, tech författare på Google Web Fundamentals .

delay and user reaction

Klicka på ikonen längst upp till höger för att förstora bilden

08. Revision din app med fyr

Google är den största mästaren som driver progressiva webbapps som framtiden för webben. Som sådan har den levererat ett användbart verktyg för att styra din PWA-utveckling.

Tidigare kallad fyr och levererad som en kromförlängning, som i Chrome 60 är det en del av Chrome DevTools, under fliken REURITES. Vad Fyr gör är att driva din ansökan under olika förhållanden och mäta sitt svar och framgång enligt PWA-riktlinjerna. Det ger dig en poäng av 100. Det kan också göra din app på webbens bästa praxis samtidigt.

Följande text är en lista över värdena fyren uppmätt. Vid användning visar också beskrivningar.

  • Register en tjänsteman
  • Svarar med en 200 när offline
  • Innehåller lite innehåll när JavaScript inte är tillgängligt
  • Använder https
  • Omdirigerar HTTP-trafik till HTTPS
  • Sidbelastning är tillräckligt snabb på 3G
  • Användaren kan uppmanas att installera webbappen
  • Konfigurerad för en anpassad stänkskärm
  • Adressfält matchar varumärkesfärger
  • Har en & lt; Meta Name = "Viewport" & GT; tagg med bredd eller initialskala
  • Innehållet är korrekt för visningsporten

Denna artikel uppträdde ursprungligen i webbdesignern; prenumerera här .

Relaterade artiklar:

  • PWAS: Välkommen till mobilrevolutionen
  • Hur man använder animering i mobila appar
  • 9 fantastiska pwa hemligheter

Hur - Mest populära artiklar

Hur man ändrar teckensnittet i din Instagram Bio

Hur Sep 16, 2025

(Bildkredit: Getty Images) Att lära sig att ändra teckensnittet i din Instagram Bio är väldigt snabbt och enkelt,..

Hur man hämtar Instagram Foton: Allt du behöver veta

Hur Sep 16, 2025

(Bildkredit: Joseph Foley på Instagram) Hämta Instagram Images - Hämta Instagra..

Arbeta smart med din zbrush ui

Hur Sep 16, 2025

Allt som stimulerar vårt sinne kan påverka vår produktivitet, och det är viktigt att känna igen faktorer som stöder vårt arbete, oavsett om det är rätt slags bakgrundsmusik eller til..

Lägg till digitala färger till penna ritningar

Hur Sep 16, 2025

Klicka på bilden för att se den fullstorlek Jag är en stor fan av traditionella medie..

Hur man skapar fantastiska effekter med CSS-former

Hur Sep 16, 2025

Frontend utvecklare tenderar att tänka i rektanglar; Rektanglar inuti rektanglar inuti rektanglar inuti rektanglar. Vi kan anvä..

Hur man flyttar mellan DAZ Studio och Zbrush

Hur Sep 16, 2025

För nykomlingar till Zabrus , gränssnittet verkar väldigt annorlunda än andra 3D-modelleringsprogram, så kan ..

Skapa en digital etch en skiss

Hur Sep 16, 2025

I den här handledningen tar vi den mekaniska ritningen Toy Etch en skiss som en inspiration och försök att genomföra dessa fu..

Använda vektorverktyg: En webbdesigners tillvägagångssätt

Hur Sep 16, 2025

Om du är en webbdesigner är det en bra chans att Photoshop är öppet och körs på din dator. Låt oss möta det - Photoshop har alltid varit arbetshäst och de facto-standarden för webbd..

Kategorier