TW-1887: improve notification permission request on web

[Te-Z]

Ticket

Related issue

Root cause

If this is a bug, please provide a brief description of the root cause of the issue
On web the notification permission was asked when the app starts. But for some browsers it should be on an action of the user.
Also sound can't be played on some browsers causing exception before displaying the notification.

Solution

Outline the implemented solution, detailing the changes made and how they address the issue
For sound a try catch has been added to avoid to be stuck.
The notification permission is asked when clicked on chat list item but still also when starting the app for browsers who can handle it.

But the notification display conditions changes from one browser to an other.

Test recommendations

Recommendations for how to test this, or anything else you are worried about?

• Test on all browsers
• With the browser on foreground without being on the room where you will receive message
• With the browser on background

Pre-merge

Does anything else need to be done before merging?
no

Resolved

Attach screenshots or videos demonstrating the changes

• Web:
  Opera (only sounds, notification display when the browser is closing.. will try to handle this later)

ici.webm

Chromium

Capture.video.du.17-07-2024.08.52.16.webm

Chrome

Capture.video.du.17-07-2024.08.50.16.webm

Edge

Capture.video.du.17-07-2024.08.39.49.webm

Firefox

Capture.video.du.17-07-2024.08.37.15.webm

[github-actions]

This PR has been deployed to https://linagora.github.io/twake-on-matrix/1954

[nqhhdev]

• Pls check case: When open link /rooms/roomId => User can click on chat screen then request permission as well.

[KhaledNjim]

Tested on edge, firefox and chrome worked well in my case

[nqhhdev]

I tested on Firefox, can't show pop-up request notification permission

Screen.Recording.2024-07-19.at.13.31.26.mov

[Te-Z]

I tested on Firefox, can't show pop-up request notification permission

Screen.Recording.2024-07-19.at.13.31.26.mov

Yes @nqhhdev this is because notifications are already allowed on your test.
But I can confirm it works

[hoangdat]

It is an improvement for notification in web only, not a fix for receive notificaiton. IMO, please update the title to more precise to prevent confuse when we need to trace back.
Moreover, we can not sure the problem of notification in mobile will not comeback. @Te-Z

[nqhhdev]

Hi @Te-Z pls check all comments

[Te-Z]

done @nqhhdev @sherlockvn