Monday, June 3, 2013

Phonegap - Wrapper Web app into Hybrid app

1. Create Phonegapp App
cmd\phonegap\lib\anrdoid\bin>
create projectfolder projectnamspace projectname

2. Create index.html wrapper with your web app
assets\www\index.html
<!doctype html>
<html>
    <head>
        <title>itscMobile</title>
        <script type="text/javascript">
        function redirectToHostedApp() {
            window.location = "http://yourwebsite/";
        }
        </script>
    </head>
    <body onload="redirectToHostedApp();">
    </body>
</html>

3. Create config.xml
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns        = "http://www.w3.org/ns/widgets"
    xmlns:gap    = "http://phonegap.com/ns/1.0"
    id        = "org.yournamespace"
    version     = "1.0.0">

    <icon src="icon.png" gap:role="default" />

    <feature name="http://api.phonegap.com/1.0/geolocation"/>
    <feature name="http://api.phonegap.com/1.0/network"/>
   
    <!-- These rules lets your website take over the web view created by cordova/phonegap -->
    <preference name="stay-in-webview" value="true" />
    <access origin="http://yourwebsite" />

    <!-- Other domain if necessary for your web site -->
    <access origin="http://openstreetmap.org" subdomains="true" />

</widget>

4. Deploy phonegapp application into emulator or your android devide.
New shortcut of hybdrid application will be generated.

Reference

https://vaadin.com/blog/-/blogs/packaging-vaadin-apps-for-home-screens-and-app-stores-with-phonegap
https://vaadin.com/forum#!/thread/1394530
https://github.com/mstahv/vaadin-phonegap-start

0 comments:

Post a Comment