[JoyFreak] Custom PWA

[🔥Iggy🔥]

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:

    "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]

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]

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.

 

[MacSeah]

Does setting this up means our IOS users will be able to install our site as a PWA ?

 

[Dad.]

Does setting this up means our IOS users will be able to install our site as a PWA ?

You no longer need this, its stock in XF2.

 

[MacSeah]

You no longer need this, its stock in XF2.

Thank you @Mike Creuzer.

 

[JoyFreak]

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.

 

[viper357]

After making these changes, the PWS install link isn't available to users anymore for us.

Same here, the Install link disappeared on Chrome browser on Android.

 

[Wildcat Media]

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]

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]

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.

 

[thenashy]

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.

That sounds like something silly enough that I would do too.

 

[JoyFreak]

That sounds like something silly enough that I would do too.

It happens