Skip to content

Instantly share code, notes, and snippets.

@DenysNosov
Forked from jsanta/index.html
Created Apr 10, 2020
Embed
What would you like to do?
PWA index.html file for Android and iOS copy & paste enabled
<!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;">&times;</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