Has anyone actually deployed an Ionic app to the web?

Ionic Framework ionic-v3
1

Hi everyone!

I’m thinking of the possibility to deploy our Ionic 2+ app to the web. Right now, we have a separate website, and even tho it is also built with Angular and some code is shared, it would be amazing to actually properly have one codebase for both the apps and the web.

Has anyone actually tried this or has any experience with it?

There would have to be a lot of “css hacks”, i.e. overrides for larger screens (since i really don’t want just a blown up mobile app, I’d have to hide the tabbar, move everything from it to e.g. a side meny or alike) but technically, everything sounds doable. Plus, the material implementation in Ionic is superb, and I think users on the web are used to that design, so it wouldn’t really feel out of place.

I’d really like to hear your input about this!
/Daniel

2

Look at the Split Pane layout for this type of deployment. I have released some Ionic app as PWAs, but they were meant for mobile browsers.

You should also look at the Ionic Grid to help with the layout of a larger screen as well.

I wrote a post on this at: https://chrisgriffith.wordpress.com/2017/08/24/case-study-stone-fest-21-pwa/

3

Yes. I built a website with Ionic 2. It’s public-facing, but it has almost no traffic, and I only use it as a portfolio sample – and frankly it was more an experiment for me to see the strengths and limitations of the format. My conclusion: as I’ve posted many times on this forum, I don’t think Ionic will be ready for PWA until at least Ionic 4. At the very least, I won’t try to build another one until the integration with web components is live.

4

Can you explain why you think this or link to your other post that refers to why?

5

There’s a lot of details that crash if you aren’t building a one-page app. Example: what happens if you click the refresh button on a page. navParams does not handle that. The changing landscape of the relation between pages and URLs. There’s a bunch of undocumented edge cases that show up when you are no longer running Ionic in the context of a one-page app on a handheld device.

Edit: see this forum thread and this Github link:

6

“what happens if you click the refresh button on a page. navParams does not handle that.”

I’m not sure I understand.
If I hit the refresh button my navParams retrieve the id at the end of my URL.

7

In a one-page app, you can use navparams to send arrays of content, and info (like a password) that you wouldn’t want displayed publicly. Displaying that in a URL is a nonsolution, especially for something like a form modal that you don’t want the user to be able to click to outside of control flow.

8

Ok, yes, navParams do not have to be in the url.
But I’m trying to understand what you are trying to achieve.
Do you want navParams that not in the url to be retrievable after a refresh? Kind of like as if the user hit back, initiated the function that created the navParams again and then went back to the page that was refreshed?

If that is it - why not use storage?

9

I refactored my code to remove navParams (and other things) and use Redux.

10

Thanks for sharing guys.

I was actually thinking of writing some sort of a hybrid router, meaning basically using the regular angular router but then handle the requests myself using the ionic router. For example, if I navigate to mywebapp.com/orders/23, I would manually activate the order tab and open the orderPage as a modal, and pass it the orderID (23 in this case) through navParams, just as I would in a normal mobile app.

This actually doesn’t sound too complicated, or am I missing some obvious problems here?

11

We’ve built and deployed an ionic app to the web. We use the browser cordova platform, but only to help provide proxies for some of the native plugins. You could probably go without the browser platform without too much effort. I can’t share the site because it’s for a client, but it can be done.

I was actually thinking of writing some sort of a hybrid router

I would advise against mixing both worlds like that. You’re gonna end up with a lot of headaches. Both frameworks give you a lot. You shouldn’t need hand-rolled solutions for foundational things like navigation. Just pick either ionic navigation, which is what we used, or angular. With either one, you can use what they give you to accomplish what you need. But my suggestion would be to go with ionic navigation.

We used to use some hand rolled navigation stuff like that where I work, but it was a nightmare. These days we just go with what the framework gives us. 9 times out of 10, it will do what you need (use the docs and source code to explore what you can do). When it doesn’t, there’s probably an easy enough work around to handle those edge cases. But that should be rare.

Feel free to message me if you want to talk more about these things.

This actually doesn’t sound too complicated, or am I missing some obvious problems here?

It’s not too complicated. Everything you described in your use case can be easily handled with ionic navigation.

12

Cordova plugins are no issue, mainly the router and the UX is.
I’m guessing you are using the Ionic DeepLinker for url navigation? The problem is, it seems deprecated, and not even available in the docs anymore.

Also, would you mind providing a link you your web app? I would be very interested in taking a look :slight_smile:

13

I’m guessing you are using the Ionic DeepLinker for url navigation? The problem is, it seems deprecated, and not even available in the docs anymore.

Yeah - the only issue I see with having a PWA is the lack of DeepLinkConfig documentation and how it actually works. I’m looking at this right now. In the ionic-conference-app, the DeepLinks work and you can use the back button, link to different pages with params, etc…

… but when you start a project, the DeepLinkConfig actually doesn’t work and I’m baffled on how to get it to work. If you have a PWA, you should be able to share a link like pwa.com/details/5 and it should go to that page in the app, passing in that 5 param.

I created a forum post about this here: IonicModule DeepLinkConfig... works in one app, but not the other

14

I have succesfully created an Ionic App which I can deploy to native and as well build using ionic build --prod in order to put the contents of the www folder on a shared drive, so people can run it as an app on a deskopt.

So likewise, put those contents on a www-server to serve this way if I wanted to

A bit of additional coding needed to deal with large form factors: going from a list view to a tile view (with Masonry effects)

Works nicely.

15

Would you mind providing a link to your web app?

16

I can’t give you a link to the app because it’s for a client. Well, I could, bit you would only get as far as the login screen.

Deeplinking isn’t deprecated, although I can see why you would think so. As of ionic 3, the documentation on deeplinking is crap. Can’t complain too much though. It’s a free framework after all.

If you search for deeplink in the most recent version of the ionic api docs, it will bring up a few pages. If you go here, you’ll see a reference to deepLinkConfig, although there is no documentation on deepLinkConfig itself.

If you clone the ionic repository, and go to src/navigation/nav-util.ts, you will see the definition of DeepLinkConfig and what you need to pass to set up your deeplinks. Your deepLinksConfig might look something like the following:

const DeepLinksConfig {
links: [
  {
    component: UserEditPage,
    name: 'UserEditPage',
    segment: 'user/:userId/edit',
    defaultHistory: [
      'HomePage',
      'UsersPage',
      'UserDetailPage'
    ]
  },
  {
    component: UserDetailPage,
    name: 'UserDetailPage',
    segment: 'user/:userId',
    defaultHistory: [
      'HomePage',
      'UsersPage'
    ]
  },
  {
    component: UsersPage,
    name: 'UsersPage',
    segment: 'user',
    defaultHistory: [
      'HomePage'
    ]
  },
  {
    component: HomePage,
    name: 'HomePage',
    segment: ''
  }
]
}

This assumes that you are also registering the page components properly. There is also a way to define deeplinking info when you set up your page for lazy loading. I haven’t done this though. This page talks about deeplinking and lazy loading.

17

I had trouble combining Lazy Loading and DeepLinks with certain modules.
eg: Dragula, Videogular

This was my post on it:

So I skipped LazyLoading and deploy for browsers successfully…

18

The DeepLinker actually doesn’t work at all in the most recent versions of Ionic, tho it does with older ones. Several people have reported this, so if not deprecated, then changes somehow - and undocumented. There was also at least some documentation about it before, but it’s gone now for some reason.

According to the the ionic changelog on github, this is undergoing changes (especially in v4) so I might put this off until I see where things are going. As of right now, this seems completely unsupported.

I would also need a way to implement server rendering - at least partly - in order to get proper metadata to product pages etc, so the more I think about it, the more I realize that we are definitely not there yet, and probably wont be for a good while longer.

19

Maybe I am not expecting much out of Linking but it works fine for getting variables from a url from which I can get all associated data.
Are you referring to trying to pass arrays and other mixed/hidden data as Aaron mentioned above?
I guess I am just happy that I can at least now create a reasonable looking url that can pass a var that refers to an item which I can then grab more info on.

20

This is also my plan (and analysis) about deeplinking.