Registers an unload listener after run Lighthouse with Angular application

Question

I performed a test using Lighthouse and returned the issue -> Registers an unload listener

The unload event does not fire reliably and listening for it can prevent browser optimizations like the Back-Forward Cache. Consider using the pagehide or visibilitychange events instead. URL -> polyfills.js: 1747

polyfills

chunk {11} polyfills-es5.490b14415b7cca5be47f.js (polyfills-es5) 129 kB [initial] [rendered]
chunk {10} polyfills-es2015.35d05f7e533d01d161a7.js (polyfills) 36.2 kB [initial] [rendered]

Ionic:
   Ionic CLI                     : 5.4.16
   Ionic Framework               : @ionic/angular 5.0.7
   @angular-devkit/build-angular : 0.1002.0
   @angular-devkit/schematics    : 10.1.7
   @angular/cli                  : 10.0.1
   @ionic/angular-toolkit        : 2.3.3

Cordova:
   Cordova CLI       : 10.0.0
   Cordova Platforms : 6.0.0, android 8.1.0, browser, ios 5.1.1
   Cordova Plugins   : not available

Utility:
   cordova-res : not installed
   native-run  : not installed

System:
   NodeJS : v14.15.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.8
   OS     : Windows 10

This is my first APP, I am new on developing and I did not find a solution for this issue. How can I apply unload event inside polyfills?

Answer 1

Possible reason is that one of the 3rd party library installed in your application is making this call. This issue has been discussed on Angular GitHub repository, and they have confirmed that this call is not coming from Angular directly. Culprit could be fbevents.js (if you are using fb tracking) or if you are using window.onunload event yourself in your application.

How to find what is the cause of this -> Go to Sources tab, on right click on "top" and select "Search in all files".

Type addEventListener("unload" This should tell you what is actually causing this issue.

Answer 2

TLDR: Make sure to double-check lighthouse results with production deployment.

I found that my Angular/Ionic App was registering this event listener while I was development testing with localhost, but the lighthouse did not diagnose the problem in my production deployment.

It would make sense if this event listener is part of the list of event listeners/ features that are only used by Angular to help with development/ debugging/ live-reloading etc, but removed when building a production version.