Vår byråpartner giftGRÜN byggde en progressiv webbapplikation (PWA) med WordPress för universitetssjukhuset RWTH Aachen, som stödjer introduktionen av nya anställda. Vi pratade med Patrick Heinker om fördelarna och nackdelarna med PWA:er jämfört med webbplatser och appar i originalversion.
Hur en progressiv webbapplikation fungerar
Patrick, hur exakt fungerar en PWA och hur är det med datahanteringen?
Innehållet bevaras i WordPress och skrivs ut via vanliga mallar. En ServiceWorker tillhandahåller offline-funktionen. När sidan öppnas för första gången laddar ServiceWorker ner en zip-fil med alla sidor, som genereras på serversidan.
När en sida nu anropas visas den sida som redan finns i cacheminnet. ServiceWorker tar hand om uppdateringen i bakgrunden, så att det nya innehållet visas vid nästa besök om något har ändrats. Eventuellt kan du också ladda om efter en uppdatering, men det har inte varit nödvändigt för vårt användningsområde.
Datalagringen är helt offline, endast för videor och externt innehåll krävs en internetanslutning.
PWA vs. infödd app
Vilka är skillnaderna men också fördelarna jämfört med native appar?
Nativa appar är plattformsspecifika, ofta komplexa och därför dyra att implementera. Dessutom måste de distribueras via de officiella butikerna för att få en stor räckvidd. PWA:er kan däremot installeras direkt när du besöker webbplatsen med en knapptryckning.
Apple ligger dock fortfarande lite efter när det gäller stöd för PWA-funktioner. Men det är inget nytt för webbutvecklare att Safari inte stöder saker som har varit vanliga i andra webbläsare i flera år...
Hur fungerar interaktionen mellan Progressive Web App med WordPress ?
Vi använder WordPress för dataunderhåll, men också för mallarna. Det är en vanlig webbplats, med den enda skillnaden att innehållet görs tillgängligt offline via en JavaScript ServiceWorker. Och att den beter sig nästan som en inbyggd app.
Det finns också möjlighet att använda REST API:et på WordPress och göra allting på klientsidan, som det skulle vara vanligt i inbyggda appar. För vårt användningsfall såg vi dock bara en extra ansträngning här, som knappast ger någon fördel.
Implementera Progressive Web App med WordPress
Vilka tillvägagångssätt finns det om du vill implementera en progressiv webbapplikation med WordPress ?
Det finns en del Plugins, som gör att en sida kan förvandlas till en progressiv webbapplikation genom att trycka på en knapp och göra några inställningar. Det finns också push-notifikationstjänster som kan användas för att meddela alla bloggbesökare om nya inlägg. Dessa färdiga Plugins är dock snarare avsedda för att göra en vanlig blogg offline-kapabel och för att ladda in filer som är avsedda för ändamålet.
Efter att ha lekt med några av dessa Plugins , valde vi vår egen lösning. Vi byggde vår funktionalitet separat från Plugins för att till exempel möjliggöra fullständig laddning av sidinnehållet via en servergenererad zip-fil och för att vara mer flexibel i anpassningen av funktionerna. Push-notiser är vanligen avbildade via betalda tjänster, men kan lika gärna byggas internt.
PWA:er: kompatibilitet och dataskydd
Vilka är de potentiella fallgroparna och hur löste ni dem? Och hur är det med frågan om dataskydd?
Som vanligt när det gäller webbutveckling: varje webbläsare fungerar på olika sätt och det måste testas i stor omfattning på alla enheter. Apple vägrar att ge fullt stöd för PWA-funktioner och har återigen egna Apple-specifika metataggar för att få appen att fungera som avviker från standarden.
Cachelagringsmodellen bör väljas för att passa användningsfallet. ServiceWorkers kan ge ut sidor som är lagrade i millisekunder och uppdatera dem i bakgrunden. Men om jag är på en nyhetssida kanske användaren föredrar att se en liten väntelista tills det senaste innehållet har laddats.
Dataskydd var ett av de viktigaste skälen till att vi valde en PWA. Användarnas innehåll och inlärningsframsteg hålls helt offline. Servern ser aldrig vilken användare som ringer upp vad, eftersom det inte finns några inloggade användare. Det är därför omöjligt att spåra om en nyanställd har arbetat igenom allt eller inte ens har installerat appen.
För- och nackdelar med systemen
Hur bestämmer du per kund vilken teknik som är bäst lämpad för ett sådant projekt?
Det finns tillämpningar som bara kan genomföras med en app som är inbyggd i den egna applikationen. Om en kund till exempel absolut vill ha push-notiser på en iPhone finns det inget annat sätt än att använda dem nativt. Å andra sidan är produktionen av PWA:er också betydligt billigare än en inhemsk app eftersom webbteknik används och all hantering av butikerna elimineras. Naturligtvis spelar den tillgängliga budgeten också en avgörande roll.
Har du några andra PWA-projekt på gång som du kan berätta om?
Mycket – men vi vill inte avslöja dem 😉 ännu Bara så här mycket: även inom e-handelssektorn kan stora saker göras med PWAs.
Några ord om dig och din byrå?
giftGRÜN är den digitala byrån inom GRÜN-koncernen. Vår företagsgrupp är den marknadsledande leverantören av donations- och medlemshanteringssystem i Tyskland. De flesta av våra projekt handlar om att inrätta ett övergripande system för våra kunder, dvs. att koppla ihop vårt ERP-system med webbplatser.
Vi gör mycket gränssnittsarbete och utvecklar våra egna WordPress-teman för det. Vårt team består av designers, front- och back-enders samt projektledare. Naturligtvis kommer vår favoritvärdinna från Münster 🙂
