We are deploying a frontend Vuetify. Always when we deploy a new version of the Vuetify code, our client is stuck with the old code unless they do a refresh / clear cache / incognito mode.
How can you force a browser refresh of all cached content from the previous deployment?
I try to set pwa like that in vue.config.js. But that doesn't help much, I must refresh the page for get updated
Related
Hii Can anyone help me to upload the Shopware PWA on the server(Server Side Rendering). I have tried almost all the methods mentioned on the nuxt js official website but I can't upload the PWA on the server. By using yarn generate, it converts the PWA on the static website so when I changed it on the backend it doesn't reflect on the PWA(like category, pages, etc) and also doesn't change the title of the website dynamically. and I have also tried this method https://www.niagahoster.co.id/blog/upload-nuxtjs-di-hosting/ but it also doesn't work for me.
I had previously created a website for my band on thescratch.ie using create-react-app and hosted this using S3 and Cloudfront. I recently replaced the react site using Shopify instead and thescratch.ie domain now points to Shopify.
For new users to the site, everything works fine but old users continue to see a broken cached version of the react website, not a Shopify site. I had assumed that the cache would eventually expire for these users, but it's been like this for a couple of months now.
Looking at the Chrome dev tools network panel I notice a couple of things:
Almost everything is being served from cache - the index.html and main.js return a 200 and have a size of (service worker)
Images return a 404
The manifest.json returns a 404
I'm wondering if there's a way to expire the service worker cache? Is it possible to do this by hosting a new manifest.json file on Shopify?
Thanks in advance.
I ran into the same issue in a combination of CRA & Gatsby.
Found this Gatsby plugin which helped me.
The underlying article maybe also can help you.
tl;dr in my understanding you need to place a service-worker.js in the root directory containing the code to unregister the old service worker.
When I upload Vue PWA on App Engine, GCP,
it does not get updated after the first deploy on custom domain, but it does on appspot.com
For example,
https://examplecustomdomain.com -> doesn't get updated
https://my-random-project.appspot.com -> does get updated
I assume the custom domain one is getting cached and not getting updated on new deployment.
I haven't touched anything about PWA setting so it should be set as default with vue cli.
What do I have to do to fix this?
I'm trying to figure out a basic thing about Nuxt "Universal" mode with the help of my dev tools, but I am just not sure if I understand it correctly.
Every time I request a new route in the Universal Nuxt app it seems to send a 200 (OK) request to the Node server. Did I understand correctly that on every page request a new document gets requested and served up by the Node server?
Some people are claiming that even while running the Universal mode the Node server sends only one package and after that the navigation and subsequent pages are loaded on the client side, thus not hitting the Node server anymore, but this is not the case right, how could the search engine crawler index that?
Essentially on every new route instead, the page gets re-requested from the Node server in its pre-rendered form right? This is how the "Universal" mode is actually SEO friendly as the crawler can look through all the pages and index it correctly to Google or Bing?
I'm sorry as I'm just a beginner with Nuxt and I fully understand (I think) how SPA as well as the Nuxt Generate modes work but this Universal mode is still a mystery for me at this point.
I would be very thankful for any clarifications on this!!! It would be super valuable in my learning journey! Thanks!
It's important to understand different "kinds" of navigation.
If you are navigating to a route by typing it into browser's URL bar, browser is hitting server (and this has nothing to do with Nuxt specifically) and what you get back is HTML with HTML content of your route pre-rendered by Nuxt + js bundle. Same thing happens if you use F5 (reload).
If on the other hand you use <nuxt-link> inside of some Nuxt page pointing to a different route/page and you click it, underlying Vue router will be used to switch to a different page (Vue component), server is not requested (for HTML) and new component (page) will handle rendering client side only
There can be an Ajax request when navigating that way but request is not for server-side rendered HTML. It's for additional JS content. Its because Nuxt is using automatic code-splitting (so when you hit the server 1st time, only JS needed for that route to work is loaded). Once the JS bundle for a specific route is loaded, it will not load again on subsequent navigation and unless your page/components inside are loading data from some API, you will not see any requests to a server during navigation....
we have built UI using react js framework and html +css + js code is deployed inside apache 2. When I browse website it works fine but if I refresh page then I get 404. Can someone tell me how can I fix it.
Perhaps this answer is relevant to you:
Apache web server doesn't allow me to refresh on /about but on localhost its working fine
I know I also had problems related to HTML5 mode when first setting up react-router.
If you are using React-Router you are probably having this problem: React-router urls don't work when refreshing or writting manually.
You can also see the React Router tutorial for how to set up a production Express server.