Implement A2HS functionality

This commit is contained in:
Mark Veidemanis 2022-08-05 08:40:35 +01:00
parent 8e0385e809
commit cfb22d5d06
Signed by: m
GPG Key ID: 5ACFCEED46C0904F
3 changed files with 48 additions and 0 deletions

BIN
core/static/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

View File

@ -0,0 +1,15 @@
{
"background_color": "white",
"description": "Search for anything.",
"display": "fullscreen",
"icons": [
{
"src": "/static/logo.png",
"sizes": "800x800",
"type": "image/png"
}
],
"name": "Pathogen Data Analytics",
"short_name": "Pathogen",
"start_url": "/"
}

View File

@ -8,6 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pathogen - {{ request.path_info }}</title>
<link rel="shortcut icon" href="{% static 'favicon.ico' %}">
<link rel="manifest" href="{% static 'manifest.webmanifest' %}">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@creativebulma/bulma-tooltip@1.2.0/dist/bulma-tooltip.min.css">
<link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.1.1/css/all.css">
@ -121,6 +122,9 @@
</a>
{% endif %}
{% endif %}
<a class="navbar-item add-button">
Install
</a>
</div>
<div class="navbar-end">
@ -145,6 +149,35 @@
</div>
</div>
</nav>
<script>
let deferredPrompt;
const addBtn = document.querySelector('.add-button');
addBtn.style.display = 'none';
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent Chrome 67 and earlier from automatically showing the prompt
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
// Update UI to notify the user they can add to home screen
addBtn.style.display = 'block';
addBtn.addEventListener('click', (e) => {
// hide our user interface that shows our A2HS button
addBtn.style.display = 'none';
// Show the prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
deferredPrompt.userChoice.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
deferredPrompt = null;
});
});
});
</script>
<section class="section">
<div class="container">
{% block content %}