After playing a bit I gonna follow the way we discussed
- 1 git repo aka 1 single branch
- Gulp scripts to switch the configuration between Cordova and PWA
- Kind of factory patterns to handle the code
Some more explanations and details:
- Configuration and index.html
Firstly I have noticed that using this.platform.is('cordova') to switch between Cordova or PWA isn’t really reliable for test purpose. Sometimes the Chrome debugger load a Cordova app when I was expecting a PWA (some refresh/redirect issue I guess). Anyway I have introduced a constant in my app to switch between both modes. Using Gulp and replace I could then easily switch from one config to the other.
To remove for example the service worker part of the index.html or other scripts I might declare there to be only use with PWA, I use gulp-remove-code, this allows me to place a begin/end comment to part I want to remove. For example:
<!--removeIf(pwa)-->
<script src="cordova.js"></script>
<!--endRemoveIf(pwa)-->
Pro: Super handy, just typing gulp pwa or gulp cordova allow then me to easily switch the config I want to use
Cons: It need to be careful. When a variable is changed or code removed, these modifications should not be push in the Repo and also I should not forget to run them before publishing my app. But anyway personally I’m used to it since a long time (I already handle this that way to switch between test/staging and prod mode)
- Code
To don’t affect to much my current code and to still have something clean, I basically decided to introduce new providers which are there to work as factories. I want to be able to call for example a method this.service.login without having to know if I’m in a PWA or Cordova mode. The provider then should decide if it has to handle the feature differently.
For example, Facebook login. In Cordova iOS and Android, I use the cordova-plugin-facebook4, in PWA I would have to use the javascript (custom flow) login.
Therefore, I would create a provider to handle the different flow, like the following example to handle the login status:
@Injectable()
export class FacebookNativeService {
constructor(private facebook: Facebook) {
}
getLoginStatus(): Promise<any> {
// Config.CORDOVA is my custom config true=cordova, false=pwa
if (Config.CORDOVA) {
return this.facebook.getLoginStatus();
} else {
return new Promise((resolve) => {
FB.getLoginStatus((response: any) => {
resolve(response);
});
});
}
}
Pro: My code is still clean and the migration is kind of easy, I create new providers with the same method declarations as I had, copy the current code for the Cordova part and just implement, if needed, the new PWA part
Cons: Only one branch means all the code is there. The PWA bundle gonna contains the Cordova code and same for Cordova bundle containing PWA. My PWA bundle would for example contains all ionic-native codes, but well, I guess I could live with that in a first step…maybe 
Thx all for your could ideas!
