I am coding a PWA and also using state management. The problem I'm facing is that the first time the user access the page, I am able to store the beforeinstallprompt event and display my customized install button.
The problem is, if the user ignores the install, and reload the pages, the event is not longer caught. Code below:
private deferAppInstall() {
const subscription = this.actions$
.pipe(ofActionDispatched(PwaStateActions.DeferAppInstall))
.subscribe(_ => {
console.log('pipe console ');
window.addEventListener('beforeinstallprompt', event => {
console.log('addEventListener console');
this.pwaStateService.setInstall(true);
this.deferredInstallPrompt = event;
event.preventDefault();
subscription.unsubscribe();
console.log('unsubscribe console');
});
});
}
Basically, the first time everything works, subsequent visits will just present the pipe console log message and not get into the addEventListerner and the rest of the code.
O noticed that when using Chrome Dev Tools, if I go to the Application tab under Application > Clear Storage, and I check ONLY the Unregistered service workers option and clean the cache, and access again the page, everything will work as expected.
At first, I assumed it could be related to cache since I am using state management, but I have no ideia if an event is stored on the cache and if yes, I would not know how to get the beforeinstallprompt event from that cache.
As cleaning the service worker options seemed to "reestablish" the expected behavior, I am looking for a solution where I am able to verify if the event was previously triggered so I can trigger the logic of the above code (or maybe improve it to consider that verification).
