Skip to content

Instantly share code, notes, and snippets.

@jsanta
Last active October 31, 2023 15:41
Show Gist options
  • Save jsanta/9745813617f78bc6a21ce5a24fb0039e to your computer and use it in GitHub Desktop.
Save jsanta/9745813617f78bc6a21ce5a24fb0039e to your computer and use it in GitHub Desktop.
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>
@dolivervl
Copy link

The function showIosInstall no has action, how install on IOS ?

@jsanta
Copy link
Author

jsanta commented Dec 9, 2019

Hi, thank you this looks great. Dont suppose you have the share.svg and ad2hs.svg files??

Hi @magicry . Yes indeed. I suppose you got here from the article in Medium . Both SVGs are linked at the end of the article:

@jsanta
Copy link
Author

jsanta commented Dec 9, 2019

The function showIosInstall no has action, how install on IOS ?

Hi @dolivervl . The showOIosInstall in fact doen nothing but displaying an HTML block with some instructions. This is because at the time the article was written (haven't checked if this has changed) IOS had no support for PWAs. But IOS does support installing a website as if it were an application.
Please refer to the article in Medium for further information.
Best regards.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment