How to make a shiny or javascript alert that appears in front of other windows/apps

Question

I am writing an app that will be used to copy large numbers of photos (often tens of thousands at a time) from SD cards to external hard drives, which people will be running in the background while they do other work. I want to notify the user when the file copying is finished so they don't have to keep checking the app. I have used shinyalert() in the past, and I am also aware of using javascript functions to send alerts as well (this is the one I found:

$( document ).ready(function() {
  Shiny.addCustomMessageHandler('alert', function(message) {
    alert(message)
  })
});

). But, those only appear when the app is open, and I want something that will pop up in front of any other windows. My solution was to use system2() to call a powershell script, which I borrowed from this page: https://gist.github.com/Windos/9aa6a684ac583e0d38a8fa68196bc2dc#file-toast-notification-not-working-on-windows-fall-creators-update-ps1 and changed the actual text of the alert.

The powershell script works well, but I'm worried that it won't work if the user has a different version of Windows. (The app is intended to be deployed as a package and run locally off the user's computer, rather than run from a shiny server).

Are there any options or settings in shinyalert or javascript alerts that I can change to make them visible in front of other windows? And/or is the powershell script option robust enough that it would work on different computers?

Thanks!

lz100 · Accepted Answer · 2021-10-27T22:46:57.793

A better option is to use browser notification. This will trigger the browser to send out notifications in front of all windows and all other software programs. Plus, this works across all platforms, no matter what version of Windows or Linux or MacOS, as long as they have a modern browser, like Chrome, Firefox, Edge or others, it will work.

Here is how to do:

$( document ).ready(function() {
  Shiny.addCustomMessageHandler('alert', function(data) {
    Notification.requestPermission().then(function() {
      new Notification(data.msg);
    });
  })
});

In your shiny server, after your process is done, add this

  session$sendCustomMessage(
    type = 'alert',
    message = list(
      msg = "my message"
    )
  )

Full code:

library(shiny)

ui <- fluidPage(
  tags$script(
      '
      $( document ).ready(function() {
        Shiny.addCustomMessageHandler(\'alert\', function(data) {
          Notification.requestPermission().then(function() {
            new Notification(data.msg);
          });
        })
      });
      '
  )
)

server <- function(input, output, session) {
  observe({
      # do some thing 
      Sys.sleep(2)
      session$sendCustomMessage(
          type = 'alert',
          message = list(
              msg = "my message"
          )
      )
  })
}

shinyApp(ui, server)

The first time, users will be asked for permission, once they have accepted, notifications will show.

When it is displayed on Linux, Windows maybe a little different, but still should be above all programs.

How to make a shiny or javascript alert that appears in front of other windows/apps

1 Answers1