Webkit naar WatchOS 5

Tijdens de WWDC 2018 van Apple was er een leuk nieuwtje. Webkit komt naar watchOS. Dit betekent dat je, zodra watchOS 5 uit is, web content zoals websites en html emails kan gaan consumeren op je Apple Watch! De schermruimte op je Apple Watch is voor nu nogal beperkt. Dus wat zijn de mogelijkheden en hoe zal het werken?

Hoe het werkt

Als basis zal Webkit op watchOS een website met 320 CSS pixels proberen te weergeven. 320 is qua afmetingen precies de schermbreedte van een iPhone 5s en iPhone SE.

Bij het laden van een website zal de initial-scale(het zoomniveau wanneer de pagina voor de eerste keer is geladen) automatisch overschreven worden van 1 naar 0.49. De weergave is dan niet meer 320 maar 156 CSS pixels. Op deze manier kan een responsive website, out of the box, weergegeven worden op een Apple Watch.

Verdere optimalisatie

Het is mogelijk om je web content geheel te optimaliseren voor watchOS hiervoor moet je de onderstaande meta tag toevoegen.

<meta name="disabled-adaptations" content="watch" />

Met de meta tag zal Webkit op watchOS de automatische aanpassingen, zoals het schalen naar 0.49, niet doen. Met CSS kan je dan de echte width van de Apple Watch gebruiken. Op dit moment is dat 272 pixels voor de Apple Watch 38mm en 312 pixels voor de Apple Watch 42mm.

Formulieren

De keuze om het invoeren van formulieren te ondersteunen in watchOS is opvallend. Met een klein scherm zou het al snel gepriegel moeten worden. Echter door gebruik te maken van het juiste html type="value" attribuut wordt het invoeren van data vanaf je Apple Watch makkelijker gemaakt door Apple.

<input type="tel" />
<input type="date" />
<select></select>

Het gebruik van een aria-label was al belangrijk voor mensen met een beperking, maar nu zie je het als niet beperkte gebruiker bij het invoeren terug. Dit komt namelijk linksboven als back button in je scherm te staan.

<input type="email" aria-label="E-mailadres" />

Safari reader

Zodra een pagina een article tag met content bevat wordt Safari Reader automatisch geactiveerd. Dit is te vergelijken met een soort modus zonder afleiding zoals je die wellicht kent in je browser.

Witte tekst wordt dan weergegeven op een zwarte achtergrond. Om hier optimaal gebruik van te maken is het vereist om microdata toe te passen.

<article itemscope itemtype="https://schema.org/postsPosting">
  <h1 itemprop="title"></h1>
  <h2 itemprop="subheading"></h2>
  <span itemprop="author"></span>
  <span itemprop="pubdate"></span>
</article>

💡 Update: ondertussen wordt het gebruik van JSON-LD aangeraden.

Interactie

Scrollen, ook mogelijk met de digital crown
Swipen
Tap to zoom
Edge swipe en firm press (o.a. voor terug en vooruit navigeren)

Afwachten