Route component with version app

Hi,

I use framework with vue.

I want to force refresh cache when a new app version is deployed. I valorize the version with the parameter f7params.version.

Is it possible to force refresh cache web navigator only a new version app is deployed ? Or other solution ?

Example my route.js :

import AboutPage from './components/about/about.vue';
import HomePage from './pages/home/home.vue';
export default [
{
  path: '/',
  redirect: {
    name: "home"
  }
},
{
  path: '/about/',
  component: AboutPage
},
{
  name: "home",
  path: '/home/',
  component: HomePage
},....

Thanks for your responses.

how do you get if there is a new version? you are talking about new version of your deployed app ?

It’s a new version for my app when i refresh my source code (front office), the mobiles navigators don’t refresh front office. I have to empty the cache for to have the good code.
How to force the code refresh ?
I tried with the parameter “f7params.version”, but there has nether reaction.

If you use PWA and service worker check this topic iOS 12.2 automatic update of PWA broken? there are some useful blog links with tutorials

Sorry but i’m newbie to the world of technologies vue.js, node.js, webpack, cordova … I am basically a developer PHP and Jquery.
I do not use cordova because i do not understand yet how it works.

So I not use “PWA”.
I develop a simple application for navigator web not a native application.
For a moment, I run my app with “npm run dev” with webpack behind a server apache.

Ok, so if you don’t use service worker. Then the most boilerplate version to invalidate browser cache, is everytime you upload updated app scripts and styles, just add file hash suffix to file name, e.g. app.e452asdzj39123.css

Hi,

Ok, sorry, but I do not know how to do that. How it works ? (lib, methode, auto)

The hashing of the files is done automatically by webpack. This generate a new index.html with the new scripts tag and its hashes. So now the file is “new” for the browser and will download it. Ignoring the cache. But for this to work you need to publish your app after every build. Other way would be to host your js/css in a cdn service and call your files from there.

Read how webpack’s file loader works

in such configs in your webpack.config.js https://github.com/framework7io/framework7-cli/blob/master/create-app/templates/generate-webpack-config.js#L191

change 'images/[name].[ext]' to `‘images/[hash].[ext]’

And here https://github.com/framework7io/framework7-cli/blob/master/create-app/templates/generate-webpack-config.js#L67

Change
filename: 'js/app.js',
to
filename: 'js/app.[hash].js'

Ok i’m testing that.

It seems to work, thanks !