Nu när vi utvecklar en ny version av Campuskost frågade vi oss själva om vi ville börja med hemsidan eller mobilappen. Då tänkte vi oss apputveckling på de sätt som vi kände till, att programmera en native app (t ex i Java mot Android eller Objective-C alternativt Swift för iOS) eller en cross-platform App med webbspråk som HTML5, CSS, och Javascript. Det finns trade-offs mellan alla dessa val (läs t ex här) men för vårt projekt tänkte v att cross-platform passar bäst, i och med att smidig utvecklig är i prioritet för oss snarare än t ex skillnader i prestanda. Speciellt när vi fick höra om progressive web apps (PWA) så lät valet ännu mer självklart. Kortfattat så ser en sådan applikation ut som en mobilapp och körs i webbläsaren, men som kan sparas på hemskärmen och fungera offline, osv. Detta gör att den inte behöver laddas ner från t ex Google Play Store utan kan nås direkt via en sökmotor, och så fort vi uppdaterar koden på servern så uppdateras användarnas installerade applikationer också! Det här konceptet används tydligen av företag som Pinterest, Uber, Starbucks och Twitter. Jag kände mig först rätt förvirrad angående hur man får en app att bli en PWA så det innebar några timmar av att sätta mig in i det. Det handlar ju ofta om att hitta bra hemsidor som förklarar det på ett enkelt sätt, så jag har sparat några av de som gav mest här nedan. När det lilla meddelandet ”Lägg till Campuskost på startskärmen” dök upp på mobilen, och att det gick att använda appen utan uppkoppling, så var det en bekräftelse på att det fungerade. Så kul! Nu finns det mycket att jobba vidare på – bland annat att få push-notiser att fungera och att kunna ladda upp bilder från mobilen.
Några länkar som hjälpte att förstå konceptet och få till de praktiska steg som behövdes:
- create-react-app.dev: Making a Progressive Web App
- medium.com: Transform a React App into a Progressive Web App (PWA)
- spec-india.com: Progressive Web App vs Native App vs Cross Platform vs Hybrid App
- pluralsight: Progressive Web Apps: The Big Picture (videokurs, ej gratis)
- developers.google: Add to Home Screen
Här kommer lite mer praktiska detailjer om hur detta gick till. Vi programmerar vår frontend med React.js och som många andra använder jag nästan alltid modulen create-react-app vilket genererar en robust setup. Det är bara att byta ut deras standardinnehåll och börja med det roliga. Man får med några filer som jag förut inte förstått vad de är till för, t ex serviceWorker.js. Nu förstår jag att den filen finns där för att enkelt kunna göra appen till en PWA, det är den som exempelvis tillåter offline-läge samt cachar data så att appen kan ladda snabbare nästa gång. I index.js är det bara att ändra serviceWorker.unregister() till serviceWorker.register(). En annan fil som skapas via create-react-app är manifest.json som behöver specificera sådant som ikon och startsida. De krav som en applikation behöver uppfyllas för att vara en PWA finns listade via den sista länken ovan. Ett bra hjälpmedel är även Lighthouse (tillägg för webbläsaren) där man kan se vilka krav som uppfylls genom att inspektera en sida. Tips tips testa testa!
Läs mer om utvecklingen av campuskost här:
En kommentar om “Lära sig koda ’Progressive Web Applications’”