Web App + Mobile App + PWA using Angular 2 / Ionic

I’m looking at some requirements for an application that a (potential) client of mine would like me to build. The app is quite complex but probably the biggest headache I have is that they need the app to work across all these platforms/situations:

  1. As a desktop Web App (I mean in a desktop browser rather than a compiled Electron app)
  2. Mobile Web App (i.e fully responsive when user hits the above site on a mobile device)
  3. Progressive Web App (i.e point 2 but with PWA capabilities)
  4. Native App in App Store (i.e hybrid Ionic 2 app)

Has anyone got any advice/experience of building something like the above in Angular 2 / Ionic 2?

I only have experience of building Ionic 2 mobile apps - I’ve not actually built a web app using Angular.

I’m thinking I would take a mobile-first approach and build this out as an Ionic 2 app to begin with making sure any services can be easily shared. Then look at making it work as a PWA. And then build duplicate components and templates (and routing) for the desktop web browser. Then on startup detect whether you are on mobile or desktop browser and then route the user from there. Is that a reasonable approach?

If anyone has any advice for tackling this sort of thing I’d be very grateful for it. Best approach? Things to look out for? Things NOT to do? Likely pitfalls? That sort of thing?

3 Likes

I don’t have advice per se, but I’m in pretty much the same boat. I originally was going to go Ionic for all 4 options, but in the end decided to build a responsive Angular site, then do the app piece separately. I definitely see the merits of Ionic first… perhaps altering mobile-style components for the desktop users, etc.

btw, l enjoy your blog. I hope you keep it up.

thanks @michael_reiser it’s certainly an interesting one - and I’m not sure right now what the best approach is (thanks for reading the blog too!)

Hey guys ! I have exactly the same question ! I was wondering what is your final decision and why ? I need to build the same thing execpt that the PWA is optional.

Thanks !

I am doing this right now and have not seen any reason to use anything but ionic 2. It can do browser, although limited to modern browsers. It can do PWA as the latest 2.2.0 has an example in their conference app. It has split views now which makes use of larger screens for tablet, desktop, etc. And of course it works as a hybrid app as it has from the beginning. I suggest using the deep linker to accommodate browsers and making sure you use route guards for security. Make good use of the grid and breakpoints for responsive design and you should be good to go.

4 Likes

I am in the same dilemma. We have a desktop app (Angular4): https://www.quemesa.com

and then a hybrid mobile app with Ionic - https://www.quemesa.com/mobile-app

and now I am playing around with a PWA. (I use Push, GeoLocation etC).

The part I can’t understand is if my PWA completely replaces my main desktop app (which is responsive). My mobile apps are light years ahead of the desktop app, but not as pretty on the desktop app.

So I could

  1. Just make the PWA live and not have all my lading page and about blurb etc.
  2. Have the existing page but remove the functional parts and have a second site (e.g. m.quemesa.com) which is the PWA and set up a redirect if you are on a mobile device
  3. Embed the PWA site inside the Desktop site with some sort of mobile viewer (like the Ionic demo page) so they can can interact with it inside a mobile-looking emulator…

Thoughts?

Hi.

Sorry I’m not getting what question you’re asking…

My next project will be pure ionic for everything with various parts of the app turned on or off depending on the situation.

I’ll be making extensive use of grids in a responsive style.

Looking forward to it.

I’ll try to explain:

I currently have 2 code-bases - Ionic 3 (for iOS/Android) and a Website (which is responsive).

However, the website has about 30% of the functionality of the mobile apps. To keep it up to date would take a lot of coding effort.

So, I am working on an Ionic PWA. It works pretty well, but I don’t know what to do with the Desktop Website. Visually, the current website is a lot more appealling and looks good on the big screen. So I have 3 options:

  1. Just make the PWA live and not have all my desktop/landing page and all the blurb like FAQs, About etc that is currently on the desktop site.
  2. Keep the existing desktop page but remove the functional parts so it is JUST a landing page and have a second site (e.g. m.quemesa.com) which is the PWA and set up a redirect if you are on a mobile device.
  3. Embed the PWA site inside the Desktop site with some sort of mobile viewer (like the Ionic demo page) so they can can interact with it inside a mobile-looking emulator…
1 Like

I’d go with using your ionic app as that’s where your functionality resides.

Work on the responsive side which will be easier than adding that functionality twice constantly.

I don’t know how much functionality you’ve got in both but you’re on a winner if the ionic side is further ahead.

1 Like

Hi @rodneyjoyce I was interested in hearing how you are getting on with this and what lessons you have learned (that you could share)?

@rodneyjoyce

Did you look at using a split-pane: https://github.com/Robinyo/big-top

Hello, I’m also into this project where in I need a demo of my ionic app inside my Angular PWA. Just like the demo in this site: https://ionicframework.com/docs/api/components/button/Button/ where A web app can navigate through the ionic mobile app…

any thoughts or correct approach on how to embed the ionic app inside the angular PWA?