Tweakers een Web App van maken?!

[Devaqto]

Hallo iedereen,

We weten allemaal dat Tweakers een mooi responsive design heeft, alleen vind ik zelf dat dit niet goed geimplementeerd is. De Tweakers app in de App Store is EOL dus maken we nu gebruik van de website, door er een snelkoppeling van te maken op je homescreen. Dit werkt wel redelijk, het is immers gewoon een snelkoppeling, maar dat kan met een paar kleine regels code veranderd worden in een "volledige" app voor iOS en Android.

Hieronder een aantal voorbeelden op een iPhone, dit zal ongeveer hetzelfde gelden voor Android.

Elke keer als ik op het Tweakers icoontje klik beland ik op de Tweakers website. Zoals je hieronder ziet zie je gewoon een website in een mobiele browser. Inclusief adresbalk en controls.



Na een paar dagen heb ik uiteindelijk heel veel tabbladen openstaan. Zie hieronder.



Nu is het mogelijk met een klein aantal lijnen code een volledige web app te maken. Het resultaat is als volgt.



Nu heb je een Tweakers app op je homescreen, die draait als aparte app, geen onnodige adresbalk, controls, tabbladen en dus geheugen. Wederom "installeer" je deze app door in je browser Tweakers.net te bezoeken, en "toevoegen aan homescreen" te tappen.

HTML:

<!-- Dit zijn de iconen voor de app. Verschillende afmetingen voor verschillende resoluties. -->
<link href="img/retina.png" rel="apple-touch-icon" />
<link href="img/retina76.png" rel="apple-touch-icon" sizes="76x76" />
<link href="img/retina120.png" rel="apple-touch-icon" sizes="120x120" />
<link href="img/retina152.png" rel="apple-touch-icon" sizes="152x152" />

<!-- Met deze meta tag wordt er tegen de browser gezegd dat het mogelijk is om er een web app van te maken. -->
<meta name="apple-mobile-web-app-capable" content="yes" />

<!-- Hiermee kun je de status bar een kleur geven, ik vind zwart mooi. -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<!-- De titel van de app op het homescreen. -->
<meta name="apple-mobile-web-app-title" content="Tweakers">

<!-- Om het een beetje fancy te maken, is het mogelijk om een splash screen te laten zien voordat de app volledig geladen is. Verschillende afmetingen voor verschillende resoluties. -->
<link href="img/splash-320x460.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
<link href="img/splash-640x920.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<link href="img/splash-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<link href="img/splash-768x1004.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
<link href="img/splash-1536x2008.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

Meer info:
https://developer.apple.c...uringWebApplications.html
https://developer.chrome....droid/installtohomescreen

Het is dus maar een kleine aanpassing aan de huidige code. Ik ben zelf van mening dat dit best een grote impact heeft op het gebruiksgemak. Deze code werkt tevens voor Android devices.

Laat me weten wat jullie mening hier van is.

[Tjeerdtq]

Ik laat dit doen door de applicatie (volgens mij op deze site gevonden) NativeWrap. Die doet volgens mij het zelfde als jij hier boven aangeeft.

[ Voor 4% gewijzigd door Tjeerdtq op 07-11-2014 16:29 ]

[rob_erwt]

Dit is meer iets voor Mooie Features, dus ik verplaats hem even. (SB -> MF)

[_David_]

Waarom gebruikt Apple weer hun eigen meta tags ipv "mobile-web-app-capable"

Tweakers heeft die namelijk wel in hun HTML staan.

[ Voor 26% gewijzigd door _David_ op 07-11-2014 20:34 ]

[Terrestraeon]

Dit topic heb ik over het hoofd gezien bij mijn zoektocht voordat ik gisteren dezelfde vraag kwam stellen. Apple moet inderdaad weer moeilijk doen door eigen meta tags te gebruiken, maar het blijft een onaangename verassing dat een site als Tweakers deze niet implementeert.

Ik kom alvast een vinkje zetten onder de petitie

[Osiris]

_David_ schreef op vrijdag 07 november 2014 @ 20:34:
Waarom gebruikt Apple weer hun eigen meta tags ipv "mobile-web-app-capable"

Tweakers heeft die namelijk wel in hun HTML staan.

Chrome will also allow web apps to launch in "App mode" if they embed a meta tag using the "apple-mobile-web-app-capable" name. Chrome will stop supporting this usage in an upcoming release. Chrome currently shows a deprecation warning in the Developer Tools’ console log when it detects a page with only the "apple-mobile-web-app-capable" meta tag.

Is dus ook helemaal niet handig om die Apple-only-shit te gebruiken. Apple zou gewoon de standaard-meuk moeten gebruiken

[jorisjan]

Zou zoiets ook mogelijk zijn voor Windows Phone? Ziet er net ff wat mooier uit!

[MarcoC]

_David_ schreef op vrijdag 07 november 2014 @ 20:34:
Waarom gebruikt Apple weer hun eigen meta tags ipv "mobile-web-app-capable"

Tweakers heeft die namelijk wel in hun HTML staan.

Waarschijnlijk omdat die tag van Apple is afgeleid, in plaats van andersom? Volgens mij wordt deze tag namelijk al ondersteund sinds de allereerste iPhone (meer dan 7 jaar dus). Lijkt me stug dat er toen al een tag "mobile-web-app-capable" bestond. Daarnaast is "mobile-web-app-capable" ook geen standaard, maar Google-specifiek en bestaat nog niet zo heel lang.

Ongefundeerde Apple-kritiek imho.

[ Voor 13% gewijzigd door MarcoC op 09-11-2014 18:52 ]

[sjoerddebruin]

Er zitten wel beperkingen hieraan: URL's worden standaard geopend in Safari (daar is dus een JavaScript-oplossing voor nodig) en wanneer je de web app "sluit" en direct weer opent begin je weer bij het begin. Het heeft dus wel wat meer voeten in aarde.

[HSL]

Inmiddels weer een tijd verder, is dit iets waar nog naar gekeken wordt? Ik zou het heel relaxed vinden als de tweakers app echt fullscreen is als ik hem toch op mijn homescreen zet.

[Heijmenberg99]

een app van tweakers zou ik wel heel fijn vinden
heb ik geen tig tabbladen openstaan

[Zenety]

HSL schreef op zondag 18 oktober 2015 @ 15:17:
Inmiddels weer een tijd verder, is dit iets waar nog naar gekeken wordt? Ik zou het heel relaxed vinden als de tweakers app echt fullscreen is als ik hem toch op mijn homescreen zet.

Schrijf dit nu vanaf de "Add to Home screen" app. Hij is full screen en heeft een eigen tabje in het recent menu. Ik snap niet precies wat er nog mist behalve het een linkje op je homescreen blijft en geen echte app.

[HSL]

Met full screen bedoelen we zonder addressbar en zonder safari controls.

Bij mij is het via het homescreen niets anders dan een shortcut naar de site. Met de meta tag in de header erbij (zie boven) krijg je hem echt full screen. :-)

[Zenety]

HSL schreef op zondag 18 oktober 2015 @ 23:16:
Met full screen bedoelen we zonder addressbar en zonder safari controls.

Bij mij is het via het homescreen niets anders dan een shortcut naar de site. Met de meta tag in de header erbij (zie boven) krijg je hem echt full screen. :-)

Zoals dit? Is dit alleen voor iOS nog niet goed ingesteld?

YouTube: Tweakers web

[ Voor 5% gewijzigd door Zenety op 19-10-2015 16:45 ]

[HSL]

Exact, zou fijn zijn als de iOS header ook toegevoegd zou worden. :-)

[Dutchredgaming]

Ik vind jammer dat de Tweakers app gestopt is, Tweakers zijn daardoor achteruit gegaan met mobiele websites...

[_David_]

Wat mis je dan precies? Want er zit veel meer functionaliteit in de responsive versie die nu gebruikt wordt dan in de app.