CODEWITHSUNDEEP
androidhtmlcordovaphonegap-buildpolymer-1.0
Soumya Banerjee
Soumya Banerjee

Reputation: 11

POLYMER : Cannot view polymer element in android device

I was trying to build a sample app through phonegap(3.7)(build.phonegap.com) made using polymer(0.5).The build was successful.

However, when I installed the app in my android(v4.4+) device, I could not see the polymer element(I just inserted a <paper-checkbox> to test). All other simple HTML elements were rendered normally.

I read about the android webview support of HTML import, so I tried to vulcanize the index.html, but it didn't help. But I can see the polymer element by running the python SimpleHTTPServer on my laptop, and there's no error in the browser javascript console (other than failed to load resource.. cordova.js).

Here's the index.html (non-vulcanized version) I have created:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

    <link rel="stylesheet" type="text/css" href="css/index.css" />     
    <link rel="import" href="res/bower_components/paper-checkbox/paper-checkbox.html">

    <script type="text/javascript" src="res/bower_components/webcomponentsjs/webcomponents.js"></script>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>

</head>
<body>
    <div class="app">
        <h1>PhoneGap</h1>
        <div id="deviceready" class="blink">
           <h3>POLYMER!</h3>
        </div>
        <br>
            <p>Introducing Polymer element next...</p>
            <hr>
            <paper-checkbox></paper-checkbox> This is a polymer checkbox
            <hr>
    </div>



    <script type="text/javascript">
        app.initialize();
    </script>
</body>

Here is the directory structure of the project

Is there anything I'm missing?? Please help. Thanks!

Regards, Soumya

Upvotes: 1

Views: 446

Answers (1)

nww04
nww04

Reputation: 1857

I saw this issue in from a library that uses Polymer in github. It says its not supporting devices below Android 4.4 (Probably). I am trying to integrate with Cordova Crosswalk and see if I can get it to work. The stock browsers from lower version of Android before 4.4 are really crappy. I am really having hard time making my web apps work on lower-end devices.

Some issues like abysmally slow js performance, exceptions, bugs are rampant on older webviews. What we can do for now is to wrap our app using a different webview such as using Cordova with Crosswalk as also suggested from the link I provided above.

Hope this helps.

Upvotes: 0

Related Questions