jareware/android-wear-browser.md

## android-wear-browser.md

      
    Raw
  

              android-wear-browser.md
            
          
    Android Wear Browser notes


Needs a 3rd party app (there's no platform browser, that is)
Renders fully on the watch

Even if connection to phone is lost (e.g. the watch is on its own), browser app still works

Though annoyingly the browser app disallows launching the browser again if closed


Uses the phone for network communications (over BTLE)
HTML5 AppCache works

Confirmed with all network access (except Bluetooth) shut off from the phone
Seems to be cached on the watch, as AppCache'd resources are available even without connection to phone


There is no window.alert or window.confirm
You can scroll the viewport

up/down/right no issues
left needs care, as a swipe from left-to-right is also the "back" gesture of Wear (i.e. it'll exit the browser)


Touch events work
On my LG G Watch R

the viewport dimensions are reported as 214 x 214
the UA-string is "Mozilla/5.0 (Linux, Android 4.4; G Watch R Build/KNX01R) AppleWebKit/537.36 (KHTML, like Gecko) WIB/0.9.8 Mobile Safari/537.36"
there is a horizontal wiggle of about 2px when scrolling the viewport

even with width=device-width in viewport-meta AND body, html { overflow: hidden } etc
scroll is cancelable with preventDefault() of touchmove, which kills the wiggle, but is otherwise problematic


While the browser is open, the watch won't go to standby mode


## watch-test.appcache
CACHE MANIFEST

# cache-buster = 9287392837

watch-test.html
http://static.flockler.com/assets/futurice/images/futurice-logo--green.svg

## watch-test.html
<!DOCTYPE html>
<html manifest="watch-test.appcache">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, height=device-height" />
    <title>Watch Test</title>
    <style type="text/css">
        body, html {
            text-align: center;
            margin: 0;
            padding: 0;
            width: 200px;
        }
        img {
            width: 200px;
            display: block;
            margin: 0 auto;
        }
        button {
            display: block;
            margin: 0 auto;
            padding: 20px;
        }
    </style>
</head>
<body>

    <!--<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>-->
    <!--<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore.js"></script>-->

    <p id="output">Welcome!</p>

    <button id="viewport">Viewport</button>
    <button id="ua">User-Agent</button>
    <button id="image">Load image</button>

    <script>
        (function() { "use strict";

            function out(text) {
                document.querySelector('#output').textContent = text;
            }

            document.querySelector('#viewport').addEventListener('click', function() {
                // http://stackoverflow.com/a/8876069
                var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
                var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
                out(w + ' x ' + h);
            });

            document.querySelector('#ua').addEventListener('click', function() {
                out(navigator.userAgent);
            });

            document.querySelector('#image').addEventListener('click', function() {
                var img = document.createElement('img');
                img.setAttribute('src', 'http://static.flockler.com/assets/futurice/images/futurice-logo--green.svg');
                document.body.appendChild(img);
            });

            // http://www.html5rocks.com/en/tutorials/appcache/beginner/
            window.addEventListener('load', function() {
                window.applicationCache.addEventListener('updateready', function() {
                    if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
                        out('Update found, reloading...');
                        setTimeout(function() { window.location.reload(); }, 3000);
                    }
                }, false);
            }, false);

        })();

    </script>

</body>
</html>
	CACHE MANIFEST

	# cache-buster = 9287392837

	watch-test.html
	http://static.flockler.com/assets/futurice/images/futurice-logo--green.svg
	<!DOCTYPE html>
	<html manifest="watch-test.appcache">
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, height=device-height" />
	<title>Watch Test</title>
	<style type="text/css">
	body, html {
	text-align: center;
	margin: 0;
	padding: 0;
	width: 200px;
	}
	img {
	width: 200px;
	display: block;
	margin: 0 auto;
	}
	button {
	display: block;
	margin: 0 auto;
	padding: 20px;
	}
	</style>
	</head>
	<body>

	<!--<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>-->
	<!--<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore.js"></script>-->

	<p id="output">Welcome!</p>

	<button id="viewport">Viewport</button>
	<button id="ua">User-Agent</button>
	<button id="image">Load image</button>

	<script>
	(function() { "use strict";

	function out(text) {
	document.querySelector('#output').textContent = text;
	}

	document.querySelector('#viewport').addEventListener('click', function() {
	// http://stackoverflow.com/a/8876069
	var w = Math.max(document.documentElement.clientWidth, window.innerWidth \|\| 0);
	var h = Math.max(document.documentElement.clientHeight, window.innerHeight \|\| 0);
	out(w + ' x ' + h);
	});

	document.querySelector('#ua').addEventListener('click', function() {
	out(navigator.userAgent);
	});

	document.querySelector('#image').addEventListener('click', function() {
	var img = document.createElement('img');
	img.setAttribute('src', 'http://static.flockler.com/assets/futurice/images/futurice-logo--green.svg');
	document.body.appendChild(img);
	});

	// http://www.html5rocks.com/en/tutorials/appcache/beginner/
	window.addEventListener('load', function() {
	window.applicationCache.addEventListener('updateready', function() {
	if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
	out('Update found, reloading...');
	setTimeout(function() { window.location.reload(); }, 3000);
	}
	}, false);
	}, false);

	})();

	</script>

	</body>
	</html>