Cordova App As Shell For Existing Responsive Website

[Bill]

Is it possible to run an existing responsive website inside a Cordova App and still tap into the Cordova Apps native functionality?  We've built a responsive HTML 5 website and for our phase 1 mobile offering we were hoping to simply have a Cordova App as a wrapper around our responsive website.  At a later time, we plan to build out a more robust mobile app.

I've got it sort of working by simply doing a window.location = 'http://myresponsivesite'; on the 'deviceready' event, however when I do this, all Cordova interop is lost.  On our responsive website, running some functionality in this context is doesn't appear to work either (e.g. opening links in new windows/tabs).

Is what I desire possible?  Any guidance on this topic would be much appreciated.

Thanks,

[Zdravko]

Hi Bill,

Basically, one approach you can use is to open your website via InAppBrowser plugin (loading your site in separate window instance ) which will retain simple browser functionalities like opening a links in a new tab. Thus, you can always go back to your hybrid app content by closing this window and use some native features.
If this is something similar to what you aim to achieve, you can test it by verifying whether you have enabled the InAppBrowser plugin from Properties > Plugins window in our client.
Then open your website using the plugin:

window.open('http://myresponsivesite', '_blank')

For additional information regarding the InAppBrowser API please refer to its online documentation.
I hope it helps.

Regards,
Zdravko
Telerik

 

 

[Bill]

The intent is to open the website in the application (not launching a new window/browser) w/ external links being able to launch their own browser/window once the original site is open.

Setting the target to "_system" as mentioned or opening it with "_blank" opens the website in either the InAppBrowser or the system's browser a new window outside the app.  So that won't work as I want the website embedded in the app.

Setting the target to "_self" has the desired effect.  However, when doing this, external links that open in a new window/tab no longer work.  I've also tried not setting the target via attribute and instead firing window.open('the url', '_system'); on click to see if that would invoke launching the link into its own browser (outside the app) but that did not work either.

If anyone knows how I can launch external links in a new browser/window after the original window.location('my url', '_self'); that would help.  Thanks.

[Zdravko]

Hi Bill,

I am sorry for the mistake in the snippet. The target should be "_blank" in order to use the InAppBrowser and I fixed the reply, but I see this is not what you are looking for.

All my attempts to find a solution for you weren't successful so I suspect this to be a limitation which still has no workaround.

However, I found this discussion that you may find interesting.

Regards,
Zdravko
Telerik

 

 

[Prabal]

I already tried it, but result is, that the website is running in the browser tab and not in my app. How we use website in my app and not in  browser tab.

 tab

I already tried it, but result is, that the website is running in the browser tab and not in my app. Also if I use '<access origin="*" browserOnly="true" />' in the config.xml

[Dimitrina]

Hi Prabal,

Would you please ensure the InAppBrowser Cordova plugin which is also a core plugin is enabled? In addition, you can try out the InAppBrowser sample which illustrates how to do so. Please note the version currently available in AppBuilder is 1.0.0.

In case the issue still persists, would you please open a new support ticket and share with us a simple demo app to verify the exact case you have on our side.

Regards,
Dimitrina
Telerik