IE9固定网站模式II:网站转变为桌面应用-技术开发专区

IE9固定网站模式II:网站转变为桌面应用

作者：皮丽华编辑：皮丽华 2011-11-03 21:38 IT168网站原创

【IT168 厂商稿】通过上一期的博客，相信大家已经对IE9的固定网功能有了一定的了解，也已经知道了高清图标，静态跳转列表以及动态跳转列表的实现方法。

　　接下来，我将会介绍两个更炫更酷的固定网功能给大家——自定义图标覆盖和智能缩略图功能。

　　IE固定网站模式总共包括五项功能

　　v 基础功能

　　· 高清图标
　　· 静态跳转列表

　　v 高级功能

　　· 动态跳转列表
　　· 自定义图标覆盖
　　· 智能缩略图

　　自定义图标覆盖

　　让用户注意到最新的及时提醒

　　自定义图标覆盖功能使得网站能够向用户发送即时消息提醒。具体效果如下图所示：

　　Figure 2 无覆盖固定图标

　　Figure 3 显示覆盖的固定图标

　　试想一下，如果我们的站点以这样的方式来提醒用户，如收件箱，交易信息，以及一些即时信息，将无疑会提高用户粘性和停留时间。国外网站Huffington Post的调查结果显示使用固定网功能的用户的站点停留时间上升了49%。而添加自定义图标覆盖功能也非常的简单。

　　代码实现

　　window.external.msSiteModeSetIconOverlay()

　　window.external.msSiteModeActivate()

　　window.external.msIsSiteMode()

　　window.external.msSiteModeClearIconOverla()

　　为了实现自定义图标覆盖通知功能，你需要下面的准备

　　网站的个性化高清图标
　　一系列的覆盖图标，我们推荐16x16

　　API基于JavaScript, 我们将会用到以下函数

　　window.external.msSiteModeClearIconOverlay()函数用来清除之前存在的覆盖图标

　　window.external.msSiteModeSetIconOverlay()函数可以使得我们制定提醒的名称或简单描述

　　之后，我们通过window.external.msSiteModeActivate 函数来呼出覆盖图标通知用户window.external.msIsSiteMode 函数将会告诉我们当前访问页是否是一个已经固定的网站用以决定之前的函数是否需要执行。下面的示例中，我采用了5个覆盖图标(1-5)来代表当前用户的未读消息数目。

　　我们需要做的第一件事就是添加跳转到图标的链接，如果这一步缺失的话，IE浏览器的图标将会备用为默认值。

　　接下来，我将要定义一些示例数据。我打算在这个示范中让覆盖图标每隔5秒变化一次用以模仿一个较为真实的场景，这些数据元素数据仅仅简单的包括一些JSON数据。

　myPin.init([{ "num": 1, "label": "Label 1" },

　　{ "num": 2, "label": "Label 2" },

　　{ "num": 3, "label": "Label 3" },

　　{ "num": 4, "label": "Label 4" },

　　{ "num": 5, "label": "Label 5" }

　　]);

　　　通过设置一个计时器，我们可以实现每隔5秒产生一组新的数据。

　　setInterval(function () { myPin.getData(); }, 5000);

　　我们需要记住的一件事情是，我再仿真用户从远程服务器上获取数据的过程。事实上， myPin.getData() 函数实现的功能是通过计数器抓取数据用以产生覆盖图标。

　getData: function ()

　　{

　　// A function that just simulates returning a result set...

　　var idx = 0;

　　// Determines whether the current page was launched as a pinned site.

　　if (window.external.msIsSiteMode()) {

　　idx = this.currIndex++;

　　this.currIndex = (this.currIndex < 5) ? this.currIndex : 0;

　　this.dispOverlay(this.dataBin[idx]);

　　}

　　}

　　正如你所见的一样，他采用了计时器var currIndex 来决定抓取具体哪一个数组元素之后将其传递给dispOverlay(). 也是在此处， window.external.msSiteModeClearIconOverlay() 函数被调用用以清除之前的覆盖图标并为实际的图标名称产生一个 string。你可以看到，利用我们的数据oImg var 在表层被创建。

dispOverlay: function (theData)

　　{

　　var oImg = "";

　　// Is there any data?

　　if (theData) {

　　// Clear any preexisting overlay icon

　　window.external.msSiteModeClearIconOverlay();

　　// Create the image string...

　　oImg = "images/num_" + theData.num + ".ico";

　　// Go ahead and create the overlay image and it's label...

　　this.setOverlay(oImg, theData.label);

　　}

　　}

　　图标名称以及标签内容将会传递给

　　setOverlay() 函数，用以通过window.external.msSiteModeSetIconOverlay设置覆盖图标以及通过window.external.msSiteModeActivate在任务栏上显示图标。

　　setOverlay: function (icon, desc)

　　{

　　// Sets the overlay icons...

　　window.external.msSiteModeSetIconOverlay(icon, desc);

　　window.external.msSiteModeActivate();

　　}

　　测试，Demo 及最终代码

　　你需要先通过IE9将测试网站固定到任务栏上。

　　完成固定5秒之后，代码执行将会让你看到第一个通知图标，并在之后每隔5秒跳换一次，依次循环。

　　值得一提的时，你可以利用IE F12 Developer tools 对你的固定完整进行debug, 按下键盘的F12键就能看到工具。

　　访问http://reybango.com/demos/sitepinning/index.html

　　你可以看到做成的效果展示。打开网页后，拖拽网页标签到任务栏，之后你会看到一个新的窗口以及固定网图标。5秒钟之后，你会看到任务栏上出现第一个覆盖图标。

　　下面是完整代码，你也以点击下载所有资料 here.

<!DOCTYPE html>
<html>
<head>
<title>Pinned Site Test</title>
<link rel="shortcut icon" type="image/ico" href="favicon.ico" />
<meta name="application-name" content="Pinned Site Test" />
<meta name="msapplication-starturl" content="http://reybango.com/demos/sitepinning/index.html" />
<meta name="msapplication-navbutton-color" content="#3480C0" />
<meta name="msapplication-window" content="width=1024;height=768" />
<meta name="msapplication-tooltip" content="Testing the Pinned Site API" />
<style>
body {
background: none repeat scroll 0 0 #4492CE;
color: #EDEFF4;
}
h1 {
float: left;
font: 440%/1.4em 'Segoe Light',Segoe,'Segoe UI','Meiryo Regular','Meiryo',sans-serif;
margin-left: 10px;
position: relative;
}
</style>
</head>
<body>
<h1>Pinned Site Test</h1>
<div></div>
<script>
var myPin = {
currIndex: 0,
dataBin: [],
getData: function () {
// A function that just simulates returning a result set...
var idx = 0;
// Determines whether the current page was launched as a pinned site.
if (window.external.msIsSiteMode()) {
idx = this.currIndex++;
this.currIndex = (this.currIndex < 5) ? this.currIndex : 0;
this.dispOverlay(this.dataBin[idx]);
}
},
setOverlay: function (icon, desc) {
// Sets the overlay icons...
window.external.msSiteModeSetIconOverlay(icon, desc);
window.external.msSiteModeActivate();
},
dispOverlay: function (theData) {
var oImg = "";
// Is there any data?
if (theData) {
// Clear any preexisting overlay icon
window.external.msSiteModeClearIconOverlay();
// Create the image string...
oImg = "images/num_" + theData.num + ".ico";
// Go ahead and create the overlay image and it's label...
this.setOverlay(oImg, theData.label);
}
},
init: function (myData) {
this.dataBin = myData;
}
};
// This clears out any previously set overlay icons...
window.external.msSiteModeClearIconOverlay();
// Run it once to kick everything off...
myPin.init([{ "num": 1, "label": "Label 1" },
{ "num": 2, "label": "Label 2" },
{ "num": 3, "label": "Label 3" },
{ "num": 4, "label": "Label 4" },
{ "num": 5, "label": "Label 5" }
]);
// This is only here because I want to simulate pulling data on a regular interval...
setInterval(function () { myPin.getData(); }, 5000);
</script>
</body>
</html>

　　Pinned Site Test

　　智能缩略图

　　对于本地的Windows应用，用户通过点击任务栏上的按键实现与网站的交互而无需打开站点的窗口。并且，一个固定的站点可以将一套按钮应用于所有的页面。每一个按钮代表着一个特定的指令并可以在特定的页面中被执行，所以，用户可以在窗口最小化的状态下实现与站点的交互而无需激活窗口。下面的几幅截屏图片中，我们看到通过智能缩略图，用户可以操纵一个带有多个视频文件的页面，实现播放，暂停以及视频的选择。所有这一切都无需用户打开页面浏览窗口。

　　Figure 4视频页面智能缩略图

　　在同一个缩略图内，我们最多可以设置7个按钮。因为由于用于放置缩略图的位置有限，以及按钮的数量的变化，按钮的大小并没有一个标准。

　　建议大家考虑按钮的优先级，尽可能的保证最常用的按钮位列于非常好的位置。

　　· 当用户点击一个按钮，一个具有预制ID的事件将会被返回到页面执行
　　· 按钮可以被创建，展示隐藏，启用以及禁用，同时，它们的图标也能够被更改

　　缩略图按钮的定义：

　　在下面的示例中，我们利用msSiteModeAddThumbBarButton函数来创建三个缩略图按钮，第一个参数用来记录icon的URL地址，第二个参数用来存储按钮提示(可选)。当按钮被点击时，上述函数返回一个ID并将其交予系统。

btn1 = window.external.msSiteModeAddThumbBarButton( 'http://host/images/button1.ico', 'button 1');

　　btn2 = window.external.msSiteModeAddThumbBarButton( 'http://host/images/button2.ico', 'button 2');

　　btn1 = window.external.msSiteModeAddThumbBarButton( 'http://host/images/button3.ico', 'button 3');

　　在用户点击按钮时候，我们可以通过handler向以及msthumbnailclick产生事件。下面的示例代码将会展示如何注册一个event handler.

　　handler1, 处理所有的按键产生事件

document.addEventListener('msthumbnailclick', handler1, false);

　　…

　　function handler1 (btn) {

　　alert ("addeventlist:thumbnail btn id" + btn.buttonID);

　　}

　　在定义之后，你可以通过msSiteModeShowThumbBar函数来实验这个功能

window.external.msSiteModeShowThumbBar();

　　利用 msSiteModeUpdateThumbBarButton函数来设置按键的状态以及是否可见。

　　下面三行代码中，button1被禁用但是可见，button2可用且可见,button3可用但是不可见。

window.external.msSiteModeUpdateThumbBarButton(btn1, false, true);

　　window.external.msSiteModeUpdateThumbBarButton(btn2, true, true);

　　window.external.msSiteModeUpdateThumbBarButton(btn3, true, false);

　　按键状态的改变均可以立即生效;但是，按键可见性的修改只有当缩略图窗口被刷新之后才能生效。

　　你可以定义和使用另一组按键风格实现动态替换当前按键信息。首先，定义一个新的风格。使用 msSiteModeAddButtonStyle方法去定义另一组按键图标及提示语句。下面的实例代码定义了 style1 for btn1，采用一组新的图标和提示语句.

style1 = window.external.msSiteModeAddButtonStyle(btn1, 'http://host/images/style1.ico', 'style1');

　　之后，通过msSiteModeAddButtonStyle函数启用这些已经定义过的按钮风格。下面一行代码就是启用刚才定义的style1 to btn1.

　　window.external.msSiteModeShowButtonStyle(btn1, style1);

　　当用户从你的站点跳出时，需要将缩略图自动隐藏。与此同时，当用户重新回到你的站点时，你需要重新启用他们。

　　简单JavaScript代码

// Declare button variables

　　var btn1, btn2;

　　// This handler will dispatch the event by using the button ID

　　function onButtonClicked(btn)

　　{

　　switch (btn.buttonID) {

　　case btn1:

　　// Handle button 1 click

　　// Trigger Twitter sharing functions here

　　break;

　　case btn2:

　　// Handle button 2 click

　　// Trigger Facebook sharing functions here

　　break;

　　}

　　}

　　// Here we're storing the button ID in our variables to be referenced in the callback

　　// We've assigned each button its own icon and set the tooltip text

　　btn1 = window.external.msSiteModeAddThumbBarButton("/icons/twitter.ico","Twitter");

　　btn2 = window.external.msSiteModeAddThumbBarButton("/icons/facebook.ico","Facebook");

　　// Add an event listener

　　document.addEventListener("msthumbnailclick", IEPin.onButtonClicked, false);

　　// To display the buttons we call msSiteModeShowThumbBar

　　// NOTE: These toolbar buttons will exist for as long as the pinned site is open

　　window.external.msSiteModeShowThumbBar();

　　代码使用方法

　　1. 创建并上传图标 (.ico)

　　2. 将所有的 window.external calls打包到 JavaScript try/catch结构里面，通过msIsSiteMode检测用户是否已经启用了固定网功能

　　3. 使用 msSiteModeAddThumbBarButton 来添加一个智能缩略图控件msSiteModeAddThumbBarButton需要以下两个参数:

　　· icon: 图标(.ico) 地址 (全地址或者相对地址)

　　· tooltip: 按钮名称(鼠标悬停时候出现)

　　4. 每一个msSiteModeAddThumbBarButton 呼出事件的结果保存以建立一个参考库，你需要这些参考来确定具体是哪一个按键被点击

　　5. 设置一个事件监听器来监听 msthumbnailclick事件，用以捕获用户点击按钮的时间

　　6. 当按键被点击时 msthumbnailclick事件返回。buttonID属性以及步骤4中的参考将会确定究竟是哪个按键被点击了。

　　7. 将上述代码复制粘贴到 Step 2中的try/catch结构里或者加到您自己的函数中

　　8. 更多细节请访问 How to Create Thumbnail Toolbars.

　　总结

　　通过使用固定网站功能，用户可以从Windows 7的任务栏上一键启动你的网站应用，上面的五项功能带来本地化的用户体验能够大大的方便用户，由此增强用户体验，大幅提高用户使用粘性，并最终提高网站的品牌认知度。

　　短短几行代码就能实现如此立竿见影的功能，何乐而不为呢?马上行动起来吧!

关注我们