Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Web App Manifest Polyfill for iOS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="manifest" href="https://jsbin-user-assets.s3.amazonaws.com/kinlan/manifest.json">
<title>iOS Manifest Polyfill</title>
</head>
<body>
<script>
(function(){
var xhr = new XMLHttpRequest()
xhr.onload = function() {
var manifestJson = JSON.parse(xhr.responseText);
addTags(manifestJson);
};
var manifestEl = document.head.querySelector("link[rel=manifest]");
if(!!manifestEl === true) {
xhr.open("GET", manifestEl.href);
xhr.send();
}
var addTags = function(manifest) {
var webAppCapable = document.createElement("meta");
var webAppTitle = document.createElement("meta");
var webAppStartUrl = document.createElement("meta");
webAppCapable.setAttribute("name", "apple-mobile-web-app-capable");
var isWebAppCapable = (manifest['display'] == 'standalone' || manifest['display'] == 'fullscreen') ? 'yes' : 'no';
webAppCapable.setAttribute("content", isWebAppCapable);
webAppTitle.setAttribute("name", "apple-mobile-web-app-title");
webAppTitle.setAttribute("content", manifest['short_name'] || manifest['name'] || "");
webAppStartUrl.setAttribute("name", "msapplication-starturl");
webAppStartUrl.setAttribute("content", manifest['start_url'] || location.href);
// Parse the icons.
var icons = manifest["icons"] || [];
for(var iconIdx = 0; iconIdx < icons.length; iconIdx++) {
var iconElement = document.createElement("link");
var icon = icons[iconIdx];
iconElement.setAttribute("rel", "apple-touch-icon");
iconElement.setAttribute("href", icon.src);
iconElement.setAttribute("sizes", icon.sizes);
document.head.appendChild(iconElement);
}
document.head.appendChild(webAppCapable);
document.head.appendChild(webAppTitle);
document.head.appendChild(webAppStartUrl);
}
})();
// This all simulates the start URL.
(function() {
var startUrlEl = document.querySelector("meta[name=msapplication-starturl]");
if(!!startUrlEl === true && navigator.standalone === true) {
var lastUrl = localStorage["navigate"];
history.pushState({launched: (!!lastUrl == false && history.length === 1)}, undefined, lastUrl || startUrlEl.content);
localStorage.removeItem("navigate");
// Intercept all anchor clicks and keep fullscreen if in origin
document.addEventListener("click", function(e) {
var target = e.target;
if(target.tagName === 'A') {
var href = target.getAttribute("href");
var linkedUrl = new URL(target.href);
if(linkedUrl.origin === location.origin) {
e.preventDefault();
location.href = href;
}
else {
// When we are navigating away store the state so we can resume.
localStorage["navigate"] = location.href;
}
}
});
}
})();
</script>
</body>
</html>
@samthor

This comment has been minimized.

Copy link

samthor commented Jul 13, 2016

I've built this into a library now: https://github.com/GoogleChrome/pwacompat

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.