Skip to main content

ArtinTech Solution

Offline E-Paper Reading with a Service Worker and a Web App Manifest

Den hyppigste klage over at læse avis online handler ikke om designet, men om tunnelen. Læserne åbner udgaven hjemme og læser færdig i et tog, der mister signalet mellem stationerne. I Inkfold 1.1 gjorde vi e-avisen til en installerbar web-app, der holder den åbnede udgave læsbar offline. Ingen app-butik og ingen separat kodebase.

Et manifest genereret fra redaktionens indstillinger

Web app-manifestet er en rute, ikke en statisk fil. Det henter sitets navn, slogan og brandfarve fra udgiverens indstillinger og angiver tre ikoner: en skalerbar SVG og PNG’er på 192 og 512 pixels, hvor den største er markeret som maskable, så Android kan beskære den til enhver form. Ændres avisens navn i redaktionen, ændres den installerede apps navn også, uden at noget skal bygges om.

En service worker med tre enkle regler

Vi holdt service workeren så lille, at den kan læses i ét stræk:

  • Sidebilleder og filer er cache-first. Deres filnavne indeholder en tilfældig del og ændres aldrig, så en cachet kopi er altid korrekt.
  • HTML er network-first. Læserne får altid dagens forside, når de er online; den cachede kopi bruges kun, når netværket svigter.
  • Redaktionen og læserkonti caches aldrig. Forespørgsler til administrationen og kontosiderne går direkte til netværket.

Cachene navngives med en version, og en gammel version slettes, når en ny service worker aktiveres, så en ny udgivelse aldrig efterlader forældede filer.

Læseren beder om hele udgaven

Hvis man kun cachede det, læseren tilfældigvis så, ville der være huller. Når en udgave åbnes, sender læserscriptet derfor service workeren en besked med mellembilledet af hver side, den besøgende må se, og workeren henter de manglende i baggrunden, op til firs pr. udgave. Låste premiumsider er aldrig på listen, for deres billeder sendes slet ikke til en besøgende uden adgang.

Inkfold-e-avisen på tre mobiler: forside, læser og den bengalske brugerflade
Installeret fra browseren åbner e-avisen i fuld skærm som en rigtig app.

Gem artikler til senere

Offline-læsning passer naturligt sammen med en læseliste. Indloggede læsere kan nu gemme en artikel eller et udklip med ét tryk; det vises på kontosiden med udgivelse, dato og side. Endpointet er idempotent, så et dobbelttryk gemmer ikke samme artikel to gange, og det tjekker adgang først: en artikel på en låst side i en premiumudgave kan ikke gemmes af en, der ikke må læse den.

Læserens kontoside i Inkfold med gemte artikler og indstillinger
Gemte artikler, e-mailindstillinger og betalinger samlet ét sted.

Det vigtigste

  • Generér manifestet fra indstillingerne, så den installerede app følger brandet.
  • Cache-first for uforanderlige filer, network-first for HTML og intet for private områder.
  • Lad siden fortælle service workeren, hvad en komplet offlinekopi kræver.
  • Cache aldrig, eller send overhovedet ikke, indhold den besøgende ikke må se.

Tidligere i serien: en opslagsvisning med to sider. Installér Inkfold-demoen fra mobilbrowserens menu for at prøve; softwaren fås hos Charming Theme.

Vil du have din avis på læsernes hjemmeskærm? Lad os tale sammen — ArtinTech Solution bygger progressive web-apps til udgivere.

Del denne artikel

Skriv et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *