tomayac/manifest-polyfill.html

## manifest-polyfill.html
<!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 manifestEl = document.head.querySelector('link[rel="manifest"][href]');
      if (!manifestEl) {
        return;
      }

      var xhr = new XMLHttpRequest();
      xhr.onload = function() {
        addTags(xhr.response);
      };
      xhr.onerror = function() {
        return;
      };
      xhr.open('GET', manifestEl.href);
      xhr.responseType = 'json';
      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 = /standalone|fullscreen/g.test(manifest.display) ? '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 icon = icons[iconIdx];
          var iconElement = document.createElement('link');
          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>
	<!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 manifestEl = document.head.querySelector('link[rel="manifest"][href]');
	if (!manifestEl) {
	return;
	}

	var xhr = new XMLHttpRequest();
	xhr.onload = function() {
	addTags(xhr.response);
	};
	xhr.onerror = function() {
	return;
	};
	xhr.open('GET', manifestEl.href);
	xhr.responseType = 'json';
	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 = /standalone\|fullscreen/g.test(manifest.display) ? '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 icon = icons[iconIdx];
	var iconElement = document.createElement('link');
	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>