CODEWITHSUNDEEP
javascriptfirefoxfirefox-osweb-notifications
2dar
2dar

Reputation: 651

Display icon in notifiaction FirefoxOS

I want display an icon in Notofication Firefox OS for that I use this code :

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

In the Desktop the icon display well

enter image description here

but the icon not display in mobile ( Firefox OS Simulator )

enter image description here

what is the problem ? Any idea ? Thanks.

Update

If I get the icon from the url like this : https://cdn1.iconfinder.com/data/icons/app-tab-bar-icons-for-ios/30/User_login.png the icon display well in the simulator, So I think the problem is the path :/

NB: I use Firefox OS 1.3 and the size of icon is 30 x 30

Upvotes: 3

Views: 1810

Answers (5)

Luis Augusto
Luis Augusto

Reputation: 11

I was having the same problem.

I "forge" an absolute url for the reference...

I used this function:

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";

Hope it helps you,

Luís Augusto Weber Mercado.

Upvotes: 0

Doug Reeder
Doug Reeder

Reputation: 739

joschi70 has a working answer, but you can avoid the replace operation like this:

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

(I'm assuming you've set the origin field in the manifest.)

Separately, you should probably use a 32x32 icon for Notifications (though the Firefox OS launcher wants a 30x30, sigh).

Upvotes: 1

joschi70
joschi70

Reputation: 51

As mentioned by Frédéric Harper, this is a bug in FirefoxOS. What seems to be working if you construct an absolute path like this:

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

Upvotes: 0

megawac
megawac

Reputation: 11353

Quote from tsvetko/HTML5-Desktop-Notifications

The icon that will be set as a custom overlay for IE and notification displayed from Chrome running on Windows. Note that icon by default is not required for Chrome, Safari & Firefox, but is required for IE. In order to unify the implementations, the icon should be always provided in order to display notifications for all supported browsers. icon param could be String with icon's location, but it could be also an Object with the following properties: {"x16": Icon for IE only. The icon should be 16x16px *.ico format, "x32": Icon for all other browsers(Chrome on Windows, Firefox). The icon's size should be 32x32px, supported formats: jpg/png/ico}. Once again - Safari and Chrome on MacOS does not allow icon to be set. For Firefox Mobile, the icon is always Firefox icon.

Try using a 16x16px or 32x32px size icon.

Upvotes: 3

fharper
fharper

Reputation: 559

Unfortunately, I tried it too without any success. It seems it's a bug on Firefox OS with relative paths as local files https://bugzilla.mozilla.org/show_bug.cgi?id=980567 .

Upvotes: 0

Related Questions