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

View File

@ -1,25 +1,10 @@
"use strict";
const $ = require("jquery");
const socket = require("../socket");
const upload = require("../upload");
const store = require("../store").default;
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) {
store.commit("serverConfiguration", data);