Search code examples
ionic2build-processprogressive-web-apps

How to deploy a different version of index.html for PWA and native Apps with Ionic 2


our PWA lives here: https://m.quemesa.com and we also have native apps with the same codebase.

However, we are not targeting the Cordova Browser platform (because it does not seem to be officially supported and I can’t see what benefit it adds) so we have to add slightly different code for our PWA compared to our native app builds. For example, In the PWA, we use the pure Google Analytics solution which requires 2 lines of javascript in the index.html.

For our native builds, we use the Cordova GA plugin, so this is not required. In the PWA we don’t need to link to Cordova.js and Vendor.js for exmaple (they get a 404 error). In the native apps we do.

Currently I am manually editing (yuck) the output folder before uploading to Azure for the PWA.

Is there some way to edit the Ionic Build Process so that I can either have 2 versions of the Index and it grabs the one it wants for the output folder depending on the build type OR it can modify the html file at build time?


Solution

  • The current ionic build tool alone doesn't support this.

    You could just have 2 versions of index.html and a small script to swap between them and build both versions.

    It's also something you could do with a "full" CI build tool. Since you mentioned Azure you could make use of Visual Studio Team Services. There are existing tasks available for npm (to install ionic, run a PWA build) and running command/PowerShell scripts. It may be easier to start off by setting up an "agent" VM with everything it needs to build your app (node, ionic, Android studio, etc) then build your build process up from there.