Onsen UI / Monaca quick question.

[mmike]

Hello,

I am new to Onsen UI / Monoca.

The need I have is

• There will be link for Onsen app in the static website.
• Users using the mobile phone will click this link.
• Clicking that link calls this Onsen app that runs from iphone mobile browser (not from app store or play store) but will have look and feel of mobile app.

Question: I was reading the deploy steps at https://docs.monaca.io/en/monaca_cli/tutorial/building_app/ It does not mention anything about deploying in the apache webserver. Could you provide me the steps please?

Thanks!

[munsterlander]

@mmike This is because Onsen and Monaca make mobile applications not mobile websites. You can use Onsen UI for a mobile website but some features may not work as it is designed for phonegap applications.

[Fran Diox]

@mmike There are no special steps for that, just do it like for any other website. You have an index.html and assets that need to be accessible, that’s it. If your url is like localhost:8000/mobileApp/index.html then I guess you need to move files to /var/www/mobileApp/... or wherever the Apache server root directory is located.

[Arrais]

@munsterlander Not OP, but could you expand on this? What makes onsen work better with phonegap? What features would I not have available using it for mobile websites?

[munsterlander]

@Arrais Well, it comes down to certain hardware accesses. The web view and browsers have sandbox restrictions when trying to access hardware such as cameras, gps, etc. Phonegap is the bridge between mobile web and hardware. Without that, then you lose certain functionality.

Regarding Onsen and my interpretation of OP and a mobile website, I would automatically presume a user from a desktop environment will view the site and as such, features like swipe, back button, etc would not work. This all becomes a slippery slope when you are using a mobile website to emulate an actual app because while it will be close, it will never be 100% and users can be frustrated with that.

[Fran Diox]

@munsterlander @Arrais Swipe, back button and Onsen UI features, in general, would still work (with the mouse). Even you can use ESC key to simulate an device back button (Android) out of the box. The problem is if you want your desktop users to have a device-like app experience instead of a normal website. If you are just redirecting mobile browser users to your “mobile.domain.com” then it should be fine. In fact, you can make PWA with Onsen UI and have access to many device features without Cordova/PhoneGap thanks to the new browser APIs (template for vue-onsenui here).

My suggestion would be using ons.preload whenever possible in order to download pages before pushing them. Otherwise, it would need to wait for the network before performing push animations.

[Arrais]

@Fran-Diox @munsterlander , hey guys, thanks for the answers. I think Onsen is just great to make PWAs, I’ve been using it with react and it makes it so easy to make a nice experience on both iOS and Android. I think I didn’t feel any of the limitations @munsterlander mentioned since my app doesn’t use camera or gps, but I’ll keep that in mind moving foward. Also what would be the most active part of Onsen, I feel like not many people are using it with react, and onsen + vue has more documentation and examples.

[munsterlander]

@Fran-Diox I know that mouse events work but I had issues when trying to do long press, pixel calculation for swipe (because resolutions are different for desktop vs mobile), etc. With the back button, what I mean is it becomes redundant because there is already a back in the browser so in turn you have exactly what I was saying, a confusing environment for the user. Essentially a mobile app running as a mobile website.

Now if you go through my post history, you will see I routinely say that Phonegap apps are nothing short of websites and that at its core, Onsen UI is nothing other than a beautiful and awesome bit of JS and CSS, so of course it will work as a mobile website. That’s what a hybrid app is. My chief concern in saying, you bet, Onsen is the perfect website UI, is that it is designed for hybrid applications. I can’t with 100% certainty say everything will work perfectly out of the box, but luckily, @Fran-Diox can as he is the developer! :smile:

[mmike]

@Fran-Diox Thanks Fran! That worked great.