Has anyone actually deployed an Ionic app to the web?


#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.


#21

Just saw this:


#22

Yes, its pretty easy to deploy Ionicapps to the web. Here is a gradle build I cooked up to make it even easier. It generates a war file that you can then deploy. It can be enhanced to do even more:

/* ============================================================================
This file contains the configurations for
Eclipse and Webapp settings
Author: agyepong

Included from: “${rootProject.projectDir}/build.gradle”

*/

apply plugin: 'eclipse’
apply plugin: ‘war’

ext {
appName = 'ionicapp’
builddir = "${appName}/build"
contentdir = “${appName}/WebContent”
}

task copyTask(type : Copy) {
from '…/www’
into contentdir
}

war {
destinationDir = new File(builddir)
webAppDirName = contentdir
archiveName = “${appName}.war”
}

/* ensure eclipse source folders are always created, even when not inside GIT */
def eclipseSourceFolders=[
builddir,
contentdir,
];

tasks.eclipse.dependsOn << {

for (String sourceFolder: eclipseSourceFolders){ 
	def resourceDir = new File(project.projectDir, sourceFolder)
	if( !resourceDir.exists() && ! resourceDir.mkdirs() ) {
		logger.info("Not able to create %1",resourceDir);
	}
}

}

/* To have javadocs in eclipse added - where no source are available - we need these lines:

/* setup eclipse with project encoding as UTF-8 (for editors) */
eclipseJdt.doLast {
File f = file(’.settings/org.eclipse.core.resources.prefs’)
f.write(‘eclipse.preferences.version=1\n’)
f.append(‘encoding/=utf-8’)
}


#23

Couldnt agree more. Handrolling anything, when a knowledge of the framework takes you pretty much there, is just setting yourself - and whoever has to maintain your code - up for living hell. I dont think Ive ever seen anyone say “I just wrote my own [state management]/[navigation/[injection]/[etc]” followed by “and use it in all my apps”. Not once. Just words like [headache]/[pain]/[nightmare]/[just shoot me now] and my personal favorite [didnt have time for error handling]


#24

@MarkAurit Which post exactly are you agreeing with? :slight_smile:


#25

Here is my deployed Ionic web app. It runs on Chrome because it needs Bluetooth.
https://aircable.co/page/sppovergatt

I decided to use a simplified preview.html file to limit the look to a smartphone app
and integrated it into the looks of our web siite.

If you run the app directly click here:
https://aircable.co/aircable_images/static/SPPoverGATT/index.html
or https://aircable.co/aircable_images/static/SPPoverGATT/preview.html

When I build the app, I do ionic cordova build browser --prod
and then copy the platform/browser/www directory to the server.

Information about the app: