<!--
本講義來源
主要參考google 提供範例-當瀏覽器於背景(也就是隱藏狀態)執行時才會跑出[右下方跳出彈跳視窗程序]
https://www.google.com/search?q=javascript+Notification+Pop+Up+when+the+browser+window+is+not+actively+in+use+or+is+minimized.&num=10&newwindow=1&sca_esv=656b10c93ec889a4&sxsrf=AE3TifMII_2H2JrdMt9DqwwyBHAywsgdiQ%3A1755138288864&ei=8EidaOXBNLiRvr0PxbWKsA0&ved=0ahUKEwjl-fTRn4mPAxW4iK8BHcWaAtYQ4dUDCBA&uact=5&oq=javascript+Notification+Pop+Up+when+the+browser+window+is+not+actively+in+use+or+is+minimized.&gs_lp=Egxnd3Mtd2l6LXNlcnAiXmphdmFzY3JpcHQgTm90aWZpY2F0aW9uIFBvcCBVcCB3aGVuIHRoZSBicm93c2VyIHdpbmRvdyBpcyBub3QgYWN0aXZlbHkgaW4gdXNlIG9yIGlzIG1pbmltaXplZC5IAFAAWABwAHgAkAEAmAEAoAEAqgEAuAEDyAEA-AEBmAIAoAIAmAMA4gMFEgExICmSBwCgBwCyBwC4BwDCBwDIBwA&sclient=gws-wiz-serp

document.visibilityState == 'hidden'
^隱藏狀態寫法參考https://github.com/UNES97/js-push-notifications
進入隱藏狀態的若且為若if判別式google回復參考https://www.google.com/search?q=javascript+Notification+Pop+Up+when+the+browser+window+is+not+actively+in+use+or+is+minimized.&num=10&newwindow=1&sca_esv=656b10c93ec889a4&sxsrf=AE3TifMII_2H2JrdMt9DqwwyBHAywsgdiQ%3A1755138288864&ei=8EidaOXBNLiRvr0PxbWKsA0&ved=0ahUKEwjl-fTRn4mPAxW4iK8BHcWaAtYQ4dUDCBA&uact=5&oq=javascript+Notification+Pop+Up+when+the+browser+window+is+not+actively+in+use+or+is+minimized.&gs_lp=Egxnd3Mtd2l6LXNlcnAiXmphdmFzY3JpcHQgTm90aWZpY2F0aW9uIFBvcCBVcCB3aGVuIHRoZSBicm93c2VyIHdpbmRvdyBpcyBub3QgYWN0aXZlbHkgaW4gdXNlIG9yIGlzIG1pbmltaXplZC5IAFAAWABwAHgAkAEAmAEAoAEAqgEAuAEDyAEA-AEBmAIAoAIAmAMA4gMFEgExICmSBwCgBwCyBwC4BwDCBwDIBwA&sclient=gws-wiz-serp
額外google回復使用三個等號document.visibilityState === "hidden"參考https://www.google.com/search?q=javascript+Notification+Pop+Up+when+the+browser+window+is+in+the+background&oq=javascript+Notification+Pop+Up+when+the+browser+window+is+in+the+background&gs_lcrp=EgZjaHJvbWUyBggAEEUYQNIBCDYxNzZqMGo0qAIAsAIB&sourceid=chrome&ie=UTF-8

主要參考google 提供範例-被執行後，於右下方跳出彈跳視窗程序，點擊後進入連結中
https://www.google.com/search?q=javascript+new+Notification+click+link&oq=javascript+new+Notification+click+link&gs_lcrp=EgZjaHJvbWUyBggAEEUYQDIHCAEQIRigAdIBCDgyOTlqMGo0qAIAsAIB&sourceid=chrome&ie=UTF-8
次要參考
https://www.google.com/search?q=javascript+when+browser+is+not+used+has+Notification+Pop+Up&num=10&newwindow=1&sca_esv=827ca067cae54b45&sxsrf=AE3TifNWX7RxRXycfObF-qur9Teo4RCtZA%3A1755083815409&ei=J3ScaJjSGLWCvr0P97yGgQI&ved=0ahUKEwjYgfna1IePAxU1ga8BHXeeISAQ4dUDCBA&uact=5&oq=javascript+when+browser+is+not+used+has+Notification+Pop+Up&gs_lp=Egxnd3Mtd2l6LXNlcnAiO2phdmFzY3JpcHQgd2hlbiBicm93c2VyIGlzIG5vdCB1c2VkIGhhcyBOb3RpZmljYXRpb24gUG9wIFVwMggQABiABBiiBDIIEAAYgAQYogQyBRAAGO8FMgUQABjvBTIIEAAYgAQYogRI1X1QyD1YzXZwAXgAkAEAmAGfAqABpSCqAQYwLjE3Lja4AQPIAQD4AQGYAg-gAscSwgIOEAAYgAQYsAMYhgMYigXCAgsQABiABBiwAxiiBMICCBAAGLADGO8FwgIIECEYoAEYwwTCAgoQIRigARjDBBgKmAMAiAYBkAYGkgcGMS4xMS4zoAeeWbIHBjAuMTEuM7gHwhLCBwYwLjEwLjXIByQ&sclient=gws-wiz-serp

點擊後、離開瀏覽器視窗後，會於右下角跳出彈跳視窗之程式下載
https://github.com/UNES97/js-push-notifications
真人教學
https://www.youtube.com/watch?v=Bm0JjR4kP8w&ab_channel=WebDevSimplified

new Notification中文版解說
https://www.cythilya.tw/2017/07/09/notification/
****
若藉由[早期瀏覽器版本]：
可攜式瀏覽器GoogleChromePortable.exe
則於第2秒跳出第一個彈跳視窗、第4秒跳出第二個彈跳視窗
^以上兩個彈跳視窗不會重疊在同一位置，而是較晚出現的彈跳視窗會疊在較早出現之彈跳視窗上方
****
若藉由最新chrome瀏覽器：
則於第2秒跳出第一個彈跳視窗、第4秒跳出第二個彈跳視窗
^以上兩個彈跳視窗會重疊在同一位置，[較晚出現的彈跳視窗]會等待較早出現之彈跳視窗消失後，才會跳出[較晚出現的彈跳視窗]

****這個瑋倫研究感覺沒什麼意義：
tag: 'newArrival' // 設定標籤
****點擊連結後，藉由原本的頁面進入連結
https://www.google.com/search?q=window.open%28link+don%27t+use+_blank+%2F%2F+Open+the+link+in+the+same+tab&num=10&newwindow=1&sca_esv=a1754dd2adcb8a92&sxsrf=AE3TifMYRmvzYtqfj5pKac5AOs_kPGzhFQ%3A1755098353890&ei=8aycaN6MNsWo1e8PrY3o2QU&ved=0ahUKEwieybfvioiPAxVFVPUHHa0GOlsQ4dUDCBA&uact=5&oq=window.open%28link+don%27t+use+_blank+%2F%2F+Open+the+link+in+the+same+tab&gs_lp=Egxnd3Mtd2l6LXNlcnAiQndpbmRvdy5vcGVuKGxpbmsgZG9uJ3QgdXNlIF9ibGFuayAvLyBPcGVuIHRoZSBsaW5rIGluIHRoZSBzYW1lIHRhYkjkF1DqEFjcEnACeAGQAQCYAcwBoAGXA6oBAzItMrgBA8gBAPgBAvgBAZgCAqACCsICChAAGLADGNYEGEeYAwCIBgGQBgiSBwEyoAfVA7IHALgHAMIHAzItMsgHCA&sclient=gws-wiz-serp
    // Option 1: Omitting the target parameter
    window.open('https://example.com/your-page');

    // Option 2: Explicitly setting target to '_self'
    window.open('https://example.com/your-page', '_self');
****點擊連結後，藉由新的頁面進入連結
https://www.google.com/search?q=javascript+new+Notification+click+link&oq=javascript+new+Notification+click+link&gs_lcrp=EgZjaHJvbWUyBggAEEUYQDIHCAEQIRigAdIBCDgyOTlqMGo0qAIAsAIB&sourceid=chrome&ie=UTF-8
window.open(link, '_blank'); // Open the link in a new tab    
****javascript中給予網址參數：
https://www.google.com/search?q=javascript+url+which+is+better+var+const&oq=javascript+url+which+is+better++var+const+&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIHCAEQABjvBTIHCAIQABjvBTIHCAMQABjvBTIHCAQQABjvBdIBCTIzMTY0ajBqN6gCALACAA&sourceid=chrome&ie=UTF-8
靜態網址：
    const API_BASE_URL = "https://api.example.com/v1";
動態網址：    
    let currentImageUrl = "https://example.com/images/default.jpg";
    // ... later in the code ...
    currentImageUrl = "https://example.com/images/new_image.jpg";    
-->
<html>

<head>
</head>

<body>
willypage!
<xmp>
****
按下F12，觀測Console：
****
當瀏覽器從呈現本分頁的狀態---->轉變成：其他分頁、或將瀏覽器縮小，
則會進入[隱藏狀態]，並於[隱藏狀態]中啟動無窮迴圈，開始計數：1、2、3、4... ...。
當迴圈數到第2秒與第6秒時，右下角會呈現彈跳視窗。
未來：可轉變成藉由無限迴圈不斷地偵測SQL資料庫列數的變化，
當被插入資料，列數提升時，則代表溝通的對方新增傳送出資料給我方，
可於隱藏狀態呈現右下角彈跳視窗。

點擊[右下角彈跳視窗]則會使原本網頁分頁進入指定連結。

****
倘若從[隱藏狀態]---->轉變回：將瀏覽器呈現本分頁。
則會變成[顯示狀態]，並註銷之前[隱藏狀態]所啟動的無限迴圈
</xmp>
<script>
let currentImageUrlTSAIR = "https://cc.ee.ntu.edu.tw/~d01941025";
/*使用者必須允許方可跑出右下角彈跳視窗\|/20250814B同時一起看_999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999*/
    Notification.requestPermission().then(permission => {
        if (permission === "granted") {
            // Permission granted, proceed to create notification
/*使用者必須允許方可跑出右下角彈跳視窗\|/20250814B同時一起看_999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999*/

/*當瀏覽器於背景執行時才會跑出[右下方跳出彈跳視窗程序]\|/20250814C同時一起看_99999999999999999999999999999999999999*/
    document.addEventListener('visibilitychange', () => {
        if (document.visibilityState == 'hidden') {
        console.log("●目前是隱藏狀態，啟動無限迴圈");
            // Page is hidden, consider sending a notification if an event occurs
/*當瀏覽器於背景執行時才會跑出[右下方跳出彈跳視窗程序]\|/20250814C同時一起看_99999999999999999999999999999999999999*/

/*執行無限迴圈，並至第幾秒執行呈現右下角彈跳視窗9999999999999999999999999999999999999999999999999999*/    
var w=0 ;
function rightbelownotification()
{ 
  w=w+1;
  console.log(w); 
  if(w==2||w==6){/*至第六秒時右下角呈現彈跳通知，即便此時已經將介面換至於另一個視窗也會跑出彈跳通知*/
  console.log("右下角呈現彈跳通知B");
/*執行無限迴圈，並至第幾秒執行呈現右下角彈跳視窗9999999999999999999999999999999999999999999999999999*/    
/*用此即可跑出彈跳視窗99999999999999999999999999999999999999999999999999999999999*/
    function showNotificationWithLink(title, body, icon, link) {
        const options = {
            body: body,
            icon: icon
        };

        const notification = new Notification(title, options);

        notification.onclick = function() {
            window.open(link, '_self'); // Open the link in a new tab
            notification.close(); // Optionally close the notification after click
        };
    }

    // Example usage:
    showNotificationWithLink(
        "乖倫New Message!",
        "點擊Click to view your latest message.",
        "./zz_code_AskClickLinkSamePageRightbelowNotificationWhenBrowserNOTuse_willy3.jpg",
        currentImageUrlTSAIR
    );
/*^上述網址的部分可藉由其他變數代換*/
/*用此即可跑出彈跳視窗66666666666666666666666666666666666666666666666666666666666666*/    
/*執行無限迴圈，並至第幾秒執行呈現右下角彈跳視窗6666666666666666666666666666666666666666666666666666*/  
  }
}
myIntervalB = setInterval(rightbelownotification, 1000);  
/*執行無限迴圈，並至第幾秒執行呈現右下角彈跳視窗6666666666666666666666666666666666666666666666666666*/  
/*當瀏覽器於背景執行時才會跑出[右下方跳出彈跳視窗程序]\|/20250814C同時一起看_66666666666666666666666666666666666666*/
        } else {
            // Page is active, notifications might not be necessary            
            console.log("●目前是顯示狀態-瀏覽器正顯示本網頁分頁，註銷之前於隱藏狀態時所啟動的迴圈");
            clearInterval(myIntervalB); /*註銷之前於隱藏狀態時所啟動的迴圈*/
        }
    });
/*當瀏覽器於背景執行時才會跑出[右下方跳出彈跳視窗程序]\|/20250814C同時一起看_66666666666666666666666666666666666666*/

/*使用者必須允許方可跑出右下角彈跳視窗\|/20250814B同時一起看_6666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666*/    
        } else {
            console.log("Notification permission denied.");
        }
    });
/*使用者必須允許方可跑出右下角彈跳視窗\|/20250814B同時一起看_6666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666*/    
</script>
</body>
</html>