[Feat]Chrome webapp icon

[agoNITE]

Gisteren kreeg ik op mijn Xperia Z Ultra een update naar Chrome 33.0.1750.132 aangeboden. Meteen geïnstalleerd.

Sinds de update zie ik bij een nieuwe 'Add to homescreen' webapp het Tweakers icoontje niet meer.
Dit is wat ik nu te zien krijg:

[crisp]

Soms helpt het als je wacht totdat de pagina volledig geladen is voordat je 'Add to homescreen' doet. Probeer dat eens?

[agoNITE]

Maakt geen verschil. Toch raar dat door een update van Chrome dit niet meer lijkt te werken. Ik zie verder geen wijzigingen in de guidelines voor deze optie in Chrome.

Andere vraag trouwens, ben in Photoshop wat aan het spelen met het icoontje in kwestie.
Is er ergens een grotere variant van deze afbeelding te vinden?
Transparant:

Met achtergrond:

url

[ Voor 54% gewijzigd door agoNITE op 27-02-2014 13:32 ]

[Misha]

Als je de naam niet verandert, doet hij het dan wel?

[agoNITE]

Ook zonder de naam te veranderen heb ik, zonder resultaat, geprobeerd.

[DarkShadow16]

Werkt op een Nexus 5 met chrome update inderdaad ook niet meer.
Net geprobeerd voordat ik de update installeerde en toen kreeg ik wel het icoontje, toen de update gedaan en daarna opnieuw toegevoegd aan startscherm en toen geen icoon meer.

[agoNITE]

Ik ben benieuwd of een bestaand icoon na de update nog wel werkt.

[Misha]

Ik kan het reproduceren nadat ik Chrome had geüpdatet. Bij andere sites zoals Ars gaat het nog wel goed. Wellicht een oops aan onze kant

[crisp]

Net gechecked met een Chrome op Android UA, niets veranderd aan onze kant:

HTML:

<link rel="shortcut icon" type="image/png" sizes="196x196" href="http://tweakimg.net/android-touch-icon-196x196.png">
<link rel="shortcut icon" type="image/png" sizes="128x128" href="http://tweakimg.net/android-touch-icon-128x128.png">
<link rel="shortcut icon" type="image/png" href="http://tweakimg.net/g/if/icons/tnet.png">

Ars doet dit:

HTML:

<link rel="apple-touch-icon" href="http://static.arstechnica.net/apple-touch-icon.png" />
<link rel="shortcut icon" href="http://static.arstechnica.net/favicon.ico" />
<link rel="icon" type="image/x-icon" href="http://static.arstechnica.net/favicon.ico" />

Maar volgens Google's documentatie is onze manier de juiste en zal fallback naar 'apple-touch-icon' uitgefaseerd worden. Lijkt me dus dat er een bugje in Chrome is geslopen...

[Misha]

Hmm, dat, of er is toch wat gewijzigd en de documentatie van Google loopt weer eens achter, net als in het begin gebeurde met deze feature

[Nakebod]

Scheelt het als ik zeg dat ik op mijn Nexus5 met zowel Chrome 33.0.1750.132 / 33.0.1750.135 (Huidige versie van "vandaag") het grote icoon krijg?

[agoNITE]

Opzich vreemd, ik kon in de documentatie inderdaad ook geen wijzigingen vinden. Moet wel zeggen dat ik een Xperia Z Ultra gebruik. Zou het op de één of andere vage manier aan de gebruikte DPI instellingen kunnen liggen?

Laatste versie van Chrome for Android beta laat ook geen icon zien trouwens.

Al is het dan wel vreemd dat het op de ene Nexus 5 niet werkt en op de andere wel.
Zou het trouwens een mooie Chrome feature vinden als per user-agent een icon gebruikt kan worden.

[ Voor 9% gewijzigd door agoNITE op 28-02-2014 08:25 ]

[Nakebod]

Misschien ben ik wat anders op het spoor...

Als ik tweakers.net open en ik klik op het tabblad icoon, hoor je normaal gesproken ook het favicon icoontje te zien links van de titel. (Kleine groene t.net) Als je dan "Add to homescreen" doet, werkt het.

Zie je echter geen favicon (Default grijze wereldbolletje) dan werkt het homescreen icoon ook niet.
Het heeft echter geen nut (Of tot op heden geen resultaat gezien) om de site te herladen, zelfs na meerdere keren zie je het icoontje nog niet. Pas als ik het tabblad sluit en de site opnieuw open, dan laad hij soms, ook niet altijd, het icoon.

Nu kan ik niet (meer?) zien vanaf welke webserver de content geserveerd wordt, en dus welke server(s) fout gaan, als het al om een t.net probleem gaat dan.



_{%@^&* denk ik een kloppend verhaal te hebben en wil ik dit verhaal versturen, test ik het nog een keer terwijl ik wel het favicon icoon zie, doet hij het homescreen icoon nu ineens ook niet meer... Zelfs niet na meerdere pogingen}

[agoNITE]

Tabblad fav icon zie ik hier wel gewoon op dit moment. Toch geen icon bij Add to homescreen.

[crisp]

Als ik https://code.google.com/p/chromium/issues/detail?id=112941 en https://code.google.com/p/chromium/issues/detail?id=324820 moet geloven dan ondersteund Chrome nog helemaal niet het 'sizes' attribuut

[agoNITE]

Zou het in de vorige stable versie wel gewerkt hebben, maar dat het nu uitgeschakeld is? New Tab Page (NTP) werkte 2 versies terug gewoon in de stable versie, in de update er na niet meer.

Merk wel vaker dat bepaalde functies eerst te gebruiken zijn, vervolgens niet meer maar in een latere versie weer wel.

[crisp]

Add to Homescreen is er zelf ook al een keer uitgehaald, dus wat dat betreft verbaast niets me meer. Af en toe lijkt het wel alsof ze maar een beetje aanmodderen bij het Chrome team..

[F.West98]

Op een tablet met de nieuwste Chrome werkt het wel, maar is de favicon ontzettend lelijk. Artefacts, verticale strepen. Heb ik overigens ook met mijn eigen site, niet met andere sites.

[agoNITE]

Ook wat verder geknutseld aan mijn icon.
Meer uit verveling dan dat iemand er iets mee moet doen trouwens

[ Voor 5% gewijzigd door agoNITE op 01-03-2014 09:26 ]

[agoNITE]

Zijn jullie er al achter wat het probleem is/kan zijn? Ik heb inmiddels al een aantal updates van Chrome gehad, zonder dat het probleem is opgelost.

[crisp]

agoNITE schreef op vrijdag 21 maart 2014 @ 16:44:
Zijn jullie er al achter wat het probleem is/kan zijn? Ik heb inmiddels al een aantal updates van Chrome gehad, zonder dat het probleem is opgelost.

Ik gok dat de fix voor https://code.google.com/p/chromium/issues/detail?id=349039 dit pas op gaat lossen - nog even wachten dus...

[DarkShadow16]

Als ik het laatste bericht van het bug report bekijk dan lijkt het dat in zowel chrome 35 als 36 hier de nodige updates in zitten om het probleem op te lossen. Nog even afwachten dus.

[Misha]

Goed nieuws, DarkShadow16!

[DarkShadow16]

Net in Chrome 35 bèta geprobeerd, maar daar werkt het nog niet goed.
Even afwachten of het in de final versie nog wel gaat werken of dat er misschien toch nog op versie 36 gewacht moet worden.

[Misha]

Ik probeerde het ook net, maar werkt inderdaad nog steeds niet

[hylke94]

Hier doeet hij het ook nog steeds niet in 35 bèta .

Edit:
Na de update van vanochtend nog steeds niet .

[ Voor 35% gewijzigd door hylke94 op 18-04-2014 07:43 ]

[Red hot]

Gekke vraag misschien, maar waarom werkt het alleen bij Tweakers niet?
Bijvoorbeeld http://www.blendle.nl doet het wel gewoon.

[crisp]

Red hot schreef op zondag 04 mei 2014 @ 20:06:
Gekke vraag misschien, maar waarom werkt het alleen bij Tweakers niet?
Bijvoorbeeld http://www.blendle.nl doet het wel gewoon.

Blendle gebruikt apple-touch-icon. Blijkbaar werkt dat (nog) wel in Chrome voor Android, terwijl de door Google zelf aanbevolen manier nog steeds niet werkt

[hylke94]

crisp schreef op maandag 05 mei 2014 @ 08:23:
[...]

Blendle gebruikt apple-touch-icon. Blijkbaar werkt dat (nog) wel in Chrome voor Android, terwijl de door Google zelf aanbevolen manier nog steeds niet werkt

En jullie kunnen niet even tijdelijk die linkjes voor de apple-touch-icons toevoegen?

[Nakebod]

Toch twijfel ik of het aan Chrome ligt.

In de meest basic vorm heb ik de volgende HTML code op verschillende kleine sites

HTML:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width">
<meta name="mobile-web-app-capable" content="yes">
<link rel="shortcut icon" sizes="196x196" href="/icon.png">

En dat werkt zover ik kan zien prima. Maar goed, ik heb dan ook niet zo een complexe site als tweakers.net is

Maar, ik denk dat wanneer je op Add to homescreen klikt, Chrome de site op de achtergrond opnieuw oproept, maar (nog) niet de mobile variant Dit kan misschien dan ook aan de t.net devicedetect liggen en niet per sé aan Chrome. Research required

Ik heb als test namelijk mogelijk een vergelijkbaar issue op een wordpress site met mobile template.
Als ik de site bekijk als desktop variant, en ik voeg hem toe op mijn homescreen, pakt hij automatisch het (wel een apple-touch) mobile icoon, en niet mijn eigen icoon die ik in de desktop template had staan.

Een mogelijke oplossing zou misschien juist zijn dat de code voor deze icons niet specifiek in de mobiele site komt, maar in de normale variant.

[crisp]

Nakebod schreef op dinsdag 06 mei 2014 @ 09:35:
[...]
Een mogelijke oplossing zou misschien juist zijn dat de code voor deze icons niet specifiek in de mobiele site komt, maar in de normale variant.

Er is geen mobiele/normale variant van de website Chrome op Android krijgt gewoon dit van ons:

HTML:

<meta http-equiv="content-type" content="text/html; charset=iso-8859-15">
<meta name="viewport" content="width=device-width">
<meta name="mobile-web-app-capable" content="yes">
<link rel="shortcut icon" type="image/png" sizes="196x196" href="http://tweakimg.net/android-touch-icon-196x196.png">
<link rel="shortcut icon" type="image/png" sizes="128x128" href="http://tweakimg.net/android-touch-icon-128x128.png">
<link rel="shortcut icon" type="image/png" href="http://tweakimg.net/g/forum/images/icons/favicon.png">

[ Voor 9% gewijzigd door crisp op 06-05-2014 10:56 ]

[_David_]

crisp schreef op dinsdag 06 mei 2014 @ 10:55:
[...]

Er is geen mobiele/normale variant van de website Chrome op Android krijgt gewoon dit van ons:

HTML:

<meta http-equiv="content-type" content="text/html; charset=iso-8859-15">
<meta name="viewport" content="width=device-width">
<meta name="mobile-web-app-capable" content="yes">
<link rel="shortcut icon" type="image/png" sizes="196x196" href="http://tweakimg.net/android-touch-icon-196x196.png">
<link rel="shortcut icon" type="image/png" sizes="128x128" href="http://tweakimg.net/android-touch-icon-128x128.png">
<link rel="shortcut icon" type="image/png" href="http://tweakimg.net/g/forum/images/icons/favicon.png">

als ik via mijn mobiel tweakers bezoek dan staat dat inderdaad in de source, maar via desktop niet.

misschien krijgt google ook die desktop variant?

[Nakebod]

crisp schreef op dinsdag 06 mei 2014 @ 10:55:
[...]

Er is geen mobiele/normale variant van de website Chrome op Android krijgt gewoon dit van ons:

HTML:

<meta http-equiv="content-type" content="text/html; charset=iso-8859-15">
<meta name="viewport" content="width=device-width">
<meta name="mobile-web-app-capable" content="yes">
<link rel="shortcut icon" type="image/png" sizes="196x196" href="http://tweakimg.net/android-touch-icon-196x196.png">
<link rel="shortcut icon" type="image/png" sizes="128x128" href="http://tweakimg.net/android-touch-icon-128x128.png">
<link rel="shortcut icon" type="image/png" href="http://tweakimg.net/g/forum/images/icons/favicon.png">

Mobiele site, responsive design, grade b, devicedetect, you know what I mean _{Hoop ik.} De varianten van http://tweakers.net/devicedetect/ IIG.

Het klopt als ik de source bekijk op mijn telefoon dat je dan inderdaad die code krijgt. Maar ik kan niet zien/achterhalen wat er precies gebeurd op het moment dat je op "Add to desktop" klikt. Zover ik kan beoordelen lijkt hij de huidige gerenderde site/source niet te gebruiken, maar opnieuw op te vragen. Anders zou hij wel het goede icoon moeten gebruiken.

Dus misschien krijgt hij eerst de weergave van "Automatisch" (Of minimaal die headers, gezien het kleine icoon), voordat de t.net devicedetect hem terugzet naar een andere weergave (Of hoe dat dan ook precies werkt). Maar wel met gevolg dat hij de 128x128 en 196x196 icons niet ziet.

Dus vandaar mijn opmerking om de 128x128 en 196x196 in de "normale" desktop weergave te zetten, ik heb namelijk sterk het vermoeden dat het dan goed gaat.

Het is misschien sowieso wel een goed idee om grotere iconen aan te bieden aan bezoekers.
Windows 8 heeft er bijvoorbeeld ook profijt van:

Editje: En volgens mij kan het met 1 extra regel ook als Opera Speed Dial werken, ipv een door Opera dynamisch gegenereerde thumbnail.

[ Voor 3% gewijzigd door Nakebod op 06-05-2014 12:28 ]

[crisp]

Nakebod schreef op dinsdag 06 mei 2014 @ 12:26:
[...]

Mobiele site, responsive design, grade b, devicedetect, you know what I mean _{Hoop ik.} De varianten van http://tweakers.net/devicedetect/ IIG.

Het klopt als ik de source bekijk op mijn telefoon dat je dan inderdaad die code krijgt. Maar ik kan niet zien/achterhalen wat er precies gebeurd op het moment dat je op "Add to desktop" klikt. Zover ik kan beoordelen lijkt hij de huidige gerenderde site/source niet te gebruiken, maar opnieuw op te vragen. Anders zou hij wel het goede icoon moeten gebruiken.

responsive grade e.d. maken niets uit; als wij zien dat een request van Chrome op Android komt dan staat wat ik eerder poste standaard al in de pagina. Dus tenzij Chrome bij een dergelijk request geen user-agent meestuurt (wat ik betwijfel) maakt dat verder allemaal niet uit. Responsive is bij ons niets meer dan wat extra toegevoegde CSS en JS op basis van media-queries. De pagina en inhoud daarvan is hetzelfde.

Bij meerdere icon-formaten faalt Chrome simpelweg in het kiezen van het juiste formaat. Blijkbaar pakt hij gewoon de laatste in het rijtje. Wat misschien zou helpen is als we daar nog sizes="16x16" aan toevoegen, maar dat zouden we moeten testen...

[crisp]

Als ik https://code.google.com/p/chromium/issues/detail?id=349039 mag geloven zou de fix voor Chrome in versie 36 moeten zitten

[hylke94]

Chrome Beta is net op mijn nieuwe Nexus 5 geüpdate naar versie 36.xxxx. Nou krijg ik weer een mooi groot icoontje van Tweakers op mijn homescreen .

[Chip.]

crisp schreef op maandag 05 mei 2014 @ 08:23:
[...]

Blendle gebruikt apple-touch-icon. Blijkbaar werkt dat (nog) wel in Chrome voor Android, terwijl de door Google zelf aanbevolen manier nog steeds niet werkt

Waarom niet gewoon ff toevoegen totdat het wel werkt? Is echt 1 seconde werk...

[crisp]

M'n editor openen kost al een seconde...

[geerttttt]

Ik heb hetzelfde probleem, telefoon opnieuw geinstalleerd en nu geen icoontje meer. Is het idd een optie om de tijdelijke fix toe te passen zodat het in ieder geval werkt? Dit 16x16 icoontje is echt superlelijk op m'n home screen.

Thanks

[_David_]

Waarom zouden tweakers het tijdelijk moeten fixen als het al bekend is dat het gefixt is in Chrome 36?

[geerttttt]

_David_ schreef op woensdag 18 juni 2014 @ 13:58:
Waarom zouden tweakers het tijdelijk moeten fixen als het al bekend is dat het gefixt is in Chrome 36?

Omdat de fix 1 regel code is die bij mijn weten geen nadelige invloed heeft, en het de vraag is wanneer chrome 36 uit komt.

[Fietsbel]

Weet je wat, ze voegen je request toe aan de to-do-lijst. Zodra de rest klaar is zullen ze deze "bug" aanpakken. Wellicht dat chrome 36 eerder uit is, dan kan de bug ook geschrapt worden. mooie deal toch

Of is het een kritische bug? dan kan het natuurlijk een hogere prioriteit krijgen

[ Voor 17% gewijzigd door Fietsbel op 18-06-2014 14:25 ]

[agoNITE]

Sinds de update van vandaag werkt dit weee! Vind het icoontje alleen niet echt mooi bij de stock Android UI passen..

[_David_]

Bij mij werkt het nog steeds niet als ik add to homescreen doe dan krijg ik het icoon van androidpolice..

Cache clearen helpt niet, denk dat dit een bug van chrome zelf is aangezien het bij andere dus wel werkt.

[DarkShadow16]

Bij mij werkt het na de update naar versie 36 ook weer helemaal goed.

[Misha]

_David_ schreef op maandag 21 juli 2014 @ 22:58:
Bij mij werkt het nog steeds niet als ik add to homescreen doe dan krijg ik het icoon van androidpolice..

Cache clearen helpt niet, denk dat dit een bug van chrome zelf is aangezien het bij andere dus wel werkt.

Ik krijg die van Wired

[Red hot]

Hier werkt hij goed

[theBIGone]

Bij mijn sgs 3 werkt het prima maar mijn moto X geeft het kleine icoon weer in een blaadje. Had het niet erg gevonden om gewoon de applicatie te gebruiken maar aangezien de ondersteuning daarvoor stopt en ik nu over ben op de responsive site is het irritant dat ik dus nu een lelijk icoon tussen mijn apps heb staan

[Inspector]

theBIGone schreef op woensdag 20 augustus 2014 @ 15:18:
Bij mijn sgs 3 werkt het prima maar mijn moto X geeft het kleine icoon weer in een blaadje. Had het niet erg gevonden om gewoon de applicatie te gebruiken maar aangezien de ondersteuning daarvoor stopt en ik nu over ben op de responsive site is het irritant dat ik dus nu een lelijk icoon tussen mijn apps heb staan

Heeft je moto X wel de nieuwste versie van Chrome?

[sHELL]

Heb Chrome versie 39 met Android 5.0.1 fresh factory reset op een Nexus 7 (2013) en krijg een vaag kadertje om mijn tweakers.net add to homescreen icoontje.

Op mijn xperia z3 Android 4.4.4 geen last van.

http://imgur.com/XJfzOiK

[_David_]

Chrome pakt daar (weer) het verkeerde icon, heb ik ook heel vaak problemen mee.

[Nakebod]

Ik zie dat tweakers gebruik maakt van een 196x196 icoon.
Dat deed ik zelf ook, en werkte niet. En kon niet vinden waarom. Totdat ik weer eens ging zoeken. Schijnt dat ze support voor dat formaat hebben laten vallen, 192x192 is sinds een paar versies geleden het maximale icoon formaat.

[_David_]

Je hebt gelijkt ja, op https://developer.chrome....droid/installtohomescreen staat nu dan het recommended format 192x192 is

Al is het wel raar dat Chrome dan niet de 128x128 versie pakt de tweakers ook meestuurt..

[ Voor 24% gewijzigd door _David_ op 06-12-2014 17:02 ]