Last active
February 27, 2018 17:49
-
-
Save PaulKinlan/c927188139e8fededda22006c6a42f19 to your computer and use it in GitHub Desktop.
Web App Manifest Polyfill for iOS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I've built this into a library now: https://github.com/GoogleChrome/pwacompat