Does a service worker need to cache manifest icons that are not used by the core of the PWA?

Question

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:

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:

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?

user_2192488 · Answer

The brief answer is "no," none of the (fav)icons or screenshots should be cached by the service-worker.js if the PWA will not use these.

Moreover, manifest.json should only refer to icons targeting the Android and/or Chrome browser. Hence, apple-touch-icon.png should not be mentioned in the manifest.json.

For iOS, it suffices to place the apple-touch-icon.png in the root folder of the scope of your application. The same holds true for favicon.ico.

There are some more rules for Windows and Mac OS X user agents. These can easily be checked by following the guidelines of this favicon generator or by proving your PWA URL to its favicon checker.

For example, it told me that the following line is best best kept out of index.html:

The only exception to this are the favicon-32x32.png and favicon-16x16.png icons that are referred to in index.html. These two icons should be cached, as desktop browser will fetch these as tab icons.

Furthermore, the service-worker.js should also not cache itself.

Finally, significant icon size reductions can be achieved by converting the images from RGB colour space to an indexed colour palette of for example 24 colours. This can be done using the free image editor GIMP. When exporting the images with GIMP, deselect metadata and thumbnail generation.

Does a service worker need to cache manifest icons that are not used by the core of the PWA?

1 Answers