Notification icon doesn't show

Question

I have a little problem with my app, it seems that notifications don't show the icon. According to https://developer.mozilla.org/en-US/docs/Web/API/Notification/icon#Firefox_OS_notes there is a bug in Firefox OS with relative paths, but none of the fixes it list have worked for me. I have tested it in both device and emulator. The app I'm developing is packaged and privileged, Can that be a problem?

I'm using something like this:

function showNotification(title,text) {
    var icon = window.location.origin + "/icon.png";
    new Notification(title, {body: text}, {icon: icon});
}

The app is compatible with Firefox OS 1.2 and later.

Answer 1

One particular Firefox OS issue is that you can pass a path to an icon to use in the notification, but if the app is packaged you cannot use a relative path like /my_icon.png. You also can't use window.location.origin + "/my_icon.png" because window.location.origin is null in packaged apps.

The manifest origin field fixes this, but it is only available in Firefox OS 1.1+.

See https://developer.mozilla.org/de/docs/Web/API/Notification/icon

However, one possible solution is to encode the image into an base64 url within packaged apps. You can receive base64 encoded images from an external resource and pass them directly to the Notification API too.

Example png encoder using canvas:

 function createIcon(iconURL) {
   return new Promise(function(resolve, reject) {
     let canvas, ctx, image;

     canvas = document.createElement('CANVAS');
     ctx = canvas.getContext('2d');
     image = new Image();

     image.crossOrigin = 'Anonymous';
     image.onload = function() {
         let dataURL;
         canvas.height = image.height;
         canvas.width = image.width;
         ctx.drawImage(image, 0, 0);

         // Define the image format here more dynamically
         dataURL = canvas.toDataURL('image/png');

         // Resolve the promise
         resolve(dataURL);

         // Clear the memory
         canvas = null; 
     };

     image.onerror = function() {
       reject(new Error('createIcon: Can not convert image to base64'));
     };

     // The image will load after setting an src attribute
     image.src = iconURL;
   });
 }

Message:

 let message = {
   title: 'Batman message',
   text: 'Robin pick my up at my cave'
 };

Icon URL:

 const iconURL = '/assets/icons/batman_icon128x128.png';

Usage example:

 // Promise
 createIcon(iconURL).then((dataURL) => {

   // Gecko >= 22
   if(typeof window.Notification === 'function') {
     new Notification(message.title, {
       body: message.text,
       icon: dataURL
     });
   }
   // Gecko < 22
   else if (typeof navigator.mozSetMessageHandler === 'function') {

     let notification = navigator.mozNotification.createNotification(
       message.title,
       message.text,
       dataURL
     );

     notification.show();
   }
 }).catch(function(error) {
   // Rejection
   console.warn(error);
 });