0

I'm currently developing a smart watch (Motorola MOTO 360 1st gen) app prototype with MeteorJS and CrossWalk that has to connect with a remote server to fetch information and alter its visualization based on that. For that, I use XMLHttpRequest. It all works on the PC, as I run the Meteor app on my computer. It connects with my server, and fetches the information.

But on the smart watch with Android Wear, if I log every readyStateChange and write this "log" in the document of the app, I get no further than readyState 4, and status 0. The connection does not open, I do not receive headers and there is no downloading (otherwise, there would be readyState 1, 2 and 3 as well.

I have encountered this problem before, for which I had to change mobile-config.js in order to allow cross-origin access. I added the following code:

App.accessRule('*');

Additionally, I created a manifest.json-file, in which I added the following code (I obscured the actual server domain):

{
  "name": "Watch Proto",
  "start_url": "watch-proto.html",
  "xwalk_hosts": [
    "https://nameofmyserverhe.re/*",
    "http://nameofmyserverhe.re/*"
  ]
}

All of this does not seem to make any difference; I still am unable to connect with my external server, unlike when I run the app on my PC. How can I get XMLHttpRequest to work on my app, on Android Wear?

I have posted the code below:

watch-proto.html

<head>
  <title>watch-proto</title>
    <meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1,width=device.width, height=device.height, user-scalable=no" data-name="viewport">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="manifest" href="/manifest.json" />
</head>

<body class='green'>
  {{> watchNotification  }}
</body>
<template name='watchNotification'>
    <ul id="hour-marks">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    <ul id="marks">
        <li style="transform:rotate(18deg)" class='warning'></li>
        <li style="transform:rotate(60deg)" class='unknown'></li>
        <li style="transform:rotate(270deg)" class='hint'></li>
    </ul>
        <div id="arms">
            <div id="hour"></div>
            <div id="minute"></div>
            <div id="second"></div>
        </div>
        <div id='notification'>
            <div class='content'>
                <div class='overflower'>
                    {{{innerHTML}}}
                </div>
            </div>
            <svg viewBox="0 0 369.9804688 369.9804688" id="kpiPerformance">
                <circle stroke-width="25" cx="184.9902344" cy="184.9902344" r="173" id="circle" fill="rgba(0,0,0,0)"></circle>
            </svg>
        </div>
</template>

mobile-config.js

App.accessRule('*');

manifest.json

{
  "name": "Watch Proto",
  "start_url": "watch-proto.html",
  "xwalk_hosts": [
    "https://nameofmyserverhe.re/*",
    "http://nameofmyserverhe.re/*"
  ]
}

watch-proto.js

if (Meteor.isClient) {
    Meteor.startup(function () {
        var pad = "https://nameofmyserverhe.re/path/to/file.php";
        var xhrTimeout, errorCounter = 0;
        Session.setDefault("innerHTML",infoBase[0]);
        function xhr(pad, Session,infoBase){
            // repeat the function in the callback, after 1000ms
            var xhr = new XMLHttpRequest();
            xhr.open("GET",pad,true,"user","password");
            var xhrLog = "";
            xhr.onreadystatechange = function(ev){
                xhrLog += xhr.readyState+" | "+xhr.responseText+" ("+xhr.status+")<br />";
                if(xhr.readyState == 4){
                    var cl = document.body.classList;
                    if(!cl.contains('notification')){
                        cl.add('notification');
                    }
                    Session.set("innerHTML","<div style='color:#FFF;text-align:center;padding-top:25px;'>"+xhrLog+"</div>");
               }
            }
            xhr.send();
        }
        xhr(pad,Session,infoBase);
    });
    Template.watchNotification.helpers({
        "innerHTML":function(){
            return Session.get("innerHTML");
        }
    });
}
Jeroen
  • 345
  • 3
  • 17
  • 1
    I don't know CrossWalk, but a couple questions immediately occur to me: (1) does your code work on an Android phone (rather than a watch)? (2) Direct network access has limitations on Android Wear. For example, the standard HttpURLConnection class does work, but **only** when the watch isn't connected to the phone via Bluetooth. Obviously, the watch needs an active WiFi connection as well. – Sterling Apr 29 '16 at 22:50
  • Thanks for your comment. I did not know about the limitations, thanks for pointing that out for me. This really seemed to be the showstopper for my prototype. Now that the watch disconnected from my phone overnight, I tried again, and it works now! Thanks! – Jeroen Apr 30 '16 at 09:44
  • 1
    Another point worth mentioning is: make sure you can access the network. Corporate networks and commercial hotspots that have webpage login won't work with smart watches, because they can't open these kind of pages. In my case, this means I should create a WPA2 mobile hotspot myself. It's no problem, but it is good to know. – Jeroen May 02 '16 at 12:05

0 Answers0