Calling an async method inside another async method does not work in office js. Using the command script used from the Ribbon in a web browser

Question

Do you know why this function called from my script commands.ts which is a script used by the commands in the ribbon wouldn't work?

I am creating an Add-in for Outlook and I am calling the method "join" which is triggered when the button from the ribbon is clicked. The issue I am having is that when I am in the browser the method "replaceAsync" never gets called so the notification is never added to the screen. If I run the application in Outlook desktop the notification shows absolutely fine (image 1). This is the method I am using, could you advise if what I am doing is correct and do you know what could be reason that is causing this issue in the browser?

Many Thanks

Image displaying notification in Outlook Desktop app

function join(event: Office.AddinCommands.Event) {   
  Office.context.mailbox.item.body.getAsync(Office.CoercionType.Html, result => {

    if (result.status === Office.AsyncResultStatus.Failed) {
       console.log('command failed')
   Office.context.mailbox.item.notificationMessages.replaceAsync("video", {
          type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage,
          message: `No Matching Link Found`,
          icon: "Icon.80x80",
          persistent: false
       });
    } else {
      console.log('command success')
    }
  });
  event.completed();
}

Answer 1

The replaceAsync method replaces a notification message that has a given key with another message. When the method completes, the callback function passed in the callback parameter is called with a single parameter of type Office.AsyncResult. But in your sample code the optional parameter (callback) is omitted. So, you will never know when it finishes.

// Link to full sample: https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
var id = $("#notificationId").val();
Office.context.mailbox.item.notificationMessages.replaceAsync(
  id,
  {
    type: "informationalMessage",
    message: "Notification message with id = " + id + " has been replaced with an informational message.",
    icon: "icon2",
    persistent: false
  },
  handleResult);