Skip to content

Commit

Permalink
Change order of icons in generated HTML (#235)
Browse files Browse the repository at this point in the history 
- move favicons to top in order to fix Chrome issue which issues unnecessary network requests on route change; see also:
  - https://stackoverflow.com/questions/35409588/favicon-requested-on-every-route-change
  - ctrlplusb/react-universally#145
- preserve order of items inside one platform definition which allows to define a useful order

Fixes issue #234
  • Loading branch information
@uwolfer @brunocodutra
uwolfer authored and brunocodutra committed Aug 30, 2018
1 parent 290f081 commit 7d60ca8
Show file tree
Hide file tree
Showing 24 changed files with 172 additions and 168 deletions.
4 changes: 2 additions & 2 deletions src/config/html.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,9 @@
"link[rel='icon'][type='image/png'][sizes='228x228'][href$='coast-228x228.png']": "<link rel='icon' type='image/png' sizes='228x228' href='coast-228x228.png'>"
},
"favicons": {
"link[rel='icon'][type='image/png'][sizes='32x32'][href$='favicon-32x32.png']": "<link rel='icon' type='image/png' sizes='32x32' href='favicon-32x32.png'>",
"link[rel='shortcut icon'][href$='favicon.ico']": "<link rel='shortcut icon' href='favicon.ico'>",
"link[rel='icon'][type='image/png'][sizes='16x16'][href$='favicon-16x16.png']": "<link rel='icon' type='image/png' sizes='16x16' href='favicon-16x16.png'>",
"link[rel='shortcut icon'][href$='favicon.ico']": "<link rel='shortcut icon' href='favicon.ico'>"
"link[rel='icon'][type='image/png'][sizes='32x32'][href$='favicon-32x32.png']": "<link rel='icon' type='image/png' sizes='32x32' href='favicon-32x32.png'>"
},
"windows": {
"meta[name='msapplication-TileColor']": "<meta name='msapplication-TileColor' content='#FFFFFF'>",
Expand Down
12 changes: 8 additions & 4 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,9 +97,13 @@ function favicons(source, options = {}, next) {
async function create(sourceset) {
const responses = [];

const platforms = Object.keys(options.icons).filter(
platform => options.icons[platform]
);
const platforms = Object.keys(options.icons)
.filter(platform => options.icons[platform])
.sort((a, b) => {
if (a === "favicons") return -1;
if (b === "favicons") return 1;
return a.localeCompare(b);
});

for (const platform of platforms) {
responses.push(await createPlatform(sourceset, platform));
Expand All @@ -108,7 +112,7 @@ function favicons(source, options = {}, next) {
return {
images: [].concat(...responses.map(r => r[0])),
files: [].concat(...responses.map(r => r[1])),
html: [].concat(...responses.map(r => r[2])).sort()
html: [].concat(...responses.map(r => r[2]))
};
}

Expand Down
32 changes: 16 additions & 16 deletions test/snapshots/array.test.js.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10551,40 +10551,40 @@ Generated by [AVA](https://ava.li).
efbbef3e 5925ff0f d09494a3 c20d31f9 00000000 49454e44 ae426082
],
'index.html': [
'<link rel="shortcut icon" href="/favicon.ico">',
'<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">',
'<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">',
'<link rel="manifest" href="/manifest.json">',
'<meta name="mobile-web-app-capable" content="yes">',
'<meta name="theme-color" content="#fff">',
'<meta name="application-name">',
'<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">',
'<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">',
'<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">',
'<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">',
'<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">',
'<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">',
'<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">',
'<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">',
'<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">',
'<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">',
'<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">',
'<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">',
'<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.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">',
'<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" href="/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="/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="/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="/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="/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="/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="/apple-touch-startup-image-748x1024.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="/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: 1)" href="/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="/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="/apple-touch-startup-image-1536x2008.png">',
'<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">',
'<link rel="icon" type="image/png" sizes="228x228" href="/coast-228x228.png">',
'<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">',
'<link rel="manifest" href="/manifest.json">',
'<link rel="shortcut icon" href="/favicon.ico">',
'<link rel="yandex-tableau-widget" href="/yandex-browser-manifest.json">',
'<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">',
'<meta name="application-name">',
'<meta name="mobile-web-app-capable" content="yes">',
'<meta name="msapplication-TileColor" content="#fff">',
'<meta name="msapplication-TileImage" content="/mstile-144x144.png">',
'<meta name="msapplication-config" content="/browserconfig.xml">',
'<meta name="theme-color" content="#fff">',
'<link rel="yandex-tableau-widget" href="/yandex-browser-manifest.json">',
],
'manifest.json': `{␊
"name": null,␊
Expand Down
Binary file modified test/snapshots/array.test.js.snap
View file
Binary file not shown.
32 changes: 16 additions & 16 deletions test/snapshots/background.test.js.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11549,40 +11549,40 @@ Generated by [AVA](https://ava.li).
ee9315f2 bf360c9d 7e4e787a f2000000 0049454e 44ae4260 82
],
'index.html': [
'<link rel="shortcut icon" href="/favicon.ico">',
'<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">',
'<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">',
'<link rel="manifest" href="/manifest.json">',
'<meta name="mobile-web-app-capable" content="yes">',
'<meta name="theme-color" content="#fff">',
'<meta name="application-name">',
'<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">',
'<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">',
'<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">',
'<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">',
'<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">',
'<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">',
'<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">',
'<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">',
'<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">',
'<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">',
'<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">',
'<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">',
'<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.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">',
'<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" href="/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="/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="/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="/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="/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="/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="/apple-touch-startup-image-748x1024.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="/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: 1)" href="/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="/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="/apple-touch-startup-image-1536x2008.png">',
'<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">',
'<link rel="icon" type="image/png" sizes="228x228" href="/coast-228x228.png">',
'<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">',
'<link rel="manifest" href="/manifest.json">',
'<link rel="shortcut icon" href="/favicon.ico">',
'<link rel="yandex-tableau-widget" href="/yandex-browser-manifest.json">',
'<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">',
'<meta name="application-name">',
'<meta name="mobile-web-app-capable" content="yes">',
'<meta name="msapplication-TileColor" content="#fff">',
'<meta name="msapplication-TileImage" content="/mstile-144x144.png">',
'<meta name="msapplication-config" content="/browserconfig.xml">',
'<meta name="theme-color" content="#fff">',
'<link rel="yandex-tableau-widget" href="/yandex-browser-manifest.json">',
],
'manifest.json': `{␊
"name": null,␊
Expand Down
Binary file modified test/snapshots/background.test.js.snap
View file
Binary file not shown.
32 changes: 16 additions & 16 deletions test/snapshots/default.test.js.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11675,40 +11675,40 @@ Generated by [AVA](https://ava.li).
ee9315f2 bf360c9d 7e4e787a f2000000 0049454e 44ae4260 82
],
'index.html': [
'<link rel="shortcut icon" href="/favicon.ico">',
'<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">',
'<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">',
'<link rel="manifest" href="/manifest.json">',
'<meta name="mobile-web-app-capable" content="yes">',
'<meta name="theme-color" content="#fff">',
'<meta name="application-name">',
'<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">',
'<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">',
'<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">',
'<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">',
'<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">',
'<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">',
'<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">',
'<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">',
'<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">',
'<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">',
'<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">',
'<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">',
'<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.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">',
'<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" href="/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="/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="/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="/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="/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="/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="/apple-touch-startup-image-748x1024.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="/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: 1)" href="/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="/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="/apple-touch-startup-image-1536x2008.png">',
'<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">',
'<link rel="icon" type="image/png" sizes="228x228" href="/coast-228x228.png">',
'<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">',
'<link rel="manifest" href="/manifest.json">',
'<link rel="shortcut icon" href="/favicon.ico">',
'<link rel="yandex-tableau-widget" href="/yandex-browser-manifest.json">',
'<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">',
'<meta name="application-name">',
'<meta name="mobile-web-app-capable" content="yes">',
'<meta name="msapplication-TileColor" content="#fff">',
'<meta name="msapplication-TileImage" content="/mstile-144x144.png">',
'<meta name="msapplication-config" content="/browserconfig.xml">',
'<meta name="theme-color" content="#fff">',
'<link rel="yandex-tableau-widget" href="/yandex-browser-manifest.json">',
],
'manifest.json': `{␊
"name": null,␊
Expand Down
Binary file modified test/snapshots/default.test.js.snap
View file
Binary file not shown.
Loading

0 comments on commit 7d60ca8

Please sign in to comment.