Delay creating the `Favico` instance

This avoids a canvas permission prompt from appearing on page load for users in
Firefox's resist fingerprinting mode. The prompt will still happen once you log
in and receive a notification, but at least this prevents it from happening
during the initial app experience.

Fixes https://github.com/vector-im/riot-web/issues/9605
This commit is contained in:
J. Ryan Stinnett 2019-05-02 13:29:25 +01:00
parent 989b75502c
commit d4de7f5df3
1 changed files with 18 additions and 7 deletions

View File

@ -39,14 +39,7 @@ export default class VectorBasePlatform extends BasePlatform {
constructor() { constructor() {
super(); super();
// The 'animations' are really low framerate and look terrible.
// Also it re-starts the animation every time you set the badge,
// and we set the state each time, even if the value hasn't changed,
// so we'd need to fix that if enabling the animation.
this.favicon = new Favico({animation: 'none'});
this.showUpdateCheck = false; this.showUpdateCheck = false;
this._updateFavicon();
this.startUpdateCheck = this.startUpdateCheck.bind(this); this.startUpdateCheck = this.startUpdateCheck.bind(this);
this.stopUpdateCheck = this.stopUpdateCheck.bind(this); this.stopUpdateCheck = this.stopUpdateCheck.bind(this);
} }
@ -55,6 +48,24 @@ export default class VectorBasePlatform extends BasePlatform {
return 'Vector Base Platform'; // no translation required: only used for analytics return 'Vector Base Platform'; // no translation required: only used for analytics
} }
/**
* Delay creating the `Favico` instance until first use (on the first notification) as
* it uses canvas, which can trigger a permission prompt in Firefox's resist
* fingerprinting mode.
* See https://github.com/vector-im/riot-web/issues/9605.
*/
get favicon() {
if (this._favicon) {
return this._favicon;
}
// The 'animations' are really low framerate and look terrible.
// Also it re-starts the animation every time you set the badge,
// and we set the state each time, even if the value hasn't changed,
// so we'd need to fix that if enabling the animation.
this._favicon = new Favico({ animation: 'none' });
return this._favicon;
}
_updateFavicon() { _updateFavicon() {
try { try {
// This needs to be in in a try block as it will throw // This needs to be in in a try block as it will throw