summaryrefslogtreecommitdiff
path: root/shared/utils/src/get-pwa-display-mode.ts
diff options
context:
space:
mode:
Diffstat (limited to 'shared/utils/src/get-pwa-display-mode.ts')
-rw-r--r--shared/utils/src/get-pwa-display-mode.ts39
1 files changed, 39 insertions, 0 deletions
diff --git a/shared/utils/src/get-pwa-display-mode.ts b/shared/utils/src/get-pwa-display-mode.ts
new file mode 100644
index 0000000..506c80d
--- /dev/null
+++ b/shared/utils/src/get-pwa-display-mode.ts
@@ -0,0 +1,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;
+ }
+};