通知圖標不顯示

Question

我的應用程序有點問題，看起來通知不顯示圖標。根據https://developer.mozilla.org/en-US/docs/Web/API/Notification/icon#Firefox_OS_notes，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 OS 問題是，你可以傳遞的路徑，以在通知中使用的圖標，但如果應用程序被打包你不能使用像/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

然而，一個可能的解決方案是將圖像編碼成打包應用程序內的base64url。您可以從外部資源接收base64編碼的圖像，並將它們直接傳遞給Notification API。

實施例png使用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; 
    }); 
} 

消息：

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