Customize install prompt behavior

This commit is contained in:
RobinLinus 2019-03-14 20:05:25 +01:00
parent b788898134
commit ef77ffb534
2 changed files with 21 additions and 0 deletions

View file

@ -44,6 +44,11 @@
<use xlink:href="#notifications" /> <use xlink:href="#notifications" />
</svg> </svg>
</a> </a>
<a href="#" id="install" class="icon-button" title="Add to Homescreen" hidden>
<svg class="icon">
<use xlink:href="#install" />
</svg>
</a>
</header> </header>
<!-- Peers --> <!-- Peers -->
<x-peers class="center"></x-peers> <x-peers class="center"></x-peers>
@ -173,6 +178,11 @@
<g id="notifications"> <g id="notifications">
<path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z" /> <path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z" />
</g> </g>
<g id="install">
<path fill="none" d="M0 0h24v24H0V0z" />
<path d="M18 1.01L8 1c-1.1 0-2 .9-2 2v3h2V5h10v14H8v-1H6v3c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM10 15h2V8H5v2h3.59L3 15.59 4.41 17 10 11.41z" />
<path fill="none" d="M0 0h24v24H0V0z" />
</g>
</svg> </svg>
<!-- Scripts --> <!-- Scripts -->
<script src="scripts/network.js"></script> <script src="scripts/network.js"></script>

View file

@ -527,6 +527,17 @@ if ('serviceWorker' in navigator) {
window.addEventListener('beforeinstallprompt', e => { window.addEventListener('beforeinstallprompt', e => {
if (window.matchMedia('(display-mode: standalone)').matches) { if (window.matchMedia('(display-mode: standalone)').matches) {
return event.preventDefault(); return event.preventDefault();
} else {
const deferredPrompt = e;
const btn = document.querySelector('#install')
btn.hidden = false;
btn.onclick = _ => {
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
deferredPrompt.userChoice.then((resp) => {
console.log(JSON.stringify(resp));
});
}
} }
}); });
} }