The Workbox cache is not employed by the <img /> tag

Initial Setup

"workbox-cdn": "^5.1.4",
"nuxt": "^2.15.2"

Situation Overview

In my application, Pictalk, users can save and access pictograms. Each user has a personalized set of pictograms. Currently, the app only functions online, but I would like to add offline capabilities.

Technical Insight

All pictograms are displayed using the <img .../> HTML tag. Whenever a new pictogram is loaded, the following process occurs:

created(){
          if(navigator.onLine){
          caches.open('pictos').then((cache) => {
            cache.add(this.collection.path)
            .then(() => {})
            .catch((err)=> {console.log(err)})
          });
      }
  },

Shown below is a snapshot of the Cache Storage: https://i.stack.imgur.com/MrUIo.png The URL appears correct in the cache storage, and requests are being cached properly.

Current Issue

The <img .../> tag is not utilizing the workbox cache that was created. https://i.stack.imgur.com/N575i.png

vue.jscachingprogressive-web-appsworkboxnuxtjs

Answer №1

After extensive research, the answer to my problem was finally uncovered here and also here.

I had to make modifications to certain files in order to get everything working smoothly:

To begin with, I needed to adjust the way my <img/> tags were handling origins by using the 

crossorigin="anonymous"
attribute :

<img class="image" src="path" crossorigin="anonymous"/>

Once the origin flexibility of <img/> tags was sorted, I proceeded to set up a custom workbox route:

// plugins/customWorkboxRoute.js
workbox.routing.registerRoute(
  new RegExp('https://myapi\\.somewhere\\.com/mypics/image/.*\\.(png|jpg|jpeg)'),
  new workbox.strategies.CacheFirst({
    cacheName: 'mypictures',
    plugins: [
      new workbox.cacheableResponse.CacheableResponsePlugin({ statuses: [200] }),
      new workbox.rangeRequests.RangeRequestsPlugin(),
    ],
    matchOptions: {
      ignoreSearch: true,
      ignoreVary: true
    }
  }),
);

In addition, I had to include this file reference in the nuxtjs.config.js :

pwa: {
   workbox: {
      cachingExtensions: '@/plugins/customWorkboxRoute.js'
   }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Looking to update a component in Vue 3 and Laravel 9 without the need to reload the entire webpage

Looking for a solution to refresh the header component upon clicking the logout button, in order to display the login and register options without refreshing the entire page. Any effective suggestions on how to achieve this are greatly appreciated. The l ...

phphtmllaravelvue.jsvuejs2

The Vuejs code functions properly in the overall application, but is not functioning within the specific component

Before, my Vue.js app worked flawlessly until I tried putting it into a Vue component. It started throwing the following error: [Vue warn]: Error compiling template. Here's the code for the component (components.php): <script> Vue.component(&ap ...

phpvue.jsvue-component

PHP and Vue component not displaying properly on webpage

I am having some trouble with my PHP code, as I am attempting to incorporate a Vue component into an HTML file. However, all I see is a blank page and there are no JavaScript errors appearing. Could someone please review the code below and let me know if ...

phpvue.jsvue-component

What is the best way to incorporate sub-template caching in Kohana framework?

Currently tackling a caching issue within my Kohana project when trying to cache a sub-template from a single page. The challenge lies in dealing with both static and dynamic sections within the same page structure. My approach involves utilizing nested vi ...

phpcachingkohana

Mastering Array Dispatch in VueJS

I've encountered an issue while trying to send an array of data to the backend. I attempted to include [] in the dispatch variables and on the backend, but it only captures the last data sent to the backend. My objective is to associate each data with ...

javascriptphpvue.js

Instructions for showcasing a 404 error page in the event that a back-end GET request to an API fails due to the absence of a user. This guide will detail the process of separating the

I am currently working on an application that combines JavaScript with Vue.js on the front-end and PHP with Laravel on the back-end. When a GET request is made from the front-end to the back-end at URL /getSummoner/{summonerName}, another GET request is t ...

javascriptphplaravelvue.jsvuejs2

Uploading large files on Vuejs causes the browser to crash

Whenever I try to upload a file using my browser (Chrome), everything goes smoothly for files with a size of 30mb. However, if I attempt to upload a file that is 150mb in size, the browser crashes. The server's maximum upload size has been configured ...

javascriptphphtmlvue.jsinput

Is it possible to nest axios post requests within another axios post request?

Can someone assist me with getting the session ID from the API to utilize it as a part of my input for an Axios POST request in order to retrieve user information? Despite double-checking my code thoroughly, I keep encountering a session expired error. Any ...

phpvue.jsaxiosnativescript-vue

Issue with Laravel Vue search-dropdown and other components failing to render correctly for certain users

We are currently implementing a searchable dropdown menu for our web application using a vue component. Strangely, the component fails to load on my local version (xampp) as well as on the deployed website. However, it displays properly on another develope ...

phplaravelvue.jslaravel-blade

Laravel has not been properly initialized

Recently, I've been exploring Laravel 5.3 and vue.js and I'm trying to make a GET request to fetch some user data from my database. I'm utilizing components in this project. Here is a snippet from my app.js file: require('./bootstrap ...

javascriptphplaravelnpmvue.js

Please refrain from displaying the user table data in the View page source under any script tags

When I access the user data in the script tag of my app.blade.php file, the page resources show this line of code. 'window.user = {"id":2,"name":"test","email":"hidden_email@example.com","email_verified_at":null,"created_at":"2021-03-02T04:52:43.0000 ...

phplaravelvue.js

"Embracing Micro-frontends: Building dynamic web applications using a variety of frontend

I am currently facing a software architecture dilemma. My extensive monolithic web application is built using PHP and backbone js, but I am eager to integrate a new front-end framework like react/vue. The question arises about the best approach to tackle t ...

phpreactjsvue.jsbackbone.jssoftware-design

Vue Websockets twofold

I am experiencing some issues with Laravel/Echo websockets and Vue.js integration. I have set up everything as required, and it works, but not quite as expected. The problem arises when I refresh the page and send a request - it displays fine. However, if ...

javascriptphpvue.jswebsocket

Here is a unique rewrite: "Strategies for effectively passing the data variable in the geturldata function within Vue.js on the HTML side vary

How can I properly pass a variable in the getdataurl function in Vue.js? I need help with passing a variable in getdataurl function in Vue.js. Please provide a clear explanation and include as much detail as possible. I have tried doing some background r ...

javascriptphpjqueryajaxvue.js

The Safari browser is currently having trouble loading the data sent back from the server

After successfully developing and deploying my website carspeedyrental.com, I received reports from some clients indicating that the website does not display available cars on the iPhone Safari browser. Interestingly, when tested on various browsers on A ...

phpvue.jssafarimobile-safari

Using PHP to submit a file through an API

I'm currently working on creating an API endpoint to integrate with my Laravel and Vue application. public function avatar(Request $request) { $user = User::find(Auth::id()); $validator = Validator::make($request->all(), [ ...

phplaravellaravel-5vue.js

Tips for inserting a hyperlink on every row in Vuetables using VUE.JS

Trying to implement a link structure within each row in VUEJS Vuetables has been challenging for me. Despite my research on components and slots, I am struggling to add a link with the desired structure as shown below: <td class="text-center"> <a ...

phpvue.jsvue-tables-2

Issue with Laravel Composer: Failed to install, restoring original content in ./composer.json

I am fairly new to Laravel and I have been using Laravel 5.8 for my project development. Recently, I needed to access the file ExampleComponent.vue in the resources/js/components directory but it was not there. After referencing this link, I came to know ...

phplaravelvue.jscomposer-php

Download an image file directly from an HTTP response in Laravel using Vue, Axios, and Intervention Image

Currently, I am in the process of setting up a media asset database by utilizing Laravel, Vue, Axios, and Intervention image. One of my main objectives is to allow the user to specify their desired image height and width before proceeding with the download ...

phplaravelvue.jsaxiosintervention

The modifications made to the Laravel 4.2 website do not appear to be taking effect as expected

I am a beginner with the laravel framework and I'm currently working on editing a laravel web application. The website is hosted on an EC-2 instance of AWS and I am using SCP with filezilla for file transfer. Upon investigating, I discovered that th ...

phplaravelcachingmodel-view-controllerlaravel-4.2