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

**URL:** <https://forum.ionicframework.com/t/solved-pwa-cordova-pwa-code-branch-design-and-index-html/126225>\
**Category:** ionic-v3\
**Created:** [March 28, 2018, 4:06pm UTC](https://forum.ionicframework.com/t/solved-pwa-cordova-pwa-code-branch-design-and-index-html/126225 "2018-03-28T16:06:29Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [March 28, 2018, 4:06pm UTC](https://forum.ionicframework.com/t/solved-pwa-cordova-pwa-code-branch-design-and-index-html/126225/1 "2018-03-28T16:06:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Sujan12](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sujan12/32/108395_2.png) [@Sujan12](https://forum.ionicframework.com/u/Sujan12)\
**Post date:** [March 28, 2018, 4:09pm UTC](https://forum.ionicframework.com/t/solved-pwa-cordova-pwa-code-branch-design-and-index-html/126225/2 "2018-03-28T16:09:09Z")

</div>

(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…)

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [March 28, 2018, 4:13pm UTC](https://forum.ionicframework.com/t/solved-pwa-cordova-pwa-code-branch-design-and-index-html/126225/3 "2018-03-28T16:13:25Z")

</div>

Good point 😉 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

---

<div class="post-metadata">

**Author:** ![saberouarezzamen](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/saberouarezzamen/32/118349_2.png) [@saberouarezzamen](https://forum.ionicframework.com/u/saberouarezzamen)\
**Post date:** [March 28, 2018, 5:11pm UTC](https://forum.ionicframework.com/t/solved-pwa-cordova-pwa-code-branch-design-and-index-html/126225/4 "2018-03-28T17:11:45Z")

</div>

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 😃

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [March 29, 2018, 5:43am UTC](https://forum.ionicframework.com/t/solved-pwa-cordova-pwa-code-branch-design-and-index-html/126225/5 "2018-03-29T05:43:22Z")

</div>

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 🎉

---

<div class="post-metadata">

**Author:** ![robinyo](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/robinyo/32/115964_2.png) [@robinyo](https://forum.ionicframework.com/u/robinyo)\
**Post date:** [March 29, 2018, 8:48am UTC](https://forum.ionicframework.com/t/solved-pwa-cordova-pwa-code-branch-design-and-index-html/126225/6 "2018-03-29T08:48:11Z")

</div>

@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 🙂

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](http://meumobi.github.io/ionic/pwa/2018/03/26/using-ionic-app-sources-as-pwa.html)

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [March 29, 2018, 9:01am UTC](https://forum.ionicframework.com/t/solved-pwa-cordova-pwa-code-branch-design-and-index-html/126225/7 "2018-03-29T09:01:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [March 30, 2018, 12:24pm UTC](https://forum.ionicframework.com/t/solved-pwa-cordova-pwa-code-branch-design-and-index-html/126225/8 "2018-03-30T12:24:41Z")

</div>

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 😉

Thx all for your could ideas!

---

<div class="post-metadata">

**Author:** ![jandres2p](https://avatars.discourse-cdn.com/v4/letter/j/b3f665/32.png) [@jandres2p](https://forum.ionicframework.com/u/jandres2p)\
**Post date:** [September 11, 2019, 6:57pm UTC](https://forum.ionicframework.com/t/solved-pwa-cordova-pwa-code-branch-design-and-index-html/126225/9 "2019-09-11T18:57:35Z")

</div>

Interesting subject.

I agree with @reedrichards in getting separate branch for working with PWA and hybrid apps in a same projet.  
For example, in my case, to keep my code clean, i prefer to use DynamicComponentLoader.

[https://angular.io/guide/dynamic-component-loader](https://angular.io/guide/dynamic-component-loader)

This allow me to load a component (mobile or desktop) depending on a constant (like @reedrichards use as Config.CORDOVA).

All my pages in my projet are divided in two subcomponents: (Mobile, Desktop) and depending of environement where the application is running, it choice one.

In this way, i keep my code clean and maintainable and do not mix code useful for one environement but not for the other.

I really hate the idea of put if and else around all my code to change the behavior of my application depending on the environment where it runs.

It still the problem of one single branch on the git repository and i still searching for a solution for split it.

thanks for your contributions

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:42pm UTC](https://forum.ionicframework.com/t/solved-pwa-cordova-pwa-code-branch-design-and-index-html/126225/10 "2021-07-19T21:42:42Z")

</div>

Closed on July 19, 2021, 9:42pm UTC