Mimicking Pokemon Go’s Battery Saver Mode on the Web

So here’s a fun but useless trick: mimicking Pokemon Go’s battery saver mode on the web. For the few who missed the craze, Pokemon Go dims your phone’s screen when you turn it upside-down. With the game being something of a battery hog, this can save you precious charge as you walk from one PokeStop to the next, phone in hand. I do appreciate how frictionless and natural this feature is.

So how might we mimic this on the web? Start by creating your overlay, and adding your favicon to the overlay if one is available.


document.addEventListener('DOMContentLoaded', function () {
var favicon = getFavicon();
var node = document.createElement('div');
var child = document.createElement('div');

node.id = 'overlay';

if (favicon) {
child.style.backgroundImage = 'url(' + favicon + ')';
node.appendChild(child);
}

document.body.appendChild(node);
});

var getFavicon = function() {
var nodes = document.getElementsByTagName('link');

for (var i = 0; i < nodes.length; i++) {
var rel = nodes[i].getAttribute('rel');

if (rel == 'apple-touch-icon-precomposed' || rel == 'apple-touch-icon' || rel == 'icon' || rel == 'shortcut icon') {
return nodes[i].getAttribute('href');
}
}
};


Next, listen for the orientationchange event and toggle the overlay on if orientation has a value of portrait-secondary, meaning upside-down.


window.addEventListener("orientationchange", function() {
var orientation = screen.orientation || screen.mozOrientation || screen.msOrientation;
var node = document.getElementById('overlay');

if (orientation && orientation.type === 'portrait-secondary') {
node.classList = 'on';
} else {
node.classList = '';
}
});


Lastly, style your overlay.


#overlay {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #000;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s;
}

#overlay > div {
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: 200px 200px;
filter: grayscale(100%);
opacity: 0.15;
}

#overlay.on {
pointer-events: auto;
opacity: 1;
}


And there you have it.

So why is this so useless? First, support for orientation is spotty. Safari, for example, doesn’t support it. Second, while native apps like Pokemon Go actually decrease the display’s brightness, web apps can only mimic this with a black screen, saving no power at all on iPhone and other LCD displays.

But with the growing adoption of AMOLED displays, which do save battery with black pixels, maybe this will go from totally useless to mostly useless.