DEV Community

Origami
Origami

Posted on

PWAで動いてる?isPWA();

JavaScript

ChromeとFirefox、iOS Safari 13以降であれば次の方法が可能です。詳しい利用可能状況はcaniuseで。

https://caniuse.com/#search=display-mode

(window.matchMedia('(display-mode: standalone)').matches
// true: working on PWA
// false: not working on PWA

iOS Safari 12以前ではdisplay-modeを利用できないので、次の方法を利用します。

window.navigator.standalone
// true: working on PWA
// undefined: not working on PWA

CSS

CSSではdisplay-mode media queryを利用すればPWAで動いているかどうかでスタイルを変更できます。

@media all and (display-mode: standalone) {
    // styles for PWA
}

Top comments (0)