Symbole und manifest.json

Question

Was sind die Empfehlungen zum Umgang mit Symbolen in manifest.json?

Ich fand diese webpack plugin that generates icons. Es erzeugte 37 Icons und die entsprechenden HTML-Tags.

<meta name="mobile-web-app-capable" content="yes"> 
<meta name="theme-color" content="#fff"> 
<meta name="application-name" content="graff"> 
<link rel="apple-touch-icon" sizes="57x57" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-icon-57x57.png"> 
<link rel="apple-touch-icon" sizes="60x60" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-icon-60x60.png"> 
<link rel="apple-touch-icon" sizes="72x72" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-icon-72x72.png"> 
<link rel="apple-touch-icon" sizes="76x76" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-icon-76x76.png"> 
<link rel="apple-touch-icon" sizes="114x114" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-icon-114x114.png"> 
<link rel="apple-touch-icon" sizes="120x120" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-icon-120x120.png"> 
<link rel="apple-touch-icon" sizes="144x144" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-icon-144x144.png"> 
<link rel="apple-touch-icon" sizes="152x152" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-icon-152x152.png"> 
<link rel="apple-touch-icon" sizes="180x180" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-icon-180x180.png"> 
<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> 
<meta name="apple-mobile-web-app-title" content="@dasnoo/graffity-inferno"> 
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-startup-image-320x460.png"> 
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-startup-image-640x920.png"> 
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-startup-image-640x1096.png"> 
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-startup-image-750x1294.png"> 
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-startup-image-1182x2208.png"> 
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-startup-image-1242x2148.png"> 
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-startup-image-748x1024.png"> 
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-startup-image-768x1004.png"> 
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-startup-image-1496x2048.png"> 
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-startup-image-1536x2008.png"> 
<link rel="icon" type="image/png" sizes="32x32" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/favicon-32x32.png"> 
<link rel="icon" type="image/png" sizes="16x16" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/favicon-16x16.png"> 
<link rel="shortcut icon" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/favicon.ico"> 

Für optimale Ergebnisse sollte ich die Symbole in meinem manifest.json und html Meta-Tags? Was würde 37 Symbole erreichen, die ich nicht mit sagen würde 10 Symbole (Ich nehme an, es ist mehr mobile Unterstützung, aber wenn 3 Symbole 95% der Browser behandeln, es effektiv nichts erreichen)? Was sind die empfohlenen?

Dies ist für einen Service-Mitarbeiter.

Answer 1

Sie sind richtig, jedes dieser Symbole ist für ein anderes Gerät und oft andere Version des Geräts. Sie brauchen aber nicht wirklich 37. Um 37 zu bekommen, erzeugen sie pixelperfekte Icons für Geräte mit einem Marktanteil von weniger als 1%. Sie können nur das nächste Spiel für sie bereitstellen und fast niemand wird es bemerken. Ich neige dazu, browserbezogene Symbole in die HTML-Metatags und appbezogene Symbole im Manifest einzufügen.

Gut Beitrag über all dies hier: https://realfavicongenerator.net/blog/new-favicon-package-less-is-more/

Answer 2

Bei einer Baseline, sollten Sie die Struktur des Manifests unter folgenden werden. Weitere Details finden Sie unter link. Wenn Sie jedoch Lighthouse gegen Ihre PWA ausführen, wird nach einem anderen Symbol mit einer Größe von 512 px gefragt.

{ 
    "name": "HackerWeb", 
    "short_name": "HackerWeb", 
    "start_url": ".", 
    "display": "standalone", 
    "background_color": "#fff", 
    "description": "A simply readable Hacker News app.", 
    "icons": [ 
     { 
      "src": "images/touch/homescreen48.png", 
      "sizes": "48x48", 
      "type": "image/png" 
     }, 
     { 
      "src": "images/touch/homescreen72.png", 
      "sizes": "72x72", 
      "type": "image/png" 
     }, 
     { 
      "src": "images/touch/homescreen96.png", 
      "sizes": "96x96", 
      "type": "image/png" 
     }, 
     { 
      "src": "images/touch/homescreen144.png", 
      "sizes": "144x144", 
      "type": "image/png" 
     }, 
     { 
      "src": "images/touch/homescreen168.png", 
      "sizes": "168x168", 
      "type": "image/png" 
     }, 
     { 
      "src": "images/touch/homescreen192.png", 
      "sizes": "192x192", 
      "type": "image/png" 
     } 
    ], 
    "related_applications": [ 
     { 
      "platform": "web" 
     }, 
     { 
      "platform": "play", 
      "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb" 
     } 
    ] 
}