How to emulate an installed PWA (i.e. set window.navigator.standalone=true)

[HosseyNJF]

Homework

• I took the time to write a good, descriptive issue title
• I read nativefier --help and API.md.
• I checked CATALOG.md for community suggestions & workarounds.
• I searched existing issues, open & closed. Yes, my question is new.
• I'm running the latest version.

Your question

The website app.blubank.com is a financial bank account management application, and it strictly requires you to use it only on the phone. To use it on a desktop computer, Two things must be changed:

1. User Agent: I sent a fake iOS user agent.
2. window.navigator.standalone: This attribute must be true; otherwise, the site will stop working.

I tried injecting this script:

window.navigator.standalone = true;

But it seems like because this is called in the DOMContentLoaded event, it is too late to change that attribute and the script already detected my PC. I tried searching in electron docs and other issues, but there is no other way to change this variable before the site's main script.

Steps to reproduce

nativefier "https://app.blubank.com" --name "ḃlu" -u "Mozilla/5.0 (iPhone; CPU iPhone OS 16_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.4 Mobile/15E148  Safari/604.1" --inject i.js --single-instance --tray --width 450 --height 850

Debug info

No response

Nativefier version

50.1.1

Node.js version

v19.9.0

npm version

9.6.3

OS

macOS Ventura 13.3 (M1)

[HosseyNJF]

This is the method I extracted from the site's source which is responsible for checking PWA status:

export default function isStandalone() {
  return window.navigator.standalone || window.matchMedia('(display-mode: standalone)').matches
}