-
-
Save appel/5680bfc3fa73cb349d602a8a60807132 to your computer and use it in GitHub Desktop.
PWA index.html file for Android and iOS copy & paste enabled
This file contains 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 lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Ionic App</title> | |
| <base href="/" /> | |
| <meta | |
| name="viewport" | |
| content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" | |
| /> | |
| <meta name="format-detection" content="telephone=no" /> | |
| <meta name="msapplication-tap-highlight" content="no" /> | |
| <link rel="icon" type="image/png" href="assets/icon/favicon.png" /> | |
| <link rel="manifest" href="manifest.json"> | |
| <meta name="theme-color" content="#4e8ef7"> | |
| <meta name="apple-mobile-web-app-capable" content="yes" /> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="black" /> | |
| <style> | |
| .ad2hs-prompt { | |
| background-color: rgb(59, 134, 196); /* Blue */ | |
| border: none; | |
| display: none; | |
| color: white; | |
| padding: 15px 32px; | |
| text-align: center; | |
| text-decoration: none; | |
| font-size: 16px; | |
| position: absolute; | |
| margin: 0 1rem 1rem; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| width: calc(100% - 32px); | |
| } | |
| .ios-prompt { | |
| background-color: #fcfcfc; | |
| border: 1px solid #666; | |
| display: none; | |
| padding: 0.8rem 1rem 0 0.5rem; | |
| text-decoration: none; | |
| font-size: 16px; | |
| color: #555; | |
| position: absolute; | |
| margin: 0 auto 1rem; | |
| left: 1rem; | |
| right: 1rem; | |
| bottom: 0; | |
| } | |
| </style> | |
| <link rel="stylesheet" href="styles.css"></head> | |
| <body> | |
| <app-root></app-root> | |
| <button type="button" class="ad2hs-prompt">Install Web App</button> | |
| <div class="ios-prompt"> | |
| <span style="color: rgb(187, 187, 187); float: right; margin-top: -14px; margin-right: -11px;">×</span> | |
| <img src="assets/imgs/add2home.svg" style="float: left; height: 80px; width: auto; margin-top: -8px; margin-right: 1rem;"> | |
| <p style="margin-top: -3px; line-height: 1.3rem;">To install this Web App in your iPhone/iPad press <img src="assets/imgs/share.svg" style="display: inline-block; margin-top: 4px; margin-bottom: -4px; height: 20px; width: auto;"> and then Add to Home Screen.</p> | |
| </div> | |
| <script type="text/javascript" src="runtime.js"></script> | |
| <script type="text/javascript" src="polyfills.js"></script> | |
| <script type="text/javascript" src="main.js"></script> | |
| <script type="text/javascript"> | |
| if ('serviceWorker' in navigator) { | |
| navigator.serviceWorker.register('service-worker.js') | |
| .then(() => console.log('service worker installed')) | |
| .catch(err => console.error('Error', err)); | |
| } | |
| function addToHomeScreen() { | |
| let a2hsBtn = document.querySelector(".ad2hs-prompt"); // hide our user interface that shows our A2HS button | |
| a2hsBtn.style.display = 'none'; // Show the prompt | |
| deferredPrompt.prompt(); // Wait for the user to respond to the prompt | |
| deferredPrompt.userChoice | |
| .then(function(choiceResult){ | |
| if (choiceResult.outcome === 'accepted') { | |
| console.log('User accepted the A2HS prompt'); | |
| } else { | |
| console.log('User dismissed the A2HS prompt'); | |
| } | |
| deferredPrompt = null; | |
| });} | |
| function showAddToHomeScreen() { | |
| let a2hsBtn = document.querySelector(".ad2hs-prompt"); | |
| a2hsBtn.style.display = "block"; | |
| a2hsBtn.addEventListener("click", addToHomeScreen); | |
| } | |
| let deferredPrompt; | |
| window.addEventListener('beforeinstallprompt', function (e) { | |
| // Prevent Chrome 67 and earlier from automatically showing the prompt | |
| e.preventDefault(); | |
| // Stash the event so it can be triggered later. | |
| deferredPrompt = e; | |
| showAddToHomeScreen(); | |
| }); | |
| function showIosInstall() { | |
| let iosPrompt = document.querySelector(".ios-prompt"); | |
| iosPrompt.style.display = "block"; | |
| iosPrompt.addEventListener("click", () => { | |
| iosPrompt.style.display = "none"; | |
| }); | |
| } | |
| // Detects if device is on iOS | |
| const isIos = () => { | |
| const userAgent = window.navigator.userAgent.toLowerCase(); | |
| return /iphone|ipad|ipod/.test( userAgent ); | |
| } | |
| // Detects if device is in standalone mode | |
| const isInStandaloneMode = () => ('standalone' in window.navigator) && (window.navigator.standalone); | |
| // Checks if should display install popup notification: | |
| if (isIos() && !isInStandaloneMode()) { | |
| // this.setState({ showInstallMessage: true }); | |
| showIosInstall(); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment