[$250] Notification – Have no sound for notification received

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.72-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team

Action Performed:

1. Go to https://staging.new.expensify.com/
2. Log in as user A
3. Open chat with user B
4. As user B send message to user A
5. Notice that user A receive a notification

Expected Result:

Notification is with sound

Actual Result:

Notification is without sound

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

View all open jobs on GitHub

Bug6686403_1733490528944.bandicam_2024-12-06_15-16-13-138.mp4

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021866271667566111224
• Upwork Job ID: 1866271667566111224
• Last Price Increase: 2024-12-10

Issue Owner

Current Issue Owner: @jayeshmangwani

[melvin-bot]

Triggered auto assignment to @RachCHopkins (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[RachCHopkins]

Can repro!

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021866271667566111224

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @jayeshmangwani (External)

[JoshIri360]

Edited by proposal-police: This proposal was edited at 2024-12-24 09:19:58 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue

Browser notifications for new messages in New Expensify are currently playing without sound, when they should play a notification sound to alert users of new messages.

What is the root cause of that problem?

The root cause is twofold:

1. The showCommentNotification method was setting silent: true by default
2. There was no sound playback implementation even when notifications weren't silent

What changes do you think we should make in order to solve the problem?

We need to make two key changes:

1. In BrowserNotifications.ts, change the showCommentNotification to use silent: false:

showCommentNotification(report: Report, reportAction: ReportAction, onClick: LocalNotificationClickHandler) {
    // ... existing code ...
    push(title, body, icon, data, onClick, false);
},

2. Add sound playback in the push function:

function push(
    title: string,
    body: string,
    icon: string,
    data: LocalNotificationData,
    onClick: LocalNotificationClickHandler,
    silent: boolean,
) {
    // ... existing code ...

    // Play notification sound if not silent
    if (!silent) {
        playSound(SOUNDS.RECEIVE);
    }

    // Continue with notification creation
    const notificationID = Str.guid();
    // ... rest of existing code ...
}

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore? (Optional)

adding silent: true to the new Notification.

notificationCache[notificationID] = new Notification(title, {
        body,
        icon: String(icon),
        data,
        silent: true,
        tag,
});

If this is a bug from the Chrome web browser and it's fixed, we could expect double notifications but with this, only our custom sound via playSound(SOUNDS.RECEIVE) will play and the default browser notification sound will be suppressed.

Result (Sound on)

Recording.at.2024-12-12.00.22.41.mp4

[truph01]

Proposal

Please re-state the problem that we are trying to solve in this issue.

• Notification is without sound

What is the root cause of that problem?

• In web, if we want to show notification with sound, we call something like:

        new Notification(title, {
            silent: false,
        });

The silent read-only property of the Notification interface specifies whether the notification should be silent, i.e., no sounds or vibrations should be issued regardless of the device settings. This is controlled via the silent option of the Notification() constructor.

• But the Chrome notification sounds stopped working on MacBook, this bug are reported in here. In Safari, it still works well.

• Even if the above issue is fixed, the notification still cannot have sound in case the message is not the modified expense message because we are usiing silent: true in:

App/src/libs/Notification/LocalNotification/BrowserNotifications.ts

Line 125 in 082e14b

push(title, body, icon, data, onClick, true);

The 6th param is true.

What changes do you think we should make in order to solve the problem?

1. Solution to fix the 1st problem, where the notification sound does not work in macOS Chrome:

• Since this issue occurs only on macOS Chrome and not on all platforms, we should consistently use silent: true and play our custom sound separately. Why always use silent: true? If we set silent: false in Safari (where the issue doesn't occur), the notification will produce two sounds: the default sound triggered by silent: false and our custom sound. This duplication can lead to an undesirable user experience.

Based on that, the logic:

App/src/libs/Notification/LocalNotification/BrowserNotifications.ts

Lines 64 to 70 in 082e14b

	notificationCache[notificationID] = new Notification(title, {
	body,
	icon: String(icon),
	data,
	silent,
	tag,
	});

can be:

        notificationCache[notificationID] = new Notification(title, {
            body,
            icon: String(icon),
            data,
            silent: true,
            tag,
        });
        if (!silent) {
            playSound(SOUNDS.RECEIVE); // The sound can be decided later.
        }

2. Solution to fix the 2nd problem, has no sound when the message received is not expense modified message.

• We just need to update the 6th param in:

App/src/libs/Notification/LocalNotification/BrowserNotifications.ts

Line 125 in 082e14b

push(title, body, icon, data, onClick, true);

from true to false, or just need to remove that param since its default value is already false.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

• We need to create a test for the function push with the two test cases are when the silent param is true or false. If it is false, need to make sure there is no sound is triggred.

What alternative solutions did you explore? (Optional)

• In MacOS Chrome, we call:

        if (!silent) {
            playSound(SOUNDS.RECEIVE); // The sound can be decided later.
        }

• With other platforms, leave it as it is.

        if (!silent && Browser.getBrowser() === CONST.BROWSER.CHROME && !Browser.isMobile()) {
            // Play custom sound here
        }

[melvin-bot]

@RachCHopkins, @jayeshmangwani Whoops! This issue is 2 days overdue. Let's get this updated quick!

[jayeshmangwani]

Not overdue, testing the above 2 proposals

[jayeshmangwani]

@JoshIri360 and @truph01 , did you receive the notification sound on desktop in the current version?

[JoshIri360]

No I didn't, tested in chrome and safari.

[jayeshmangwani]

No I didn't, tested in chrome and safari.

Thanks! So we don’t get sound on the web (Chrome + Safari) or desktop either, right? Just confirming so I can test solutions on those platforms.

[JoshIri360]

No I didn't, tested in chrome and safari.

Thanks! So we don’t get sound on the web (Chrome + Safari) or desktop either, right? Just confirming so I can test solutions on those platforms.

Yes, exactly.

[truph01]

@jayeshmangwani In Macos Safari, it works well. The issue only appears in Macos Chrome. But you need to hard-code the 6th param to false:

App/src/libs/Notification/LocalNotification/BrowserNotifications.ts

Line 125 in 082e14b

push(title, body, icon, data, onClick, true);

before testing the sound notification if you want the sound is triggered by sending a message.

[jayeshmangwani]

Thanks for the explanation @truph01. I feel that your proposal is quite similar to @JoshIri360, I’ve already tested their proposal, and it works fine on Safari, Chrome, and desktop.

[truph01]

it works fine on Safari, Chrome, and desktop.

In safari, that solution can introduce the bug when the sound is triggered 2 times. Did you encounter it? @jayeshmangwani

[jayeshmangwani]

No @truph01 , I have tested it a few times on Safari and only received one notification sound.

[truph01]

I have tested it a few times on Safari and only received one notification sound.

That means this bug appears in both Chrome and Safari from your side, right?

[jayeshmangwani]

However, I’m still unable to hear two sounds from the desktop when this line is uncommented 🤷.

[jayeshmangwani]

Here’s how I am testing it—please let me know if I’m doing something wrong.

notif-test-vid.mov

[JoshIri360]

@truph01 @jayeshmangwani will adding silent: true to the new Notification solve this.

notificationCache[notificationID] = new Notification(title, {
        body,
        icon: String(icon),
        data,
        silent: true,
        tag,
});

If this is a bug from the Chrome web browser and it's fixed, we could expect double notifications but with this, only our custom sound via playSound(SOUNDS.RECEIVE) will play and the default browser notification sound will be suppressed.

[truph01]

Yes, upon commenting out this line, I’m getting the default desktop notification sound, but no sound from Chrome.

• Yes, that’s why I mentioned in my proposal that this issue only occurs on macOS Chrome. The best solution is to add the custom sound specifically for macOS Chrome, as outlined in my alternative solution. This ensures that on macOS Chrome, where the sound is missing, the custom sound is added, while leaving other platforms unchanged.

Here’s how I am testing it—please let me know if I’m doing something wrong.

• I'm not sure why the sound behavior in your above video differs from the one in the reviewer checklist when the line is uncommented. In the video from the reviewer checklist, I can hear two sounds, but this is not the case in the above video. Did you observe the same issue? Please ensure that after applying the code changes, you refresh the desktop app to ensure the changes are properly applied.

[truph01]

@JoshIri360 Did you hear two sounds when applying the change in PR in Desktop platform?

[JoshIri360]

@truph01 No, I don't but I think this may be because I can't seem to enable notification banners and sounds for the Desktop platform.

[truph01]

@JoshIri360 Please help try it and see what happened from your side:

[JoshIri360]

@truph01 Yes, 2 notifications here

[JoshIri360]

This solves it, no?

[truph01]

@JoshIri360 I think we need to wait until C+ can reproduce the "two sounds" issue.

[jayeshmangwani]

Please ensure that after applying the code changes, you refresh the desktop app to ensure the changes are properly applied.

Yes, I’ve made sure to reload the desktop, but strangely, you and @JoshIri360 consistently get two sounds. I’m probably doing something wrong in my testing 😄

[JoshIri360]

You could try turning on DND, it would silence the system sound so you can listen for the custom one better.

[jayeshmangwani]

You could try turning on DND, it would silence the system sound so you can listen for the custom one better.

Does enabling DND also not stop notifications?

[JoshIri360]

Does enabling DND also not stop notifications?

No, only stops the banners and system sounds

[jayeshmangwani]

Finally, I'm able to reproduce the issue! Now, I can hear two notification sounds simultaneously—one custom and one default macOS notification sound. Thanks, @truph01 and @JoshIri360!

[jayeshmangwani]

@MarioExpensify ,Previously selected proposal resulted in two sounds. We need to revisit and rethink possible solutions for this scenario to ensure the expected behavior. Below are the key points outlined:

When constructing Notification, we are currently passing silent: true, which results in no sound for desktop and web notifications on staging.

App/src/libs/Notification/LocalNotification/BrowserNotifications.ts

Lines 64 to 68 in 8b7096f

	notificationCache[notificationID] = new Notification(title, {
	body,
	icon: String(icon),
	data,
	silent,

Possible Solutions:

1. Pass silent: false:

   • This resolves the issue for desktop and Safari notifications.
   • However, there is a known Chrome bug where notifications remain silent despite silent: false. This seems to be an internal Chrome issue and has been observed on multiple sites.
   1. https://support.google.com/chrome/thread/269928241/sound-stopped-working-in-chrome-mac?hl=en
   2. https://discussions.apple.com/thread/254098862?sortBy=rank
   • We could accept this behavior on Chrome for now, assuming it may eventually be resolved by Chrome, OR we could implement a custom sound specifically for Chrome to address this limitation.

2. Use a custom sound for all platforms:

   • Playing a custom sound across all platforms ensures consistency.
   • Adding playsound(SOUNDS.RECEIVE) can provide a uniform experience on desktop, Safari, and Chrome.

[truph01]

@jayeshmangwani What do you think about my main and alternative solutions here? Does it match your two possible solutions?

[jayeshmangwani]

@truph01 your above solutions looks good and will def solve the problem at hand, but I think we should first reach a consensus on the expected result. Personally, I’m more inclined towards using only silent: false, since the Chrome issue might eventually be resolved on their end.

Alternatively, if we want a more immediate and consistent solution, we could consider using a custom sound across all platforms.

[JoshIri360]

@jayeshmangwani If we're using a custom sound across all platforms, this would be a viable solution.

This would silence the system notifications entirely, the major drawback would be the sound coming through when DND (same for web apps that use custom sounds for Notification like Discord and Whatsapp on web) is turned on as there isn't any support to check for this on Web yet.

[jayeshmangwani]

If we're using a custom sound across all platforms, #53700 (comment) would be a viable solution.

Let’s wait for @MarioExpensify to reach a conclusion on whether we want to use custom sounds for all platforms.

[MarioExpensify]

Hello @jayeshmangwani, thanks for bringing this up to discussion. I don't like the idea that we would either accept Chrome's fault or have a custom code path only to address their issue.

I'm inclined towards the custom notification sound (and make everything consistent), but I'll take this discussion to product/design so we have their perspective on this as well. Please hold a little bit more on this before moving forward.

[arosiclair]

We usually handle and play notification sounds here. We implemented that in this PR. Why isn't that working?

[JoshIri360]

@arosiclair The notification sounds only play when you're in that chat and the browser app is active.

Recording.at.2024-12-26.23.19.56.mp4

[truph01]

We usually handle and play notification sounds here. We implemented that in #31055. Why isn't that working?

• There are two types of sounds:

1. Notification sound
2. In-app sound

This bug is related to the web notification sound (handled here), where the notification sound is triggered in all web platform but does not work in the MacOS Chrome. And here are the possible solutions for it.

[truph01]

@arosiclair The notification sounds only play when you're in that chat and the browser app is active.

@JoshIri360 It is an In-app sound, not the notification sound.

[arosiclair]

@arosiclair The notification sounds only play when you're in that chat and the browser app is active.

Thanks, that makes sense. So when we added playSound with push notifications in your original proposal, why did that cause duplicate sounds to play?

[JoshIri360]

Thanks, that makes sense. So when we added playSound with push notifications in your original proposal, why did that cause duplicate sounds to play?

The issue was that chrome notifications weren’t playing the default notification sound, adding the custom notification fixed that on Chrome, but for platforms where it already worked before, it added another sound. This caused the desktop platform to play both the MacOS notification sounds and the custom sound added.

[arosiclair]

The issue was that chrome notifications weren’t playing the default notification sound, adding the custom notification fixed that on Chrome, but for platforms where it already worked before, it added another sound.

There was no sound because we set silent to true for comment notifications here, right? So on desktop, the notification still plays a sound even with it set to silent?

[JoshIri360]

There was no sound because we set silent to true for comment notifications here, right? So on desktop, the notification still plays a sound even with it set to silent?

You're right, the silent: false change aimed to fix Chrome but caused duplicate sounds on platforms where sound already worked. On desktop, it seems the notification sound doesn't play with silent enabled.

The thought process was to give us more granular control over notification behavior across platforms. Keeping silent: true and adding playSound(SOUNDS.RECEIVE) during push should resolve this cleanly.

[truph01]

@arosiclair Bypass the specific business logic determining when to trigger notification sounds to address the bug where the notification sound is not triggered in Chrome. There are two potential solutions:

1. Disable notification sounds across all web platforms and implement a custom sound specifically for all web platforms.

2. Introduce a custom notification sound exclusively for Chrome while keeping other platforms unchanged."

Which approach do you prefer?