Question

我的应用程序有点问题，似乎通知没有显示图标。根据{{3}}，Firefox OS中存在一个相对路径的错误，但它列出的修复程序都没有对我有用。我已经在设备和模拟器中测试过它。我正在开发的应用程序是打包和特权的，这可能是个问题吗？

我正在使用这样的东西：

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

该应用与Firefox OS 1.2及更高版本兼容。

Answer 1

一个特定的Firefox操作系统问题是您可以传递图标的路径以在通知中使用，但如果应用程序已打包，则您无法使用像/my_icon.png这样的相对路径。您还无法使用 window.location.origin + "/my_icon.png"，因为window.location.origin在打包的应用中为 null 。

清单来源字段修复此问题，但在Firefox OS 1.1+中仅可用。

请参阅https://developer.mozilla.org/de/docs/Web/API/Notification/icon

但是，一种可能的解决方案是将图像编码为打包应用中的base64 url。您可以从外部资源接收base64个编码图像，并将它们直接传递给Notification API。

使用png的<{3}}编码器示例：

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

消息：

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

图标网址：

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

用法示例：

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

通知图标未显示

1 个答案: