如何在瀏覽器頁籤上 show 出 (更新提示)

0 Comments
常常更新內容的 Website & Web App ，必須能吸引 user 的注意，並清楚地讓 user 知道更新的提示；特別是，Web 資料更新時，user 的視覺焦點恰巧離開瀏覽器頁籤 (Browser Tab)。

有兩個常用的方法。諸如 Facebook、Twitter、LinkedIn 等等的 Social website ，每幾秒就有新的內容產生，再把這些被生產內容的相對數字，插入頁籤抬頭，呈現有多少更新。另一個方法，Trello 就直接出現一個紅點 icon 在頁籤上，不顯示數字。


在接下來的範例中，有三種不同的操作：點我看示範 DEMO  看看有哪些不同變化。


# 1  使用文件標題

Facebook & Twitter 都是透過在頁面標題，增加新提示數字。

專案開發中，有非常多種檢索資料 - retrieve data- 的方法 ( 可以去請教公司內，友善的工程師 )。在這邊的範例，我們假設去檢索所有更新的數字，並計算可以找到的資料，透過 JavaScript 呈現出來。一開始，我們只有 0 個更新，所以我們把數字加入一個 Variable 裡面。

1
var count = 0;

接下來示這段碼的核心，讓我們能夠轉換文件標題。

1
var title = document.title;


然後新增一個 function 來改變頁籤標題的 string。

1
2
3
4
5
function changeTitle() {
    count++;
    var newTitle = '(' + count + ') ' + title;
    document.title = newTitle;
}

這邊可以看到，我們使用 JavaScrip   + + Operator。 這個運算會增加 count  的 1 個數字，在每次計算中。 當我們從 0 開始，下一回的計算會吐出 1 。 透過這個  + + Operator 去模擬數字的增加，而不需要去抓任何一隻 API 來提供數字。

接下來新增另一個 function 來跑 changeTitle() 

1
2
3
4
5
function newUpdate() {
    update = setInterval(changeTitle, 2000);
}
var docBody = document.getElementById('site-body');
docBody.onload = newUpdate;

上面假設，在每 2000 毫秒 ( 2 秒) 去檢查更新。changeTitle()  會在每次間隔去執行。


第一個做法直接了當，去檢索需要的數字然後傳到頁籤標題上。


# 2  使用 Favicon

接下來試第二種方法，透過HTML 裡面的 TAG 標籤 Favicon 交換呈現，當檢索到更新時，該 icon 每秒交替另一張。


文件如下

1
<link id="favicon" rel="icon" href="img/favicon.gif?v3"/>

把新的 favicon 路徑設定到 JavaScript Variable 裡面。

1
var iconNew = 'img/favicon-dot.gif';

然後還需要兩個 functions

01
02
03
04
05
06
07
08
09
10
11
12
function changeFavicon() {
    document.getElementById('favicon').href = iconNew;
}
function newUpdate() {
    update = setInterval(changeFavicon, 3000);
    setTimeout(function() {
        clearInterval( update );
    }, 3100);
}
var docBody = document.getElementById('site-body');
docBody.onload = newUpdate;

第一個 funcion : changeFavicon() 會替換掉初始的 favicon 便成有紅點那個圖。第二個 newUpdate()  會在特定的時間點上執行第一個 function。

第二個方法也不難，比第一個方法的編碼更少、更簡單一點。除此之外，我們可以改變設計變成其他種更有創意的圖案，符合視覺需求。

Note: Chrome 瀏覽器不支援動態 GIF。


# 3  使用 Favico,js

第三個方法，我們使用 Miroslav Magda 開發的一隻 JavaScrtip library : Favico.js 。

一開始透過 JavaScript ，我們來定義一個新的 Favico   來定義位置 、動態 、背景顏色等等

1
2
3
4
5
6
var favicon = new Favico({
    position  :'up',
    animation :'popFade',
    bgColor   :'#dd2c00',
    textColor :'#fff0e2'
});

接下來再加上這幾段 functions

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
var num = 0;
function generateNum() {
    num++;
    return num;
}
function showFaviconBadge() {
    var num = generateNum();
    favicon.badge(num);
}
function newUpdate() {
    update = setInterval(showFaviconBadge, 2000);
}
var docBody  = document.getElementById('site-body');
docBody.onload = newUpdate;


上面的碼，好像跟第一個方法類似。一開始新增一個 function 來模擬更新總數；第二個 function showFaviconBadge() ，把數字插入 icon 中；最後一個 function newUpdate() 則在某個特定的時間區間中，去執行第二支 function，呈現接收到更新的體驗。


結論

上訴三種方法，我們透過瀏覽器頁籤 (browser tab) 當成媒介去提醒 Users。這三種方法不過是一個示範起點，你可以把呈現的方法改造成適合妳的專案應用，你可以蹲在家中廁所絞盡腦汁好好思考，或者是馬上跟我連絡。



官方網站: www.tskymicromedia.com
設計總監: 賴善久 James Lai
Skype:kingjames.lai
Mobil: +886 0965-07-9893


Unknown

Instagram