Currently, I have a web version of an app (based on twitter bootstrap), and also an Android and iPhone app made using Ionic Framework.
Instead of managing two bodies of code, I would just like to offer up the Ionic Framework version, but as a web app. I have successfully done this by just uploading the www directory of the project to the web server and it’s completely fine except for the fact it’s a full screen app.
Do you mean getting rid of the browser navigation / controls?
I believe that’s one of the major points of making it an actual mobile app, as I don’t think theres a way around it. I think the only other way to do this is by utilizing the “Add to Homescreen” feature, here’s a plugin that would encourage users to do this:
Sorry I’ve not made myself that clear. Some people access the web interface from their desktop PC, not their phone. Currently I am coding a separate web interface made for desktop browsers but it seems somewhat redundant because it functions in exactly the same way, especially as I can use the functioning ionic framework HTML/CSS/JS.
The only real issue is the fact that an ionic app (quite rightly) does not look great at 1920x1080 because there’s a lot of a white space. I want to be able to effectively have something like the Ionic Framework demos in the middle of the screen but instead of a demo, it’s my app.
I suppose I could do something with an iframe? I just wondered if such a thing already existed.
So ionic isn’t really aiming to be a full web framework.
We’re really just targeting mobile cordova apps.
This becomes noticeable as the UI doesn’t reflect what a responsive website should be.
For apps I’ve done in the past, I’ve had once directory for ionic and another for the web, sharing bits of data between each.
So I would advise you to stick with the bootstrap/angular setup for the web.
That’s a shame since it’s really easy making ionic responsive. All I had to do was set the container max width to 960px, add a little box to shadow, a different background color and I was done.
Think of it like this though. You woulndn’t expect an native iOS or Android app to function as website as well, right?
Even though apps and websites can be built with html/css/js, they are two different worlds.
Just to reiterate, I know this isn’t expected behaviour for Ionic, it’s just I spend most of my time testing Ionic apps using ionic serve with the chrome “emulator” and it really functions very well still.
I’m aware apps/websites are two different worlds but if it works well for both in the instance I am using it, that’s good right? It’ll certainly save me time trying to maintain two bodies of code. You’ve said you’re not aiming for a full web framework, which is absolutely fine, but the fact is, you’ve done such a good job, it functions and looks great on desktop too, so yeah, basically it’s your fault
If at a later date the Ionic Framework changes in such a way where a desktop version just doesn’t work any more, that’s my problem and I am happy to take it on the chin should it happen.
I use the same development Ionic App, to make the verison of the website. Advantage: mantenimiendo and development time. The Web version obviously has nothing phonegap / cordova.
At the moment the only problem I find is the scroll of the screens. Having the app style and no web browser as the user is accustomed. Someone adapt this?
@dortzur I do not find clear from this example how to implement the container and where to place the app ionic … sorry … Might show some more detail?
Thank you very much for your time.
I was hoping for a simple solution, so I will give what you’ve done a go!