使用站点固定和覆盖图标增强用户通知和参与度
使用站点固定和覆盖图标增强用户通知和参与度
我最近在测试 IE9 的站点固定 API 时，发现了一个可以增强用户通知的功能。如果您不熟悉站点固定，它是一种通过 Windows 任务栏为用户提供对其常用网站的便捷快速访问的绝佳方式。在 BuildMyPinnedSite.com 上有一个很好的概述，解释了它的工作原理。
让用户保持最新
该 API 提供的一项功能是通知概念，它允许开发人员向最终用户提供警报。此功能允许您动态插入自定义覆盖图标，当有重要信息可用时，可以提醒用户。这些覆盖图标会呈现在固定到任务栏的网站图标的上方。如果您查看下图，您可以看到它的实际效果
所以，如果您考虑一下可能性，任何提供收件箱、特别优惠或发送有时限警报的网站都可以利用此通知功能来让其用户保持最新状态，并提高他们在网站上的参与度。像赫芬顿邮报这样的网站已经发现，固定了赫芬顿邮报的 用户在网站上花费的时间增加了 49%。
最棒的是，添加此功能非常容易。
设置
对于这篇博文，我们不会深入探讨固定网站的基本知识。如果您想了解更多信息，这里有一个很好的资源可以帮助您快速上手：BuildMyPinnedSite.com。事实上，我就是用这个网站来学习基础知识的，它非常值得一逛。
要添加通知，您需要一些东西
- 一个很酷的网站图标。如果您没有，可以使用方便的 基于 Web 的 X-Icon 编辑器 来创建一个。
- 一套要使用的覆盖图标。建议尺寸为 16×16。
该 API 基于 JavaScript，我们将使用以下方法
- window.external.msSiteModeClearIconOverlay()
- window.external.msSiteModeSetIconOverlay()
- window.external.msSiteModeActivate()
- window.external.msIsSiteMode()
window.external.msSiteModeClearIconOverlay 方法用于清除任何先前设置的覆盖图标。window.external.msSiteModeSetIconOverlay 允许您指定通知图标的名称以及可访问的描述。最后，我们将使用 window.external.msSiteModeActivate 来闪烁固定图标以通知用户更新。最后，window.external.msIsSiteMode 将让我们知道页面是否作为固定网站启动，从而让我们能够更好地确定何时运行代码。
对于覆盖图标，我使用了五个图像，分别显示数字 1 到 5，以指示用户收件箱中的消息数量。
代码
我需要添加的第一件事是对我的网站图标的引用。请注意，如果您不添加，Internet Explorer 的图标将作为默认使用。
<link rel="shortcut icon" type="image/ico" href="favicon.ico" />
接下来，我想创建一些样本数据进行处理。在我的演示中，我想让覆盖图标每 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]);
}
}
正如您所看到的，它使用计数器变量 currIndex 来确定要获取的数组元素，然后将数据传递给 dispOverlay()。在这里，我们使用 window.external.msSiteModeClearIconOverlay() 来清除任何先前显示的覆盖图标，并生成实际图标名称的字符串。您可以看到 oImg 变量是根据我们使用的数据即时创建的。
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();
}
测试一下
要进行测试，只需在 Internet Explorer 9 中运行您新固定的页面，然后将选项卡拖到任务栏即可。
在页面固定五秒钟后，代码将触发第一个通知，并在随后的每五秒钟内继续循环显示其他图标。
需要记住的重要一点是，IE F12 开发者工具可供您用于调试固定网站。因此，如果您遇到奇怪的问题，只需按 F12 键，工具就会出现。
演示和最终代码
您可以在 IE9 中访问我制作的演示：
http://reybango.com/demos/sitepinning/index.html
页面加载后，将选项卡拖到任务栏并固定。您应该会看到一个新窗口出现，其中包含您新固定的网站。五秒钟后，您将在任务栏中看到第一个覆盖图标出现。
这是完整的源代码。您也可以在此处下载所有内容。真正棒的是，实现这一点并不需要很多代码。事实上，使用 API 只需 4 个方法调用。大部分代码是用来模拟数据拉取的。而">对用户参与度的影响绝对值得添加此功能。
<!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>