[JoyFreak] Custom PWA

[JoyFreak] Custom PWA

No permission to download

Iggy

Well-known member
Is the json file respecting a user's choice for style? We have eight styles (four color variations of two different themes, XF default theme and a third party theme). In XF's implementation, the app's title bar and other attributes change when a visitor changes themes. These two lines:

Code:
    "background_color": "EDIT",
    "theme_color": "EDIT"

...make me think the theme might not be changed?

And, what values go in there? Hex or RGB?
we have hex in ours....but we just copied the value from webmanifest.php

man i finally figured out how to implement this tho so happy lol.....

what we missed was the part saying you have to load the file in a browser to actually read it correctly....

then fyi @JoyFreak you have a couple commas in there that need to be removed or you get errors....(after the image sizes)

far as i can tell it should be working now, but then again i dont have an iphone
 

colcar

Active member
Hi @JoyFreak thanks for this, it looks great.

Just a quick question (if anyone else knows the answer please feel free to chime in!)

Does this put an 'Install App' button in the menu in iOS? Like you get on Android?

Or do you have to go through the Share> Add to Homescreen

I just want to be able to advise my forum users on how to install my forum as an app and I don't have an iPhone so I don't know the process.
 

colcar

Active member
Hi @JoyFreak thanks for this, it looks great.

Just a quick question (if anyone else knows the answer please feel free to chime in!)

Does this put an 'Install App' button in the menu in iOS? Like you get on Android?

Or do you have to go through the Share> Add to Homescreen

I just want to be able to advise my forum users on how to install my forum as an app and I don't have an iPhone so I don't know the process.
Never mind, I now know this customisation is to make the PWA look more like an actual app in iOS, evidently users would still have to go to Share> Add to Homescreen to 'install' your app on their device.
 

JoyFreak

Well-known member
You no longer need this, its stock in XF2.
It's true, PWA is available in XF2 but this small tweak makes the PWA feel like an actual app on iOS rather than opening up in Safari like a website.
It's done by a simple edit, changing ("display": "minimal-ui",) to ("display": "standalone",). Rather than using the webmanifest.php file to make the edit, which will overwrite every time you upgrade the software, we use a custom PWA file called webmanifest.json.

Hope this makes better sense.
 

Wildcat Media

Well-known member
Same here, the Install link disappeared on Chrome browser on Android.
I never did get it to work reliably, whether it was through this modification or the default XenForo. Occasionally it would appear but, most of the time, it wouldn't. This modification only changes 1) the file used as the web manifest and 2) one line in the manifest to alter the UI behavior, so I don't see how it could cause it. My only thought (and just a wild guess) is that there is something either in XF or the web standard itself that doesn't like "standalone" vs. "minimal-ui" or there is something else we're not seeing.

When this goes live on my next project, we will just instruct members to add the site to their home screens, as that seems to be the only reliable way to get this to work.
 

thenashy

Active member
Possible there is a caching issue on the device that causes this? Mine did eventually just start working, and I have found the original threads on our site, a couple of others could see the install button while I was unable to when we were troubleshooting.
 

JoyFreak

Well-known member
The install button disappears after you install and you’ll only really be able to see it again is if you uninstall it from your device. A lot of people overlook this.
 
Top