Windows maakt daar echter nog steeds geen gebruik van en in dat geval wordt er een screenshot gemaakt van de web app. Om toch een manier te vinden ben ik op onderzoek uitgegaan hoe we dit aan kunnen pakken. En kwam na een voorzetje van Google op een omslachtige maar werkende oplossing.

Om een tile te creëren  voor de WindowsPhone moet je de gebruiker een aantal stappen laten doorlopen:

1. De vraag of ze de applicatie op hun startscherm willen vastpinnen

Via de mobile device detection plugin welke ik heb gemaakt kun je checken of de bezoeker een windows phone gebruikt. In dat geval kun je via de melding weergeven of de gebruiker de web applicatie wil vastpinnen op hun startscherm. Dit kan met een zelf vormgegeven object of een standaard javascript confirm.

2. Het scherm met icoon voorschotelen

De Windows phone zal nog steeds een screenshot maken van je scherm en dat gebruiken als tegel. Maar met dit tweede scherm zorgen we er wel voor dat het een scherm is met jouw ontworpen tegel. Zelf heb ik een div gemaakt met een vierkante SVG bovenaan de pagina van 320×320 px. Onderaan een tekst om uit te leggen wat de gebruiker moet doen. Gebruik daarvoor iets als “Tap … en selecteer vastzetten aan je startscherm” Zorg er wel voor dat je vector svg de goed uitlijnt bovenaan je scherm. Zodra de gebruiker nu de applicatie opslaat zal de svg gebruikt worden als tegel.

De nadelen van deze oplossing

Deze oplossing is wellicht de enige mogelijkheid op dit moment maar alles behalve ideaal. Het zijn een tweetal stappen die mensen wellicht zullen volgen als je een webapplicatie hebt voor een dienst. Maar de schermvullende pagina voor het daadwerkelijk opslaan is in mijn optiek alles behalve prettig voor een gemiddelde gebruiker. Dus ook hier is het een must om goed na te denken over een oplossing voor de gebruiker die dit niet wil. Denk hierbij aan bijvoorbeeld een automatische deactivatie van het scherm na een aantal seconden en een link om alsnog het “screenshot scherm” te sluiten.

Voorbeeld op Github

Ik heb een downloadable voorbeeld in de mobiele versie van HTML5 ingebouwd welke te vinden is op github.

IE Mobile 9

IE9 voor de windows phone is geen exacte kopie van zijn grotere broer voor op de PC. Zo zijn er zo’n 16 verschillen en één groot verschil wat ik zelf een groot gemis vind: IE9 voor de windows phone ondersteund geen webfonts!

HTML5 Boilerplate

Ook zie ik verschillen in viewport size berekeningen in javascript bij verschillende apparaten. Er zit zelfs een verschil tussen de iPhone 3 en iPhone 4. Zelfs met dezelfde iOS versies geïnstalleerd. Dit zette me aan het denken. De manier hoe html5 Boilerplate dit probleem voor de desktop en oude IE versies oppakt vind ik handig. Daarom heb ik een kleine plugin geschreven waar je kunt kijken welk apparaat, os systeem en browser(versie) er wordt gebruikt. Download de plugin vanaf github

What’s next?

Op dit moment werken we ook aan een chrome variant. Waar deze toonbaar voor ons prima werkt zijn we wel benieuwd naar jouw wensen of feedback. Stuur ons een tweet of e-mail met je opmerkingen.