I have a create react app SPA, and I have deployed it with a registered service-worker.js (Cache-Control: max-age=0)
Everything works totally fine: When I update my code, and redeploy, navigate away from my site (or close the page), and return to my site, the service-worker.js file is downloaded again. It caches my index.html file which contains the url for my app.HASH.js file. It notifies me that new content is available, I refresh the browser page, and now I am running my latest app version.
What doesn't work is: When I navigate to different parts inside my SPA, I use react-router to change the URL. The "url-changes" don't trigger a reload of my service-worker.js file (it's cached with max-age=0 - and I have confirmed this with curl -I). Therefore a new worker is never downloaded to eventually inform me that new content is available and that I need to do a refresh.
I am not sure what the expected behaviour is supposed to be. If react-router changes the URL - should this not trigger a reload of service-woker.js when it's set to not cache itself?
In order to be able to get a new version of the SW.js file while the user is using your app, you have to manually call ServiceWorkerRegistration.update().
You could do for instance:
navigator.serviceWorker.getRegistrations()
.then(registrationsArray => {
registrationsArray[0].update();
})
This code would then be called whenever you like! This forces the browser to check for updates to the SW.js file and then handle the situation in whatever way you've configured your script to do.
This update() call should be made in any place you want to check for updates. You could call it after every URL change / new route visit or once a minute or whatever. You decide.
Checkout the MDN documentation. They also show reference code for storing a reference to the registered SW which gives you the possibility of directly calling update.
https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/update
Related
We created a react js application.
Problem: Not able to hit react URL from the postman to run component's function.
local URL: http://localhost:3000/rules/routine
Note: Above URL can be reached without login.
When we are calling a url from browser it's working however when we hit from a postman then it always returns public/index.html page but not the expected response.
So it is not calling the proper url http://localhost:3000/rules/routine.
Please find attached screenshots on below links
browser hit: https://prnt.sc/73gDWh4PiHgu
Postman hit: https://prnt.sc/fhVL78yaiATP
It's technically possible, and working it seems, but I suspect your expectations are a little skewed in what you think Postman will do or is capable of.
Keep in mind that all React apps are effectively a single page app, even when they use a routing/navigation package like react-router. react-router is only manipulating the URL in the address bar in the browser window, the app is still running from the single location on a server where it's hosted, i.e. public/index.html.
The servers hosting the app are configured to route all page requests, i.e. "http://localhost:3000/rules/routine" to the root index file, i.e. "http://localhost:3000/index.html" so the React app is loaded and can handle the "/rules/routine" internally.
So from what I see here, the response from Postman is absolutely correct and what I'd expect to see. It made a request to the development server for a nested directory "/rules/routing" and the server responded with the root index.html file. When the browser makes this request to the development server and gets a HTML file back it loads and renders it, and in this case, it's your React app.
Postman isn't a browser so it's not going to load the HTML response and do anything with it.
I have developed a react application which is hoisted as www.movielust.in .As the react application creates cache inside the browser I am unable to see changes at the same moment.As it loads the content directly from cache is there any way that I could deploy th app in such a way that everytime i push a change it updates cache or fresh reload automatically as other users won't understand such things.
Just to explain in more details.. If I desployed a new crousal on homescreen so if I open the website in icognito mode it shows the latest updated website but on the other hand if I open it normally it uses browser cache and open the same old website without updating new changes.. So I was thinking about anyway to update the app whenever I push a new change
When your upload before that change your package.json build version it's might help you
I'm wondering how does whatsappweb deliver updates?
Do you ever notice a left green card appearing sometimes and asking you to click in a link to refresh page and run the new whatsappweb fresh code updated.
I'm almost sure they use webpack, service workers etc.
Chances are that you already had cache problems using webpack where even refreshing page it remains cached.
So how does whatsappweb solved this issue with a single refresh link?
They use a service worker, if the service worker gets updated, they trigger something in the react app, is easy to do it.
serviceWorker.register({ onUpdate: () => {console.log('new service worker')}});
just dispatch something instead of the console.log
Webpack is a building tool and isn't involved anywhere on a live site. While it offers Hot Module Reload for the development server you will not get it on the production version.
Unlike traditional desktop applications, delivering updates for websites is as straightforward as updating the files on your server (and invalidating any browser caches). You don't need to notify the user to download something, a simple refresh will get the new pages.
If you really want instantaneous updates (without waiting for the user to refresh the page) you can create some sort of WebSocket communication which when a message is received triggers a browser refresh. Nothing special and no deployment mechanisms involved.
I have gatsby blog, and after I create a new post, and build static files, upload them on my hosting every user has to do hard refresh on my blog to see changes.
How to make auto refresh on next visit after uploading new build?
Another reason for this behavior was in my case the service worker as implemented by gatsby-plugin-offline.
Service workers are programmed to update while navigating. The problem is that when a user visits home and does not navigate any further no UPDATE will be visible. You esssentially never see an update if you have one-page website because there is nowhere to navigate to!
If you want the page to refresh automatically and invalidate the old cache, you need to trigger it. If you have gatsby-plugin-offline in your gatsby-config.js, add this line to your gatsby-browser.js
// trigger an immediate page refresh when an update is found
export const onServiceWorkerUpdateReady = () => window.location.reload();
Here some background information about this issue from the official github repository.
As #coreyway pointed out doing this automatically can be problematic. I argue that this behavior is still better than being stuck with an deprecated website version. If you are concerned about the UX the linked GitHub issuee discusses a solution to let the user trigger an update via click on a update notice message.
You likely have HTTP cache-control headers on your .html files that are telling the browser that they're safe to cache. You want to remove those cache-control headers, or at least configure your HTTP caching to require validation (must-validate). You'll want to do the same for your page-data.json files if you're using Gatsby v2.9.0+.
I am using $templateCache.removeAll(); to remove cache on LogOut, it is working fine since when I tried $templateCache.get("abc.html") it returns undefined.
But when I again load angular app abc.html shows from cache in network of chrome development tool .
The $templateCache is an applicative cache: angular stores the template in a JavaScript object. As soon as the application restarts because, for example, you refresh the page, this cache disappears and is recreated in the new application.
The browser cache has nothing to do with $templateCache. The browser is responsible for this cache, and populates it based on cache headers sent (or not) by the server. This is what prevents the browser for completely reloading pages, images and other resources that don't change often when using the back and forward buttons, or simply when navigating between pages.
So what you're seeing is completely normal.