Fix web app install button

This commit is contained in:
Pavel Djundik 2019-11-15 21:13:26 +02:00
parent fcf7488e1e
commit b2cc8d9531
2 changed files with 25 additions and 18 deletions

View File

@ -20,13 +20,18 @@
</div> </div>
<div class="row"> <div class="row">
<div v-if="canRegisterProtocol" id="native-app" class="col-sm-12"> <div v-if="canRegisterProtocol || hasInstallPromptEvent" class="col-sm-12">
<h2>Native app</h2> <h2>Native app</h2>
<button id="webapp-install-button" type="button" class="btn" hidden> <button
v-if="hasInstallPromptEvent"
type="button"
class="btn"
@click.prevent="nativeInstallPrompt"
>
Add The Lounge to Home screen Add The Lounge to Home screen
</button> </button>
<button <button
id="make-default-client" v-if="canRegisterProtocol"
type="button" type="button"
class="btn" class="btn"
@click.prevent="registerProtocol" @click.prevent="registerProtocol"
@ -455,6 +460,13 @@ import RevealPassword from "../RevealPassword.vue";
import Session from "../Session.vue"; import Session from "../Session.vue";
import SidebarToggle from "../SidebarToggle.vue"; import SidebarToggle from "../SidebarToggle.vue";
let installPromptEvent = null;
window.addEventListener("beforeinstallprompt", (e) => {
e.preventDefault();
installPromptEvent = e;
});
export default { export default {
name: "Settings", name: "Settings",
components: { components: {
@ -475,6 +487,12 @@ export default {
}, },
}; };
}, },
computed: {
hasInstallPromptEvent() {
// TODO: This doesn't hide the button after clicking
return installPromptEvent !== null;
},
},
mounted() { mounted() {
socket.emit("sessions:get"); socket.emit("sessions:get");
@ -542,6 +560,10 @@ export default {
window.navigator.registerProtocolHandler("irc", uri, "The Lounge"); window.navigator.registerProtocolHandler("irc", uri, "The Lounge");
window.navigator.registerProtocolHandler("ircs", uri, "The Lounge"); window.navigator.registerProtocolHandler("ircs", uri, "The Lounge");
}, },
nativeInstallPrompt() {
installPromptEvent.prompt();
installPromptEvent = null;
},
playNotification() { playNotification() {
const pop = new Audio(); const pop = new Audio();
pop.src = "audio/pop.wav"; pop.src = "audio/pop.wav";

View File

@ -1,25 +1,10 @@
"use strict"; "use strict";
const $ = require("jquery");
const socket = require("../socket"); const socket = require("../socket");
const upload = require("../upload"); const upload = require("../upload");
const store = require("../store").default; const store = require("../store").default;
const router = require("../router"); const router = require("../router");
window.addEventListener("beforeinstallprompt", (installPromptEvent) => {
$("#webapp-install-button")
.on("click", function() {
if (installPromptEvent && installPromptEvent.prompt) {
installPromptEvent.prompt();
}
$(this).prop("hidden", true);
})
.prop("hidden", false);
$("#native-app").prop("hidden", false);
});
socket.once("configuration", function(data) { socket.once("configuration", function(data) {
store.commit("serverConfiguration", data); store.commit("serverConfiguration", data);