如何在Windows 10 UWP JavaScript应用中检查前后台状态

嗨，刚好我对UWP JS的状态检测很熟悉，给你分享最靠谱的实现方式：

一、获取当前应用的实时状态 #

UWP JavaScript应用里，你可以通过Windows.UI.WebUI.WebUIApplication这个核心API直接获取应用的可见性状态，这是判断前后台最直接的方法：

// 获取当前应用的可见性状态
const appVisibility = Windows.UI.WebUI.WebUIApplication.visibilityState;

// 判断是否处于后台
if (appVisibility === Windows.UI.WebUI.WebUIApplicationVisibility.hidden) {
    // 应用处于后台，这里执行你的通知显示逻辑
    console.log("应用在后台，可触发通知");
} else {
    // 应用处于前台，跳过通知展示
    console.log("应用在前台，不显示通知");
}

WebUIApplicationVisibility枚举有两个关键值：

• visible：应用处于前台，用户可见
• hidden：应用处于后台，用户不可见

二、监听应用前后台切换事件 #

如果你的应用需要在切换前后台的瞬间触发通知（比如刚切到后台就弹通知），那一定要监听visibilitychanged事件，这样能实时响应状态变化：

// 绑定可见性变化事件
Windows.UI.WebUI.WebUIApplication.addEventListener("visibilitychanged", (event) => {
    if (event.visibilityState === Windows.UI.WebUI.WebUIApplicationVisibility.hidden) {
        // 应用刚切换到后台，触发通知
        showBackgroundNotification();
    } else {
        // 应用切回前台，可以选择取消正在显示的通知（如果需要）
        cancelActiveNotification();
    }
});

// 示例：显示后台通知的函数
function showBackgroundNotification() {
    // 使用UWP的Toast通知API创建并显示通知
    const toastTemplate = Windows.UI.Notifications.ToastNotificationManager.getTemplateContent(Windows.UI.Notifications.ToastTemplateType.toastText01);
    const textNodes = toastTemplate.getElementsByTagName("text");
    textNodes[0].textContent = "后台通知：应用已切换到后台运行";

    const toastNotification = new Windows.UI.Notifications.ToastNotification(toastTemplate);
    Windows.UI.Notifications.ToastNotificationManager.createToastNotifier().show(toastNotification);
}

// 示例：取消通知的函数（可选）
function cancelActiveNotification() {
    Windows.UI.Notifications.ToastNotificationManager.createToastNotifier().hideAll();
}

三、额外注意事项 #

• 如果你需要在应用挂起状态（不是后台运行，是系统暂停了应用进程）下触发通知，那可能需要配合后台任务（Background Tasks）来实现，但这时候就不是简单的状态检查了，需要配置后台任务的触发条件。
• 确保你的应用已经在Package.appxmanifest中声明了通知相关的权限（比如Toast通知不需要额外权限，但如果是其他类型的通知可能需要）。

内容的提问来源于stack exchange，提问作者Stephen Yuan