shared/utils/src/get-pwa-display-mode.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

export enum PWADisplayMode {
    TWA = 'twa',
    BROWSER = 'browser',
    STANDALONE = 'standalone',
    MINIMAL = 'minimal-ui',
    FULLSCREEN = 'fullscreen',
    OVERLAY = 'window-controls-overlay',
    UNKNOWN = 'unknown',
}

/**
 * For PWA, reads the "display" value from the manifest.json and returns the proper value if it matches.
 * Inspired by the sample snippet here: https://web.dev/learn/pwa/detection
 */
export const getPWADisplayMode = (): PWADisplayMode => {
    switch (true) {
        case document.referrer.startsWith('android-app://'):
            return PWADisplayMode.TWA;

        case window.matchMedia('(display-mode: browser)').matches:
            return PWADisplayMode.BROWSER;

        case window.matchMedia('(display-mode: standalone)').matches:
            return PWADisplayMode.STANDALONE;

        case window.matchMedia('(display-mode: minimal-ui)').matches:
            return PWADisplayMode.MINIMAL;

        case window.matchMedia('(display-mode: fullscreen)').matches:
            return PWADisplayMode.FULLSCREEN;

        case window.matchMedia('(display-mode: window-controls-overlay)')
            .matches:
            return PWADisplayMode.OVERLAY;

        default:
            return PWADisplayMode.UNKNOWN;
    }
};