javascript – Does the operating system cache PWA application icons automatically?

Question:

I'm creating a PWA and one of the questions I have is if I need to cache all the icons that are in the manifest file.

I use a generator, to create all different size icons and other files, the result is something like:

webmanifest.json :

{
    // ...
    "icons": [
        {
            "src": "/android-chrome-36x36.png",
            "sizes": "36x36",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-48x48.png",
            "sizes": "48x48",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-72x72.png",
            "sizes": "72x72",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-96x96.png",
            "sizes": "96x96",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-144x144.png",
            "sizes": "144x144",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-256x256.png",
            "sizes": "256x256",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-384x384.png",
            "sizes": "384x384",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

browserconfig.xml:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square70x70logo src="/mstile-70x70.png"/>
            <square150x150logo src="/mstile-150x150.png"/>
            <TileColor>#ffffff</TileColor>
        </tile>
    </msapplication>
</browserconfig>

HTML:

<link sizes="180x180" href="/icons/apple-touch-icon.png">
<link type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link type="image/png" sizes="194x194" href="/icons/favicon-194x194.png">
<link type="image/png" sizes="192x192" href="/icons/android-chrome-192x192.png">
<link type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
<link href="/site.webmanifest.json">
<link href="/icons/safari-pinned-tab.svg" color="#000000">
<link href="/favicon.ico">
<meta name="apple-mobile-web-app-title" content="Costamilam">
<meta name="application-name" content="Costamilam">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/icons/mstile-144x144.png">
<meta name="msapplication-config" content="/browserconfig.xml">
<meta name="theme-color" content="#ffffff">

I have the impression that the OS itself chooses the best file according to the device and keeps it saved, in which case I wouldn't have the reason to cache it. But I didn't find anything on the internet that corroborates this view.

Answer:

Hi

It saves the icons and its code in javascript and html use the google manifest

  "display": "fullscreen",
  "start_url": "./index.html",
  "orientation": "portrait",
  "lang": "pt-Br",
  "icons": [
    {
      "src": "icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "./icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash_pages": null`
Scroll to Top