Use Cache Storage API to Cache Images

[stravid87]

Description
Line 13 of Index.vue and and Line 31 of ItemCard.vue illustrate the problem:

          <q-img
            loading="lazy"
            decoding="async"
            fetchpriority="low"
            :src="monthPrompt?.image"
            spinner-color="primary"
            style="border: 3px solid #e54757; border-radius: 12px"
            data-test="month-link"
            @load="loaded = true"
            :class="{ 'prompt-img': loaded }"
            :srcset="`${monthPrompt?.image} 2x`"
            sizes="(max-width: 560) 50vw, 100vw"
          />

    <router-link v-if="!item.isAdd" :to="link" class="col-4 text-primary">
      <q-img :ratio="1" :src="item.image" style="border-radius: 24px" @click="goToUrl()" />
    </router-link>

In both scenarios, the image must be retrieved through calls to the backend hosting service. However, if these images can be cached, then far fewer requests will go through.

The Cache Storage API is for the caching of requests and responses seems an appropriate choice on which to build this functionality.

Acceptance Criteria
When a user first loads the IndexPage.vue, the hero image is loaded & cached.
On reload, the image is retrieved from the cache.
Time-To-Live should be set to 10days (3 reloads per month which is the length of a competition.)

[marclupanc]

Done in - #524