We have a shared Ionic app for iOS, Android and PWA. I’m looking for a way to exclude the <script src="cordova.js"></script>
from index.html
when running as PWA.
The PWA still loads in Chrome with a console error but it doesn’t load at all in Firefox because of the missing script file.
The suggestion is to just comment out cordova.js
but I don’t think that’s a great solution, in case you forget to re-include it later for the native apps.
<!-- cordova.js required for cordova apps -->
<!--<script src="cordova.js"></script>-->
Looks like some people have used gulp task and others have tried if statements. What’s the best practise on handling this?
Would it be possible to write a empty ‘cordova.js’ into www
directory when running as a PWA? Or is a better approach to have two index.html
and use webpack.config.js
to choose depending on PWA vs native app?
1 Like
For anyone needing this functionality, I added /hooks/after_build/010_index_html.js
file which removes <script src="cordova.js"></script>
from www/index.html
if not running as iOS or Android.
#!/usr/bin/env node
var fs = require('fs');
var path = require('path');
var exec = require('child_process').exec;
var root = process.argv[2];
var platform = process.env.CORDOVA_PLATFORMS;
function removeCordovaScript() {
process.stdout.write("removeCordovaScript" + "\n");
var filepath = path.join(root, 'www', 'index.html');
var data = fs.readFileSync(filepath, 'utf8');
var result = data.replace('<script src="cordova.js"></script>', '');
fs.writeFileSync(filepath, result, 'utf8');
}
if (platform !== 'ios' || platform !== 'android') {
removeCordovaScript();
}
Update: it doesn’t look like npm run ionic:build --prod --release
is calling the hooks
so will need to find a way to invoke this code during the build process, I’ll post a comment once I have a solution…
Unfortunately I couldn’t get the hooks
approach to work, since they are not being called unless Cordova is being used.
So I took an alternative approach, following Andy Gup’s example of injecting files into the build process using ionic_copy
, and it works!
First, I created an empty file /src/pwa.js
.
Second, I added /config/pwa.config.js
:
var fs = require("fs-extra");
if (process.env.IONIC_TARGET === 'cordova') {
fs.remove("www/cordova.js");
}
else {
fs.copy("src/pwa.js", "www/cordova.js");
fs.copy("src/browserconfig.xml", "www/browserconfig.xml");
fs.copy("src/assets/icon/apple-touch-icon.png", "www/apple-touch-icon.png");
fs.copy("src/assets/icon/apple-touch-icon-precomposed.png", "www/apple-touch-icon-precomposed.png");
}
Third, I edited my package.json
to include config
section:
"config": {
"ionic_copy": "./config/pwa.config.js"
}
Now when then app runs as a PWA via ionic serve --livereload --consolelogs
or compiled using npm run ionic:build --prod --release
, is adds a dummy /www/cordova.js
file, removing the browser error for the missing file.
But when you run the app for iOS or Android, it removes the dummy /www/cordova.js
file.
Hopefully the Ionic Team figures out a better way to conditionally having <script src="cordova.js"></script>
in the index.html
file, but until then this should work 
1 Like
Hi @dalezak thanks for this - I realise it’s a while ago (!) but I’m not quite following. You say that compiling using npm run ionic:build --prod --release adds the dummy cordova file but how - you have not specified ant configuration for the build command anywhere?
I would like to be able to build my project using --prod so that the www files are minified but also have the dummy cordova.js file in place so that when I serve the www files in a desktop browser the file missing error does not occur.
ahh maybe it should be npm run build --prod --release