React js pwa tutorial #6 web app in offline mode | progressive web app

in this video, we will learn how to use a web app in offline mode in progressive web app | PWA. This PWA with react js video made by anil Sidhu in Hindi

step for video
how we can use the website in offline mode
write code to set files in the cache
write code for getting the file from the cache
test offline mode

Checkout and subscribe our new channel for technical news

[codestepbystep]

Checkout and subscribe our new channel for technical news

[itechiasolutions]

Hi @Anil, Thanks for the video
I am using React 18+ version, in this version I am not able to find '/static/js/main.chunk.js', this file, what should I use for this. When I set offline mode after following your video, It doesn't work in my system.
Please guide me. Thanks

[harshitsrivastava]

let cacheData = "appV1";
self.addEventListener("fetch", function(event) {
event.respondWith(
{
if (response) {
return response;
} else {
return fetch(event.request)
.then(function(res) {
return {
cache.put(event.request.url, res.clone());
return res;
});
})

}
})
);
});

In case you are getting an error, try using this sw.js file.

[heltonfurau]

hi there, I enjoyed your videos. here goes a suggestion, create a github repository for every project you teach here and upload the code there.

[laschisa]

Amazing content, still relevant 3 years later, thank you.

[nehalhasan]

Why my adAll method not Working, no caches shows inside cacheData!!🥺🥺

[komalkhond]

Hi, do you have video for this same concept, but in react native?

[triteraerlangga]

hi, I'm using react vite, and when I open the network tab, I can't find any static/js, can anyone help me?

[kodingsquad]

Why you use static files like that, normally chunk, bundle name is not always start by 0. , is it any other solutions to handle randomly number chunk and bundles files?

[AbhishekGanotra]

The same thing is not working in production build???

[AdebiyiDaniel]

sw.js:20 Uncaught TypeError: event.respondeWith is not a function
at sw.js:20

[jhakkasClub]

showing this message (The script has an unsupported MIME type ('text/html').). Thanks in advance.

[haseebahmed]

i am using your code but the fetch operation is not working .
means I am unable to browse offline

[pradnyakulkarni]

For me my website is showing no internet in offline mode, instead of showing actual website

[zozyyosef]

Hi, these steps are not working in production mode !! could you help, please

[NirangaDeSilva]

Bro... In fetch listener you have to handle cache misses by adding an else clause with "fetch(event.request)"

[yuvasrixcel]

Hello, how can I use the routing in offline mode.

[khaledalsamman]

can i display a pdf file from the cache?? would that be practical?

[lynnchris]

nice video please tell what if i want to open offline.html with images for offline mode

[LaTraina]

Do we have to add Network files manually for the sw.js? Is there a easier way? I'm getting around hundreds of network files...