iPad PWA Compatibility

[jakelfreeman]

Is Userscripts compatible with PWAs (installed, full-screen version of webpages) in Safari on iPadOS? If so, how do you enable it? I have it working on a target page in the regular Safari app but for some reason when I open the PWA version it doesn't work. Any help would be much appreciated.

[quoid]

@jakelfreeman

PWAs (installed, full-screen version of webpages)

Can you elaborate on the install process you reference here?

[jakelfreeman]

In Safari on an iPad click the share button just to the right of the URL bar and select "Add to Home Screen" from the popup menu. In the new screen that appears click "Add" in the top right corner. The webpage will now be accessible as a standalone app (really just a Safari frame) from your homescreen in full-screen mode (no tabs, url bar, etc...)

[quoid]

@jakelfreeman

Can you provide me with a webpage link to test this on?

Adding to the home screen for "normal" web pages runs through the default safari browser, which means extensions are supported and function as expected (in my experience). I assume "true" PWAs also run through the browser, which I'd expect to also have extension support, but I can't say I've any installed. I believe hiding the tabs and bars is just a matter of manipulating the page metadata (but that could have changed)

[jakelfreeman]

It will work on pretty much any site, but I'm trying to do it with Todoist (https://todoist.com/app/). If you don't have an account, try GMail, Slack, Evernote... basically any mainstream service that has a browser-based webapp.

[quoid]

It will work on pretty much any site...

I have sites added to my home screen and it just opens those sites in the Safari browser and thus all extensions work normally. I do not see any bars hidden when doing this or any altered experience when using.

I added gmail to my home screen and like the other webpages I have on my home screen, it just opens it in Safari.

If I had to guess, I would assume Todoist is a SPA. And because of that it doesn't fire off the events needed to trigger your userscript. For example, if you have a script for https://www.example/foo and https://www.example/ is a SPA and also your entry point to the page. the script for https://www.example/foo will likely never execute because the only load event occurs on https://www.example/.

When writing the userscript you'd want to target https://www.example/ and using other methods (like mutation observers) to determine when to execute your script.

Again, this is just a guess.

To help out more, I'd need an example that doesn't require a login and contains: in full-screen mode (no tabs, url bar, etc...)

Or direction how remove tabs, urls bar, etc...

[jahtnamas]

oh good it’s not just me.

i realize you’re asking for an example of an PWA/SPA that doesn’t require login but i think testing with an instagram dark mode script on, well, instagram’s SPA should confirm itself rather easily without having to log in. is the login screen black? if yes, the test succeeds.

[ACTCD]

I don't think you can use Safari extensions in PWAs.

In fact, the GitHub website is a PWA when added to home screen.

For more convenient testing, I wrote the following script, which can make any page add to home screen as a PWA (instead of bookmarks), note that after clicking the PWA icon it does not open in Safari, but as a standalone full screen app, you can see in the multitasking interface that it and Safari are two separate applications, it won't load any extensions, just like you won't see the alert popup from this script inside.

You can simply use this page as an add-on test without too many surprises: http://example.com/

// ==UserScript==
// @name               DEBUG.PWA-Maker
// @match              *://*/*
// @grant              none
// @run-at             document-start
// ==/UserScript==

(function () {
    'use strict';

    const meta = document.createElement('meta');
    meta.name = 'apple-mobile-web-app-capable';
    meta.setAttribute('content', 'yes');

    if (document.head) {
        document.head.append(meta);
    } else {
        new MutationObserver((mutationList, observer) => {
            document.head && (observer.disconnect(), document.head.append(meta));
        }).observe(document, { subtree: true, childList: true });
    }

    function WindowLoaded() {
        alert('DEBUG.PWA-Maker');
    }

    if (document.readyState === 'complete') {
        WindowLoaded();
    } else {
        window.addEventListener('load', WindowLoaded);
    }

})();

[quoid]

In fact, the GitHub website is a PWA when added to home screen.

Thank you @ACTCD - i added it to my home screen and it does align with what you are saying. That is, it doesn't seem like extensions are supported for PWAs.

@jakelfreeman it might be worth sending feedback to Apple on this, I don't believe there is anything we can do without their intervention

[barart]

As apple has not allow this currently, is there a way to "save" the website as a not pwa so the extension is enabled? like inverse of your script @ACTCD ?

[ACTCD]

@barart I haven't tried it, but you could.

[barart]

@ACTCD it works with this script, but it open with nav-bar, tabs, etc... any way to make it fullscreen always?

// ==UserScript==
// @name Disable PWA Mode
// @match <all_urls>
// @run-at document-start
// ==/UserScript==

(function () {
    'use strict';

    // Remove the apple-mobile-web-app-capable meta tag
    const existingMeta = document.querySelector('meta[name="apple-mobile-web-app-capable"]');
    if (existingMeta) {
        existingMeta.remove();
    }
})();

[ACTCD]

@barart You can't enjoy the features of PWA in Safari APP, can you?

Also, please note that your approach may not work for PWA loaded via Web app manifests.

[ACTCD]

Apple makes this clear in their latest newly released user-facing support page. Use Safari extensions on your Mac

When using a Safari web app, extensions are not available, but you can easily switch to Safari: Click the Share button, then choose Open in Safari. Or choose File > Open in Safari.

Although this page is for the enhanced Safari web app in macOS 14, it is actually the PWA and behaves basically the same as on iOS.