PWAで動いてる?isPWA();

origamium

Origami

Posted on January 28, 2020

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
}
💖 💪 🙅 🚩
origamium
Origami

Posted on January 28, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related