{"id":1920,"date":"2015-01-26T12:07:07","date_gmt":"2015-01-26T11:07:07","guid":{"rendered":"http:\/\/meier-online.com\/?p=1920"},"modified":"2015-02-13T15:01:26","modified_gmt":"2015-02-13T14:01:26","slug":"define-icon-webapp-android","status":"publish","type":"post","link":"https:\/\/meier-online.com\/en\/2015\/01\/define-icon-webapp-android\/","title":{"rendered":"WebApp-Icons f\u00fcr Chrome auf Android"},"content":{"rendered":"<p><\/p>\n<p>Translation to english is in progress, stay tunes<\/p>\n<p>Webapps sind im Grunde einfach Webseiten, die man mit eigenen Icon auf seinen Smartphone installieren kann. Die Nutzer brauchen so nicht \u00fcber einen Appstore zu gehen.<\/p>\n<p>Um eine solche Webapp zu entwickeln m\u00fcssen wir dem HTML-Code einer Webseite zus\u00e4tzliche Informationen mitgeben: die generelle Eigenschaft &#8220;WebApp-f\u00e4hig&#8221; sowie mindestens ein Icon. Apple hat sich hier ein Link Element mit Namen &#8220;apple-touch-icon&#8221; ausgedacht, zun\u00e4chst in der krummen Gr\u00f6\u00dfe von 57 Pixel. Dann kamen neue Ger\u00e4te und Aufl\u00f6sungen, und Ruck-Zuck durfte man 4 verschiedene Icons allein f\u00fcr Apple definieren.<\/p>\n<p>Android hat WebApps bisher zwar auch unterst\u00fctzt, aber eher halbherzig. Und Android m\u00f6chte gerne andere Icon-Gr\u00f6\u00dfen haben, die Vielfalt ist noch h\u00f6her als bei Apple. Die Icon-Gr\u00f6\u00dfen sind hier 48\/72\/96\/144\/192. Nat\u00fcrlich wollte die Android-Entwickler nicht die Tags nutzen, die das Wort &#8220;Apple&#8221; im Namen haben. All diese Bilder m\u00fcssen im Kopfbereich der HTML-Datei verlinkt werden. Der Kopfbereich wird dadurch immer gr\u00f6\u00dfer, ohne das irgend ein substanzieller Inhalt hinzukommt.<\/p>\n<h3>The new solution<\/h3>\n<p>Mit Chrome ab Version M39 hat sich Google jetzt der WebApp-Funktionalit\u00e4t noch einmal angenommen. Die L\u00f6sung ist eine zus\u00e4tzliche Datei, die von der Originaldatei mit einem Link-Element referenziert wird:<\/p>\n<p>&lt;link rel=&#8221;manifest&#8221; href=&#8221;manifest.json&#8221;&gt;<\/p>\n<p>Der Browser braucht die Informationen in der Datei nur anfordern, wenn der Nutzer wirklich die WebApp auf den Startbildschirm installieren will. In der Datei k\u00f6nnen wird die verschiedenen Icons definieren, sowie einige n\u00fctzliche Extra-Informationen:<\/p>\n<ul>\n<li>\n<p><strong>name<\/strong>: Der Name, der auf dem Startbildschirm erscheinen soll. Der sollte m\u00f6glichst kurz sein, also oft anders als der HTML-Title.<\/p>\n<\/li>\n<li>\n<p><strong>orientation<\/strong>: Man kann <strong>landscape<\/strong> oder <strong>portrait<\/strong> als Ausrichtung festlegen.<\/p>\n<\/li>\n<li>\n<p><strong>start_url<\/strong>: Das ist meistens einfach &#8220;index.html&#8221;<\/p>\n<\/li>\n<li>\n<p>\u00a0<\/p>\n<p><strong>display<\/strong>: &#8220;standalone&#8221; Dieses Attribut schaltet die Webapp Funktionalit\u00e4t in Chrome an.<\/p>\n<\/li>\n<\/ul>\n<h3>Result<\/h3>\n<p>Die Auslagerung der Web-App-Definition macht den Head-Bereich von Webseiten wieder kleiner (oder zu mindestens w\u00e4chst er nicht mehr mit jeder neuen Icon-Gr\u00f6\u00dfe).<\/p>\n<p>Das gew\u00e4hlte Format ist offenbar wieder mal ein Alleingang einer amerikanischen Firma. Weder CSS noch der ebenfalls &#8220;Manifest&#8221; genannte Appcache-Definition, noch die XML-Widget-Definition des W3C wurden verwendet. Leider fehlt bei Chrome immer noch eine definierte M\u00f6glichkeit, wie die WebApp erkennen kann, dass sie im Standalone-Modus l\u00e4uft.<\/p>\n<p>\u00a0<\/p>\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>Sorry, this entry is only available in Deutsch.<\/p>\n","protected":false},"author":4,"featured_media":1701,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[106],"tags":[186,244,220,100],"class_list":["post-1920","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile","tag-android","tag-icons","tag-ux","tag-webapp","entry"],"_links":{"self":[{"href":"https:\/\/meier-online.com\/en\/wp-json\/wp\/v2\/posts\/1920"}],"collection":[{"href":"https:\/\/meier-online.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meier-online.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meier-online.com\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/meier-online.com\/en\/wp-json\/wp\/v2\/comments?post=1920"}],"version-history":[{"count":10,"href":"https:\/\/meier-online.com\/en\/wp-json\/wp\/v2\/posts\/1920\/revisions"}],"predecessor-version":[{"id":1974,"href":"https:\/\/meier-online.com\/en\/wp-json\/wp\/v2\/posts\/1920\/revisions\/1974"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/meier-online.com\/en\/wp-json\/wp\/v2\/media\/1701"}],"wp:attachment":[{"href":"https:\/\/meier-online.com\/en\/wp-json\/wp\/v2\/media?parent=1920"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meier-online.com\/en\/wp-json\/wp\/v2\/categories?post=1920"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meier-online.com\/en\/wp-json\/wp\/v2\/tags?post=1920"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}