Implemented Allow iOS fullscreen PWA by adding option for display: "standalone" in web app manifest.

adamgreenough

adamgreenough

Well-known member
This allows iOS to save the homescreen PWA as a fullscreen 'app'. Outbound link issues easily fixed with some extra JavaScript which I have been running with much success for the last year using a different homescreen add-on.

This opens all links apart from those marked target _blank (most external ones) to open within the same fullscreen view. The blank external links are opened in a safari view modal.

JavaScript: 
var a=document.getElementsByTagName("a");
for(var i=0;i<a.length;i++) {
    if(!a[i].onclick && a[i].getAttribute("target") != "_blank") {
        a[i].onclick=function() {
            window.location=this.getAttribute("href");
            return false;
        }
    }
}
 
Upvote 33
This suggestion has been implemented. Votes are no longer accepted.
adamgreenough said:
This allows iOS to save the homescreen PWA as a fullscreen 'app'. Outbound link issues easily fixed with some extra JavaScript which I have been running with much success for the last year using a different homescreen add-on.

This opens all links apart from those marked target _blank (most external ones) to open within the same fullscreen view. The blank external links are opened in a safari view modal.

JavaScript: 
var a=document.getElementsByTagName("a");
for(var i=0;i<a.length;i++) {
    if(!a[i].onclick && a[i].getAttribute("target") != "_blank") {
        a[i].onclick=function() {
            window.location=this.getAttribute("href");
            return false;
        }
    }
}
Click to expand...
I've voted up. After enabling PWA today I noticed on iOS it opens the app in the browser, overriding my custom settings, where I had it as "standalone" and it looked like a real app.
 
JoyFreak said:
I've voted up. After enabling PWA today I noticed on iOS it opens the app in the browser, overriding my custom settings, where I had it as "standalone" and it looked like a real app.
Click to expand...
I replaced my manifest.json with an edited version of the generated one (it's linked from PAGE_CONTAINER) if you'd like to run it standalone without an extra add-on for time being. Hopefully they make it an option! :)
 
adamgreenough said:
This allows iOS to save the homescreen PWA as a fullscreen 'app'. Outbound link issues easily fixed with some extra JavaScript which I have been running with much success for the last year using a different homescreen add-on.

This opens all links apart from those marked target _blank (most external ones) to open within the same fullscreen view. The blank external links are opened in a safari view modal.

JavaScript: 
var a=document.getElementsByTagName("a");
for(var i=0;i<a.length;i++) {
    if(!a[i].onclick && a[i].getAttribute("target") != "_blank") {
        a[i].onclick=function() {
            window.location=this.getAttribute("href");
            return false;
        }
    }
}
Click to expand...
Actually ever since XF 2.2 and the PWA update, everything is working as expected without any js hacks. All they need to do is include iOS in the code that determines if it should run "standalone". Well or maybe Apple did something in iOS 14 as well.

src/XF/WebManifestRenderer.php
1604808788613.webp
 
If you enable standalone then you need to add a larger back button. Using breadcrumbs to go back on an iPhone is not a good experience.
 
Okay I found one problem with the PWA on iOS, without the address bar there is no way to share thread links. I tried using the "Share" at the bottom of the page but it was trying to share the text in the thread body instead of a link. Could be a bug.
 
adamgreenough said:
This allows iOS to save the homescreen PWA as a fullscreen 'app'. Outbound link issues easily fixed with some extra JavaScript which I have been running with much success for the last year using a different homescreen add-on.

This opens all links apart from those marked target _blank (most external ones) to open within the same fullscreen view. The blank external links are opened in a safari view modal.

JavaScript: 
var a=document.getElementsByTagName("a");
for(var i=0;i<a.length;i++) {
    if(!a[i].onclick && a[i].getAttribute("target") != "_blank") {
        a[i].onclick=function() {
            window.location=this.getAttribute("href");
            return false;
        }
    }
}
Click to expand...

Where do you insert this?

Thanks!
Ray
 
Back
Top Bottom