diff --git a/app/assets/javascripts/discourse/components/pwa-install-banner.js.es6 b/app/assets/javascripts/discourse/components/pwa-install-banner.js.es6 new file mode 100644 index 00000000000..069660ab618 --- /dev/null +++ b/app/assets/javascripts/discourse/components/pwa-install-banner.js.es6 @@ -0,0 +1,62 @@ +import { + default as computed, + on +} from "ember-addons/ember-computed-decorators"; + +const USER_DISMISSED_PROMPT_KEY = "dismissed-pwa-install-banner"; + +export default Ember.Component.extend({ + deferredInstallPromptEvent: null, + + _handleInstallPromptEvent(event) { + // Prevent Chrome 76+ from automatically showing the prompt + event.preventDefault(); + // Stash the event so it can be triggered later + this.set("deferredInstallPromptEvent", event); + }, + + @on("didInsertElement") + _registerListener() { + this._promptEventHandler = Ember.run.bind( + this, + this._handleInstallPromptEvent + ); + window.addEventListener("beforeinstallprompt", this._promptEventHandler); + }, + + @on("willDestroyElement") + _unregisterListener() { + window.removeEventListener("beforeinstallprompt", this._promptEventHandler); + }, + + @computed + bannerDismissed: { + set(value) { + this.keyValueStore.set({ key: USER_DISMISSED_PROMPT_KEY, value }); + return this.keyValueStore.get(USER_DISMISSED_PROMPT_KEY); + }, + get() { + return this.keyValueStore.get(USER_DISMISSED_PROMPT_KEY); + } + }, + + @computed("deferredInstallPromptEvent", "bannerDismissed") + showPWAInstallBanner() { + return ( + this.get("currentUser.trust_level") > 0 && + this.deferredInstallPromptEvent && // Pass the browser engagement checks + !window.matchMedia("(display-mode: standalone)").matches && // Not be in the installed PWA already + !this.bannerDismissed // Have not a previously dismissed install banner + ); + }, + + actions: { + turnOn() { + this.set("bannerDismissed", true); + this.deferredInstallPromptEvent.prompt(); + }, + dismiss() { + this.set("bannerDismissed", true); + } + } +}); diff --git a/app/assets/javascripts/discourse/templates/application.hbs b/app/assets/javascripts/discourse/templates/application.hbs index f0dbf0d29fc..437754ce7b6 100644 --- a/app/assets/javascripts/discourse/templates/application.hbs +++ b/app/assets/javascripts/discourse/templates/application.hbs @@ -16,6 +16,7 @@ {{custom-html name="top"}} {{/if}} {{notification-consent-banner}} + {{pwa-install-banner}} {{global-notice}} {{create-topics-notice}} {{plugin-outlet name="top-notices" args=(hash currentPath=router._router.currentPath)}} diff --git a/app/assets/javascripts/discourse/templates/components/pwa-install-banner.hbs b/app/assets/javascripts/discourse/templates/components/pwa-install-banner.hbs new file mode 100644 index 00000000000..d0391747eac --- /dev/null +++ b/app/assets/javascripts/discourse/templates/components/pwa-install-banner.hbs @@ -0,0 +1,12 @@ +{{#if showPWAInstallBanner}} +