Capacitor full website versioning problem

Capacitor
#1

Hey guys,

I am using one codebase for all.
Full blown browser version (with responsive grid layouts etc) and ios / android store deployements.

I am using ionic capacitor build --prod for website build.
So far so good. Everything works fine.

As soon as I push a new version the browser is not picking it up. It will stick to the old version. Even a normal refresh ist not refreshing to new version. I need to to do a clear cache (shift + Reload in chrome)
But a normal client user would never do that.

I expected the build process to take care of such cache clearing.
Am I am doing something wrong? Is there anything more I need to do within my deployment process?

I tried searching this forum, all the docs but so far I only found that the “browser build destination” is gone in capacitor and in the forum I can only find outdated info like this Bundled files and cache busting, lazy loading - #14 by softwaresciences

#2

This probably won’t be directly usable for you, as I don’t see anything in your post indicating that you’re using Angular, but if you were, Angular’s PWA tooling deals with all of this, and perhaps that documentation will give you some suggestions that you can use with whatever situation you are in.

#3

As always your support is very welcome, thank you.
Indeed i am using angular and your link describes very good how the service worker is doing its job.

I would expect that doing a build via clinin ionic would update the manifest as described (bjt not shown in detail) on that link. Which (line described there) would result in a new version being downloaded by the client.

As i tried to describe above this experience is not the one the user gets.

The never gets an update.

So am i hearing you right:
Ionic cannot do this and I should investigate outside of ionic more?
That is fine I just couldnt believe it :slight_smile:
Seems like the most urgent feature to be able to update a web app

#4

After digging a little deeper I found my solution:

Prerequisites: make sure ionic app-scripts is installed then:

  1. Create “config” directory in the root path of my project with following “webpack.config.js” file:
var webpack = require('webpack');
const defaultWebpackConfig = require('../node_modules/@ionic/app-scripts/config/webpack.config.js');
module.exports = function () {

	defaultWebpackConfig.prod.output['chunkFilename'] = "[name].[chunkhash].chunk.js";
	defaultWebpackConfig.dev.output['chunkFilename'] = "[name].[chunkhash].chunk.js";
	return defaultWebpackConfig;
};
  1. Add this lines to my package.json:
"config": {

	"ionic_webpack": "./config/webpack.config.js"
},
  1. Add the following two lines to
    src/index.html
 <meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate">
 <meta http-equiv="Pragma" content="no-cache">