Offline first? Klart vi ska stödja användare utan uppkoppling!

Utan internetuppkoppling - inte offline first

Vi förleds att tro att vi konstant är uppkopplade till Internet. Så är inte fallet. När vi är på konferens tenderar det publika wifi-nätet att strula, när vi är på ett större evenemang är ibland mobilnätet överbelastat, många tunnlar saknar mobilmaster, och så vidare. Vi behöver tänka offline first!

Mobilen först == Offline first

Så här skrev jag om offline first när min webbstrategi-bok gavs ut första gången för tre år sedan:

Begreppet offline first är något som man rimligen borde inbegripa i mobile first. Idén är att besökaren ska kunna tappa anslutningen till nätet och att det så långt det är möjligt ska gå att fortsätta använda webbplatsen. Mobilanvändare är vana att appar fungerar utan uppkoppling och det är säkert oftast baserat på att de data man använder finns som lokal kopia i mobilen. För dessa personer är det rätt ointressant huruvida de enligt en tekniker startade en ”native mobil app” eller klickade på ett bokmärke på mobilens hemskärm – det ska ju bara fungera. I ett mobile/offline first-scenario ska man inte betrakta en tappad anslutning som ett fel och meddela användaren att de är offline, istället ska man så långt det är ekonomiskt försvarbart se till att det fungerar att använda tjänsten även de stunder som uppkopplingen försvunnit.
Webbstrategi för alla (2014 & 2016)

Med tanke på att det är busenkelt att fixa en offline-sida finns det väl ingen giltig ursäkt att låta bli? De flesta av oss (?) har idag lagt viss möda på våra felsidor, så varför skulle en tappad uppkoppling just i användarens ände vara annorlunda? Många av dem kanske inte ens förstår vems ”felet är” att de tappar uppkopplingen när de försöker prata med din webbplats – det är ju i kopplingen till din webbplats något strulat!

”Mina användare är _aldrig_ offline!”

Vilken tur för dig! Men första frågan man bör ställa sig är hur man vet detta, det är ju inget som loggas i något webbanalys-verktyg du förfogar över. För oss andra är det dock inte helt ovanligt att det inte fungerar. Utgår man från statistik från Googles webbläsare Chrome så ser man att 2-5% av alla sidvisningar på 3G-nätet misslyckas och upp till var hundrade sidvisning på 4G-nätet går åt skogen ( källa ). Uppkopplingen är inte så tillförlitlig som man kan tro. Det är rent utav så illa som att din mobil kan ge sken av att ha full uppkoppling men att den ändå skulle misslyckas med att kommunicera med nätet om du gav det ett försök.

Hur gör jag min webbplats redo för offline?

Ett mycket enkelt sätt är genvägen att använda ett färdigt kodbibliotek. Ett sådant är UpUp. Det du behöver göra (förutsatt att du nöjer dig med text på din offline-sida) är att:

  1. Ladda upp filen upup.sw.min.js till din sajt.
  2. Ladda upp en offline-sida, offline.html, till sajtens rot.
  3. Klistra in nedan kod i din HEAD-tag.
<script src="//cdnjs.cloudflare.com/ajax/libs/UpUp/0.2.0/upup.min.js"></script>
    <script>
    UpUp.start({
      'content-url': 'offline.html',
      'service-worker-url': '/static/js/upup.sw.min.js'
    });
</script>

Hur ska min offline-sida utformas?

Först ska du nog fundera på om du behöver be om ursäkt. Det är inte givet att din användare tar på sig skulden för det som inträffat och då kanske du har att vinna på att inte peka finger. Utöver det så ska du förklara för användaren att hen tillfälligt tappat kopplingen till nätet och att det hindrar hen från att använda din webbplats. Uppmana användaren att kolla sin uppkoppling och erbjud en länk som tar användaren till där hen försökte navigera när uppkopplingen försvann.

Vill du kämpa på egen hand utan att använda diverse ramverk så är det tekniken Service/Web Worker du ska jobba med.

Om du kör fast så kan du alltid fråga om support på Webbstrategi för allas Slack-kanal. Har du inte redan anslutit dig så kan du be om en inbjudan genom att fylla i din epost-adress