crisp-im / crisp-sdk-web

:package: Include the Crisp chat widget from using frameworks such as React, VueJS, Angular...
https://www.npmjs.com/package/crisp-sdk-web
MIT License
40 stars 13 forks source link

Crisp uses the mediadevices API which busts the Chrome bfcache #17

Open mayrsascha opened 1 year ago

mayrsascha commented 1 year ago

Hi Crisp Team,

I'm using the Crisp widget on a couple of my websites. I recently ran a Google Lighthouse check on one of them, and on all pages, I got the same issue:

image

If I understand correctly, DevTools is referring to this API.

By using the "Search" tool of Chrome Devtools I found that apparently only the Crisp chat widget is utilizing that API.

Please have a look, as this could potentially seriously impact cache performance for every page using your widget.

baptistejamin commented 1 year ago

It’s right we are using this API, however it is only enabled when a user requests a call or records an audio message. So most users are not impacted at all Sent from my iPhoneOn 15 May 2023, at 16:36, Sascha Mayr @.***> wrote: Hi Crisp Team, I'm using the Crisp widget on a couple of my websites. I recently ran a Google Lighthouse check on one of them, and on all pages, I got the same issue:

If I understand correctly, DevTools is referring to this API. By using the "Search" tool of Chrome Devtools I found that apparently only the Crisp chat widget is utilizing that API. Please have a look, as this could potentially seriously impact cache performance for every page using your widget.

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you are subscribed to this thread.Message ID: @.***>

mayrsascha commented 1 year ago

@baptistejamin Thank you for your quick reply. Are you sure that it doesn't impact the performance? Lighthouse specifically mentions that the bfcache (cached pages when the user goes back and forward with browser buttons) is found to be disabled through the presence of this API in the code and it wasn't even testing calls or audio messages with Crisp, just the simple page load Lighthouse test.

baptistejamin commented 1 year ago

I think lighthouse just performs a regex test on the media device apis Sent from my iPhoneOn 15 May 2023, at 17:07, Sascha Mayr @.***> wrote: @baptistejamin Thank you for your quick reply. Are you sure that it doesn't impact the performance? Lighthouse specifically mentions that the bfcache (cached pages when the user goes back and forward with browser buttons) is found to be disabled through the presence of this API in the code and it wasn't even testing calls or audio messages with Crisp, just the simple page load Lighthouse test.

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: @.***>

mayrsascha commented 1 year ago

@baptistejamin I did some further research and actually this can be tested also directly without Lighthouse, there is a special tool in dev tools that navigates back to chrome://terms and forward and specifically checks if the bfcache is being used.

I tried it on my page and it shows that it's not being used:

image
anshuman-aaa commented 8 months ago

Hi @baptistejamin ,

Any updates on addressing this issue? We're currently working on enabling bfcache on our website, and it appears that the Media API is causing some compatibility issues. We noticed that when we removed Crisp Chat from one of our temporary instances for verification, bfcache started working as expected.

Thanks for your assistance.