最新の Windows (ChromeOS も) 版 Chrome で webkitNotifications.createHTMLNotification メソッドが非対応になってしまった。
代わりにリッチ通知という、いくつかのテンプレートに従って表現できるデスクトップ通知が追加された。
- Google Chrome 28提供開始。リッチ通知に対応(Windows)、Blinkエンジン採用 - Engadget Japanese
- 「Google Chrome 28」の安定版リリース Blink採用と「リッチ通知」機能(Windowsのみ) - ITmedia ニュース
ただ、このリッチ通知、CSP が厳しくなってしまい、外部サイトのイメージを簡単に表示できなくなった。回避するには、Ajax で取得してローカルに保存してパスを渡すか、data URI で指定する必要がある。
ここでは後者の方法で実装した例をメモしておく。HTML5 ではその辺を Blob オブジェクトによってわりと簡単に実装できる。
1 | var notOpt = { |
画像を responseType を blob として XMLHttpRequest で取得すると、レスポンス自体が既に Blob オブジェクトになっている。
あとは、createObjectURL で data URI 化して渡してあげれば良い。