Conditional Way To Exclude cordova.js Script For Ionic PWA

#1

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?

#2

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…

#3

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: