在通知 Firefox OS 中显示图标答案

【问题标题】：Display icon in notifiaction FirefoxOS在通知 Firefox OS 中显示图标
【发布时间】：2014-04-06 18:09:31
【问题描述】：

我想在 Notofication Firefox OS 中显示一个图标，因为我使用此代码：

var img = './images/icon-30.png';
var notification = new Notification('Notification', { body: 'Body Notification', icon: img });
notification.addEventListener('click', function() {launchSelf();});

在桌面图标显示良好

但图标不显示在移动设备（Firefox OS Simulator）

有什么问题？任何的想法？谢谢。

更新

如果我像这样从 url 获取图标：https://cdn1.iconfinder.com/data/icons/app-tab-bar-icons-for-ios/30/User_login.png 图标在模拟器中显示良好，所以我认为问题是路径：/

注意：我使用的是 Firefox OS 1.3，图标大小为 30 x 30

【问题讨论】：

标签： javascript firefox firefox-os web-notifications

【解决方案1】：

引用tsvetko/HTML5-Desktop-Notifications

将设置为 IE 和通知的自定义叠加层的图标从 Windows 上运行的 Chrome 显示。请注意，图标默认为 Chrome、Safari 和 Firefox 不需要，但 IE 需要。在为了统一实现，应始终提供图标为了显示所有支持的浏览器的通知。图标参数可以是带有图标位置的字符串，但也可以是具有以下属性的对象： {"x16": 仅适用于 IE 的图标。这图标应为 16x16px *.ico 格式，“x32”：所有其他图标浏览器（Windows 上的 Chrome、Firefox）。图标的大小应该是 32x32px，支持的格式：jpg/png/ico}。再一次 - Safari 和 MacOS 上的 Chrome 不允许设置图标。 对于 Firefox Mobile，图标始终是 Firefox 图标。

尝试使用 16x16px 或 32x32px 大小的图标。

【讨论】：

是的，我尝试了，但没用，我更新了我的问题
你问题中的图标还是30x30

【解决方案2】：

joschi70 有一个可行的答案，但您可以避免这样的替换操作：

var img = window.location.origin + '/images/icon-30.png';

（我假设您已经在清单中设置了 origin 字段。）

另外，您可能应该为通知使用 32x32 图标（尽管 Firefox OS 启动器需要 30x30，叹气）。

【讨论】：

【解决方案3】：

不幸的是，我也尝试过，但没有成功。这似乎是 Firefox OS 上的一个错误，将相对路径作为本地文件 https://bugzilla.mozilla.org/show_bug.cgi?id=980567 。

【讨论】：

【解决方案4】：

正如 Frédéric Harper 所说，这是 FirefoxOS 中的一个错误。如果您构造这样的绝对路径，似乎会起作用：

icon: window.document.URL.replace(/^(.*\/).*/, "$1") + "img/notification_logo.png"

【讨论】：

【解决方案5】：

我遇到了同样的问题。

我“伪造”了一个绝对网址以供参考...

我用过这个功能：

function getURLResource(path)
{
    // notice that index.html is the launchpath of your app
    var url = window.location.href.replace("index.html", "");

    return url + path;

};

// In your case you can do something like that:
var url = getURLResource("images/icon-30.png");

console.log(url);
// Will print something similar to this:
url = "app://<identifier>/images/icon-30.png";

希望对你有帮助

路易斯·奥古斯托·韦伯·梅尔卡多。

【讨论】：