This question may seem quite essential. However, I could not find an answer in any of the official Progressive Web Application (PWA) documentation.
The manifest.json
of my PWA contains quite a bit of icons and even a fairly large screenshot.png
that are not essential to the core of the PWA.
{
"src": "./assets/static/images/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "./assets/static/images/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "./assets/static/images/android-chrome-512x512.maskable.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "./assets/static/images/android-chrome-192x192.maskable.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "./assets/static/images/apple-touch-icon.png",
"sizes": "180x180",
"type": "image/png",
"purpose": "maskable"
}
],
"screenshots": [
{
"src": "./assets/static/images/screenshot.png",
"sizes": "1080x2220",
"type": "image/png"
}
]
Only one of the above icons is referred by the index.html
of my single page PWA:
<link rel="apple-touch-icon" sizes="180x180" href="./assets/static/images/apple-touch-icon.png"/>
But there are even a whole lot more icons mainly for Microsoft Windows and the Apple Safari browser that are even not referred by the manifest.json
. The Microsoft Windows icons are listed only in the browserconfig.xml
file:
<link rel="shortcut icon" href="./assets/static/images/favicon.ico"/>
<link rel="icon" type="image/png" sizes="32x32" href="./assets/static/images/favicon-32x32.png"/>
<link rel="icon" type="image/png" sizes="16x16" href="./assets/static/images/favicon-16x16.png"/>
<link rel="mask-icon" href="./assets/static/images/safari-pinned-tab.svg" color="#379"/>
<meta name="msapplication-config" content="./assets/static/images/browserconfig.xml"/>
On the other hand, my PWA has its own set of application icons that are not listed in the manifest.json
but of course are cached by the service-worker.js
; no problem there.
The targets of my PWA are mobile Android & iOS, with occasionally some Internet-connected desktop computers.
My question refers mainly to the first-mentioned set of icons: Do these Android and iOS icons and the screenshot need to be cached by the service-worker.js
even if the core of the PWA does not require these to function well?
Which would be equivalent to asking: Do the respective operating systems save the installation icons even when these are not cached by the service-worker.js
?