L'icône de notification ne s'affiche pas

Question

J'ai un petit problème avec mon application, il semble que les notifications n'affichent pas l'icône. Selon https://developer.mozilla.org/en-US/docs/Web/API/Notification/icon#Firefox_OS_notes il y a un bug dans Firefox OS avec des chemins relatifs, mais aucune des corrections qu'il a répertoriées n'a fonctionné pour moi. Je l'ai testé dans les deux appareils et émulateur. L'application que je développe est packagée et privilégiée, cela peut-il être un problème?

J'utilise quelque chose comme ceci:

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

L'application est compatible avec Firefox OS 1.2 et versions ultérieures.

Answer 1

Un Firefox OS particulier problème est que vous pouvez passer un chemin vers une icône à utiliser dans la notification, mais si l'application vous est emballé ne pouvez pas utiliser un chemin relatif comme /my_icon.png. Vous aussi ne peut pas utiliserwindow.location.origin + "/my_icon.png" car window.location.origin est null dans les applications empaquetées.

Le champ d'origine du manifeste corrige ce problème, mais il est uniquement disponible dans Firefox OS 1.1+.

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

Cependant, une solution possible consiste à encoder l'image dans un base64url dans les applications packagées. Vous pouvez recevoir des images codées base64 provenant d'une ressource externe et les transmettre directement au Notification API.

Exemple png encodeur en utilisant 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' 
}; 

URL de l'icône:

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

Exemple d'utilisation:

// 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); 
});