CODEWITHSUNDEEP
ionic2build-processprogressive-web-apps
Rodney
Rodney

Reputation: 5565

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?

Upvotes: 1

Views: 790

Answers (2)

Victor Dias
Victor Dias

Reputation: 645

I use gulp-preprocessto update index.html on build depending on platform targeted. The idea of the preprocess is to generate a target index.html before the ionic serve/build with the exact declarations required for the mode selected, pwa or native. More details on this post "Using Ionic/Cordova app sources as PWA"

Upvotes: 0

Rory
Rory

Reputation: 3410

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.

Upvotes: 3

Related Questions