javascript - 在 Facebook Messenger webview 弹出窗口中打开时如何关闭 Shiny 应用程序？

Question

我有一个 Shiny 的应用程序，可以在 facebook Messenger webview 弹出小窗口中打开。我希望它在用户完成后关闭。

我正在使用以下方法来执行此操作，但不知何故它没有关闭 WebView :

library(shiny)
library(shinyWidgets)
library(jsonlite)

jscode <- "shinyjs.closeWindow = function() { window.close(); }
  shinyjs.closeMessengerWebview = function() { MessengerExtensions.requestCloseBrowser(function success() {}, function error(err) {}); }"

send_reminder_data <- function(times_input_value,
                               recipient_id,
                               drug_name,
                               tz_offset,
                               url = "xxxxxxxxxxxxxxxxxxxxxxxxx",
                               times_format = "%H:%M") {
  x <- list(source = "shiny_time_picker_app",
            recipient_id = recipient_id,
            drug_name = drug_name,
            tz_offset = tz_offset,
            times = lapply(
              times_input_value,
              strftime,
              format = times_format
            )
  )
  httr::POST(url,
             body = toJSON(x, auto_unbox = TRUE),
             encode = "json")
}

ui <- fluidPage(
  shinyjs::useShinyjs(),
  shinyjs::extendShinyjs(text = jscode, functions = c("closeMessengerWebview")),
  htmlOutput("queryText"),
  selectInput("timezone_offset", "Timezone: UTC", choices = -12:14, selected = 0),
  uiOutput("times")
)

server <- function(input, output, session) {
  num_time_slots <- 10
  output$queryText <- renderUI({
    query <- parseQueryString(session$clientData$url_search)
    HTML(paste("<h1>Reminder for ", query[["drug"]], "</h1>", sep = ""))
  })
  observe({
    query <- parseQueryString(session$clientData$url_search)
    if (!is.null(query[["default_tz_offset"]])) {
      updateSelectInput(session, "timezone_offset", selected = query[["default_tz_offset"]])
    }
  })
  output$times <- renderUI({
    query <- parseQueryString(session$clientData$url_search)
    num_time_slots <- ifelse(length(query[["n"]])==0, num_time_slots, as.numeric(query[["n"]]))
    div(
      lapply(seq(num_time_slots), function(i) {
        airDatepickerInput(
          inputId = paste0("time_", i),
          label = "Pick Time:",
          timepicker = TRUE,
          onlyTimepicker = TRUE,
          timepickerOpts = c(minutesStep = 10),
          autoClose = TRUE,
          clearButton = TRUE
        )
      }),
      actionButton("commit", "Send & Approve", icon = icon("send"))
    )
  })
  observeEvent(input$commit, {
    x <- purrr::compact(lapply(seq(num_time_slots), function(i) {input[[paste0("time_", i)]]}))
    query <- parseQueryString(session$clientData$url_search)
    recipient_id <- query[["recipient_id"]]
    drug_name <- query[["drug"]]
    tz_offset <- as.numeric(input$timezone_offset)
    send_reminder_data(x, recipient_id, drug_name, tz_offset)
    shinyjs::hideElement("commit")
    # shinyjs::js$closeWindow()
    shinyjs::js$closeMessengerWebview()
    stopApp()
  })
}

shinyApp(ui = ui, server = server)

Answer 1

添加Messenger SDK，

<script>
    var psid;
    (function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) { return; }
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/messenger.Extensions.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'Messenger'));
    window.extAsyncInit = () => {
        // TODO: How to parse env file from here?

    };
</script>

现在您可以轻松访问 MessengerExtensions 并通过特定操作关闭 Web View 。

MessengerExtensions.requestCloseBrowser(function success() {
    console.log("Webview closing");
}, function error(err) {
    console.log(err);
});