如何判断用户是关闭浏览器标签还是刷新页面

Posted 2023-05-07

【中文标题】如何判断用户是关闭浏览器标签还是刷新页面

【英文标题】：How to determine whether the user closes browser tab or refreshes the page

【发布时间】：2021-10-28 07:09:06

【问题描述】：

我正在使用 vue.js 构建一个两人游戏应用程序。该应用使用 vuex 进行状态管理，并使用 Firestore 作为后端服务器。

如果用户通过关闭浏览器选项卡或导航离开应用程序，则需要删除游戏 Firestore 文件。但是，如果用户刷新页面，Firestore 文件需要保留，以便重新加载过程可以重新填充游戏。

所以我需要确定用户是否刷新了页面，而不是关闭浏览器或导航。

如下所示，在 vue 创建的生命周期中，我设置了一个“beforeunload”事件监听器并启动了我的 Firestore 监听器

created() 
    // This window event listener fires when the user
    // navigates away from or closes the browser window
    window.addEventListener("beforeunload", (event) => 
        const isByRefresh = getUnloadInitiator();
        if (!isByRefresh) 
            this.stopFirestoreListeners("beforeunload");
        
        // Cancel the event. This allows the user to cancel via popup. (for debug purposes)
        event.preventDefault();
        event.returnValue = "";

        // the absence of a returnValue property on the event
        // guarantees the browser unload happens
        // delete event["returnValue"];
    );

    this.startFirestoreListeners("created");

,

getUnloadInitiator 函数如下所示。这是我需要帮助的地方。现在这个函数所做的只是 console.log 各种性能值。

function getUnloadInitiator() 
// check for feature support before continuing
if (performance.mark === undefined) 
    console.log("performance.mark NOT supported");
    return false;

console.log("===============================");
// Yes I know that performance.navigation is depreciated.
const nav = performance.navigation;
console.log("nav=", nav);
console.log("===============================");

// Use getEntriesByType() to just get the "navigation" events
var perfEntries = performance.getEntriesByType("navigation");
for (var i = 0; i < perfEntries.length; i++) 
    var p = perfEntries[i];
    console.log("= Navigation entry[" + i + "]=", p);
    // other properties
    console.log("type = " + p.type);

console.log("===============================");

performance.mark("beginLoop");
const entries = performance.getEntries(
    name: "beginLoop",
    entryType: "mark",
);
const firstEntry = entries[0];
console.log("firstEntry.type=", firstEntry.type);

console.log("===============================");

//TODO: Determine how unload was initiated
return true;

以下是我的 console.logs 的输出。它们对于刷新页面、关闭浏览器选项卡或导航是相同的。全部显示“重新加载”作为导航类型。

===============================
nav= PerformanceNavigation type: 1, redirectCount: 0
===============================
= Navigation entry[0]= PerformanceNavigationTiming unloadEventStart: 25.399999976158142, unloadEventEnd: 25.69999998807907, domInteractive: 633, domContentLoadedEventStart: 633, domContentLoadedEventEnd: 633, …
type = reload
===============================
firstEntry.type= reload
===============================

任何有关如何区分刷新页面、关闭浏览器选项卡或导航的帮助将不胜感激。必须有，因为我用于调试目的的本机取消浏览器弹出窗口会区分新鲜和浏览器选项卡关闭。

谢谢

【参考方案1】：

您可以使用授权源作为持久性，无论是 Firestore、本地存储还是 cookie。您可以使用 tab.id 获取浏览器的标签 ID，并将其与现有的标签 ID（如果存在）进行比较。

browser.pageAction.show(tab.id);

来源：https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Working_with_the_Tabs_API