-
-
Save tomayac/e603424468a298b0054a38ffa8582318 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 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment