概要

ブラウザがどのWeb APIを利用できるか（サポートしているか）を、Modernizrがどのようなロジックで検出しているのか調べたときの記録です。
またブラウザ毎にModernizrの検出結果をまとめました。(safariは残念ながらiPhoneの実機を持っていないので調べていません。)

環境

Windows10 Professional
Modernizr 3.3.1
PC版ブラウザ
- Chrome 54
- Chrome Canary 56 (開発者向け)
- Firefox 49
- Fifefox Developer 51 (開発者向け)
- IE11
- Edge
Android版ブラウザ
- Chrome 54
- Chrome Canary 56 (開発者向け)
- Firefox 49
- Firefox Aurora 51 (開発者向け)

参考

Web APIの検出結果

PC版

バージョンは2016年11月10日時点のものです。

API	Chrome(54)	Chrome Canary(56)	FireFox(49)	FireFox Developer(51)	IE11	Edge
Event Listener	true	true	true	true	true	true
Geolocation API	true	true	*補足A	*補足A	true	true
History API	true	true	true	true	true	true
Notification	true	true	*補足B	*補足B	false	true
postMessage	true	true	true	true	true	true
ServiceWorker API	true	true	true	true	false	false
Touch Events	false	false	false	false	false	false
Force Touch Events	false	false	false	false	false	false
File API	true	true	true	true	true	true
Local Storage	true	true	true	true	true	true
Session Storage	true	true	true	true	true	true

補足A. Geolocation API

現在位置の追跡の設定

設定	Chrome(54)	Chrome Canary(56)	FireFox(49)	FireFox Developer(51)	IE11	Edge
許可	true	true	true	true	true	true
ブロック	true	true	false	false	true	true

Firefoxは現在位置の追跡の設定をブロックするとnavigator.geolocationがundefinedになる。

補足B. Notification

通知の設定

設定	Chrome(54)	Chrome Canary(56)	FireFox(49)	FireFox Developer(51)	IE11	Edge
許可	true	true	true	true	false	true
ブロック	true	true	false	false	false	true

Firefoxは通知の設定をブロックするとwindow.Notificationがundefinedになる。
IE11はNotificationをサポートしていない。

Android版

バージョンは2016年11月10日時点のものです。

API	Chrome(54)	Chrome Canary(56)	FireFox(49)	FireFox Aurora(51)
Event Listener	true	true	true	true
Geolocation API	true	true	*補足C	*補足C
History API	true	true	true	true
Notification	*補足D	*補足D	*補足D	*補足D
postMessage	true	true	true	true
ServiceWorker API	true	true	true	true
Touch Events	true	true	true	true
Force Touch Events	false	false	false	false
File API	true	true	true	true
Local Storage	true	true	true	true
Session Storage	true	true	true	true

補足C. Geolocation API

現在位置の追跡の設定

設定	Chrome(54)	Chrome Canary(56)	FireFox(49)	FireFox Aurora(51)
許可	true	true	true	true
ブロック	true	true	false	false

補足D. Notification

通知の設定

設定	Chrome(54)	Chrome Canary(56)	FireFox(49)	FireFox Aurora(51)
許可	true	true	true	true
ブロック	false	false	false	false

Event Listener

MDN - EventTarget.addEventListener

API検出ロジック

'addEventListener' in window

API利用可能の判定コード

if (Modernizr.eventlistener) {
  // supported
} else {
  // not-supported
}

Geolocation API

API検出ロジック

'geolocation' in navigator

API利用可能の判定コード

if (Modernizr.geolocation) {
  // supported
} else {
  // not-supported
}

現在地の設定

PC版Chrome

設定 → プライバシー → コンテンツの設定... → 現在地

PC版Firefox

アドレスバーにabout:configと入力 → geo.enabledで検索

IE11

インターネットオプション → プライバシー → 位置情報

Edge

Windows10の設定 → プライバシー → 位置情報

Android版Chrome

設定 → サイトの設定 → 現在地

Android版Firefox

アドレスバーにabout:configと入力 → geo.enabledで検索

History API

API検出ロジック

var ua = navigator.userAgent;

if ((ua.indexOf('Android 2.') !== -1 ||
    (ua.indexOf('Android 4.0') !== -1)) &&
     ua.indexOf('Mobile Safari') !== -1 &&
     ua.indexOf('Chrome') === -1 &&
     ua.indexOf('Windows Phone') === -1) {
  return false;
}

return (window.history && 'pushState' in window.history);

API利用可能の判定コード

if (Modernizr.history) {
  // supported
} else {
  // not-supported
}

Notification

API検出ロジック

if (!window.Notification || !window.Notification.requestPermission) {
  return false;
}
if (window.Notification.permission === 'granted') {
  return true;
}

try {
  new window.Notification('');
} catch (e) {
  if (e.name === 'TypeError') {
    return false;
  }
}

return true;

API利用可能の判定コード

if (Modernizr.notification) {
  // supported
} else {
  // not-supported
}

通知の設定

PC版Chrome

設定 → プライバシー → コンテンツの設定... → 通知

PC版Firefox

アドレスバーにabout:configと入力 → dom.webnotifications.enabledで検索

Edge

設定 → 詳細設定 → 通知

Android版Chrome

設定 → サイトの設定 → 通知

Android版Firefox

アドレスバーにabout:configと入力 → dom.webnotifications.enabledで検索

postMessage

MDN - window.postMessage

API検出ロジック

'postMessage' in window

API利用可能の判定コード

if (Modernizr.postmessage) {
  // supported
} else {
  // not-supported
}

ServiceWorker API

API検出ロジック

'serviceWorker' in navigator

API利用可能の判定コード

if (Modernizr.serviceworker) {
  // supported
} else {
  // not-supported
}

Touch Events

API検出ロジック

var bool;
if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
  bool = true;
} else {
  var query = ['@media (', prefixes.join('touch-enabled),('), 'heartz', ')', '{#modernizr{top:9px;position:absolute}}'].join('');
  testStyles(query, function(node) {
    bool = node.offsetTop === 9;
  });
}

return bool;

prefixes,testStylesはModernizrの関数です。

API利用可能の判定コード

if (Modernizr.touchevents) {
  // supported
} else {
  // not-supported
}

PC版Chromeでのエミュレート

エミュレートするデバイスがTouch Eventsをサポートしていれば、PC版Chromeでも有効になります。
または、DevToolsのドロワーでSensorsを開きTouchの設定に"Force enabled"を選択します。

Force Touch Events

API検出ロジック

if (!hasEvent(prefixed('mouseforcewillbegin', window, false), window)) {
  return false;
}

return MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN && MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN;

hasEvent,prefiexedはModernizrの関数です。

API利用可能の判定コード

if (Modernizr.forcetouch) {
  // supported
} else {
  // not-supported
}

File API

API検出ロジック

!!(window.File && window.FileList && window.FileReader)

API利用可能の判定コード

if (Modernizr.filereader) {
  // supported
} else {
  // not-supported
}

Local Storage

MDN - Window.localStorage

API検出ロジック

var mod = 'modernizr';
try {
  localStorage.setItem(mod, mod);
  localStorage.removeItem(mod);
  return true;
} catch (e) {
  return false;
}

API利用可能の判定コード

if (Modernizr.localstorage) {
  // supported
} else {
  // not-supported
}

Session Storage

MDN - Window.sessionStorage

API検出ロジック

var mod = 'modernizr';
try {
  sessionStorage.setItem(mod, mod);
  sessionStorage.removeItem(mod);
  return true;
} catch (e) {
  return false;
}

API利用可能の判定コード

if (Modernizr.sessionstorage) {
  // supported
} else {
  // not-supported
}

Modernizrを使ってWeb APIの利用可能状況を調べる

概要

Web APIの検出結果

PC版

補足A. Geolocation API

補足B. Notification

Android版

補足C. Geolocation API

補足D. Notification

Event Listener

Geolocation API

現在地の設定

PC版Chrome

PC版Firefox

IE11

Edge

Android版Chrome

Android版Firefox

History API

Notification

通知の設定

PC版Chrome

PC版Firefox

Edge

Android版Chrome

Android版Firefox

postMessage

ServiceWorker API

Touch Events

PC版Chromeでのエミュレート

Force Touch Events

File API

Local Storage

Session Storage