Conditionally include JS file

I am integrating SDK with my app (IOS, Android and PWA - browser). I have added the branch SDK and it works fine for IOS and Android. Branch SDK is not supported on browser platform and I want to now integrate Branch WebSDK. Branch advises ( adding a script tag to index.html. I added it and got it working.

I don’t want to include this for the Android and IOS projects only for browser platform. Is there a way to do it in Ionic


I would see two ways: detect platform in index.html and use plain vanilla js to include a library (not ionic issue). Or rely on some sort of tree shaking mechanism in the build scripts for the browser platform. For both I would have to Google to investigate how. I would try first first.

I couldn’t find a way to detect platform in index.html. Once the platform is ready, it is easy to check the platform but at index.html stage I couldn’t figure out a way to detect platform.

Not sure how important your requirement to exclude is?

Did you find a way to dynamically include in index.html anyway? Some sort of script logic?

Detection of ios or android could possibly be done by testing existence of cordova related objects (after load of cordova.js)

I managed to inject the script at build time.

First install gulp-inject ( npm install gulp-inject --save-dev )
Then add a placeholder in the src/index.html

<!-- inject:js -->
<!-- endinject -->

Then create a script that with inject the JS in the index.html
Ex : browser.config.js

var gulp = require('gulp');
var inject = require('gulp-inject');

    .pipe(inject(gulp.src(''), {
        starttag: '<!-- inject:js -->',
        transform: function () {

            if (process.env.IONIC_TARGET !== 'cordova') {
                return '<script>(function(b,r,a,n,c,h,_,s,d,k){if(!b[n]||!b[n]._q){for(;s<_.length;)c(h,_[s++]);d=r.createElement(a);d.async=1;d.src="";k=r.getElementsByTagName(a)[0];k.parentNode.insertBefore(d,k);b[n]=h}})(window,document,"script","branch",function(b,r){b[r]=function(){b._q.push([r,arguments])}},{_q:[],_v:1},"addListener applyCode autoAppIndex banner closeBanner closeJourney creditHistory credits data deepview deepviewCta first getCode init link logout redeem referrals removeListener sendSMS setBranchViewData setIdentity track validateCode trackCommerceEvent logEvent".split(" "), 0);</script>';
            } else {
                return '';

I found that the environment variable IONIC_TARGET is equal to “cordova” when building for Android or iOS (ex: ionic cordova build android --prod), and when building for a pwa IONIC_TARGET is undefined (ex: ionic build --prod).

For the script to be executed at build time we can override a ionic-app-script config file. To do that edit your package.json and add :

  "config": {
    "ionic_webpack": "./browser.config.js"

I used “ionic_webpack” because it’s executed after the “copy” task, which copy the index.html to “www/index.html”.
This method also work when using “ionic serve”

Some considerations:

  • process.env.IONIC_TARGET is not documented, might change is the future
  • gulp-inject is designed to inject js files not inline script, maybe there is a better tool ?
  • I don’t know if overriding the ionic-app-script config is the best way to get a custom script executed

Thanks for your suggestion. Ionic has moved away from gulp and hence I wasn’t too keen to using this method. There were articles using similar method with NPM and ionic.webpack - but those work only for JS and CSS files and not html files.

Finally, I used plain old JS to check location.protocol. If it is not “file:”, I use the script embed, otherwise ignore it. I couldn’t test cordova.js for two reasons 1) it was included later in the file 2) I am using this in PWA and that would have corova.js too.

Lastly, I had to remove branch.js from cordova_plugins.js file in both www and platform_www folder of browser platform to get this working.