[SOLVED][PWA] Cordova & PWA: code, branch, design and index.html


#1

Hi guyz,

In the future I know Capacitor gonna solve this question but right now, if you have a Cordova and PWA app, how to you handle your sources?

Do you have the same trunk of code in Git (no separate branches) for both code and just switch code testing for example this.platform.is('cordova')? Or do you handle two separate branches?

Or do you have a super duper design idea, like using a factory pattern (is that possible in angular actually)?

In case of a single branch, how do you handle the differences in index.html? I mean if you want to build the PWA, you have to remove <script src="cordova.js"></script> and same if you want to build Cordova you have to remove the service worker, how do you handle that?

Thx in advance


Conditional Way To Exclude cordova.js Script For Ionic PWA
#2

(I suspect there are not too many people out there deploying the same app as PWA and a native Cordova app. Otherwise this question would pop up more often here - because I have wondered the same, but only theoretically so let it go instead of asking as you just now did…)


#3

Good point :wink: I let it go for a long time too, but I’m slowly thinking about trying it therefore I would have love to hear about design ideas

Right now I may try the “one single branch with some if and scripts/hooks to switch index.html” but it’s a first thought


#4

Hi,

I have the same question as yours.

My first thought was to create two separate branches, since there are some cordova plugins that aren’t supported in the browser.

But I would love to know if there are other approaches to handle this.

PS: This is my first reply in forum.ionicframework :smiley:


#5

Having two branches I’m agree have the advantages of being able to remove code instead of putting it behind if ('cordova')...

On the other side, having two branches with a lot of differences would be super difficult to maintain

Having two branches with differences package.json means also that two projects should be cloned locally, otherwise it would be not handy to always remove node_modules and reinstall all libs while switching between them

P.S.: Congrats for the first reply :tada:


#6

@reedrichards

PWA (no plugins) and Hybrid Mobile App (with plugins):

  1. One git repo
  2. Use an ionic-app-scripts task (or a Cordova hook) to modify your index.html

Sorted :slight_smile:

See (it’s an example using Gulp but you’ll get the idea): http://meumobi.github.io/ionic/pwa/2018/03/26/using-ionic-app-sources-as-pwa.html


#7

cool thx @robinyo for the feedback and interesting link, that makes +1 for a single branch solution :wink:


#8

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:

  1. 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)

  1. 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 :wink:

Thx all for your could ideas!


How to version control native app and web app by git