DEV Community

Origami
Origami

Posted on

2 1

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
Enter fullscreen mode Exit fullscreen mode

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

window.navigator.standalone
// true: working on PWA
// undefined: not working on PWA
Enter fullscreen mode Exit fullscreen mode

CSS

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

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

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay