[JoyFreak] Custom PWA

[JoyFreak]

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?

You can only set the value for one theme. That would depend on the default theme you are using. If you have a brand colour, use that.

Both should work but I’d use HEX.

 

[Wildcat Media]

Would the colors change when a different theme is selected? We do have a default color theme that is part of our branding, so that could be the PWA default.

I'll just install it and find out for myself. I have a couple of testing forums. But if the JSON version makes compatibility wider, I'm all for it.

 

[JoyFreak]

Would the colors change when a different theme is selected? We do have a default color theme that is part of our branding, so that could be the PWA default.

I'll just install it and find out for myself. I have a couple of testing forums. But if the JSON version makes compatibility wider, I'm all for it.

Unfortunately not. Even the default XF PWA version isn’t that advanced. I’m not even sure if it’s possible, will have to research it.

 

[Wildcat Media]

Even the default XF PWA version isn’t that advanced.

My colors do change if I'm using the XF PWA, and works with a third-party theme also (Flat Awesome +). On Win10, this is my default theme's top bar in Chrome:



Our black theme:



Experimental "sunset" theme:



That's why I'm thinking it's possible the JSON version may support it also. I'll experiment and report back here.

 

[JoyFreak]

My colors do change if I'm using the XF PWA, and works with a third-party theme also (Flat Awesome +). On Win10, this is my default theme's top bar in Chrome:

View attachment 241217

Our black theme:

View attachment 241219

Experimental "sunset" theme:

View attachment 241220

That's why I'm thinking it's possible the JSON version may support it also. I'll experiment and report back here.

I see. Then, please, by all means, test it out and let us know if it still works. It might not be based off the values set in the file itself.

 

[rdn]

Easy fix for Nginx users.

location ~ ^/webmanifest.php {
        sub_filter 'minimal-ui' 'standalone';
        sub_filter_types *;
    }

 

[Wildcat Media]

I see. Then, please, by all means, test it out and let us know if it still works. It might not be based off the values set in the file itself.

It does work! I thought I'd posted this a few days ago, but it's probably still sitting unsent in another browser tab somewhere.

Should I see any difference in how the "app" works though? I'm not noticing it when I "install" it on a computer, and for some reason, my Pixel 3 and Pixel 5 aren't showing the forum in a standalone window, which it used to do prior to XF 2.2. (At that time, I used a meta tag called something like "mobile web app capable" and that always seemed to work.) Not only that, it's not showing up as installable in XF's menu, despite waiting days for it to appear, and PWA being configured properly (either with XF's method or your JSON method). Still experimenting though, so, not a big deal! I have a few weeks to get it figured out.

 

[JoyFreak]

It does work! I thought I'd posted this a few days ago, but it's probably still sitting unsent in another browser tab somewhere.

Should I see any difference in how the "app" works though? I'm not noticing it when I "install" it on a computer, and for some reason, my Pixel 3 and Pixel 5 aren't showing the forum in a standalone window, which it used to do prior to XF 2.2. (At that time, I used a meta tag called something like "mobile web app capable" and that always seemed to work.) Not only that, it's not showing up as installable in XF's menu, despite waiting days for it to appear, and PWA being configured properly (either with XF's method or your JSON method). Still experimenting though, so, not a big deal! I have a few weeks to get it figured out.

Glad to hear it's working.

If the default XF PWA (webmanifest.php) is set up correctly then it should appear as installable in the XF menu. The custom one here is not connected to PWA set up guide so it will not change the status in XF's menu. That menu is just to ensure you've followed all the steps correctly. You can check by adding this at the end of your url: /webmanifest.php. If everything is set up correctly and you've waited a few days and still nothing, then I'd recommend reaching out in the support forum here.

The only thing this custom PWA offers is a "standalone" display, which only makes the PWA on iOS feel/look like a "real" app so you don't really see anything else change.

I'm not sure how XF's default PWA works on Pixel 3 and Pixel 5 as I have neither devices to test it. But i'd imagine it would need a tag that you would need to keep in the PAGE_Container. I had a few tags prior to 2.2 and removed them all and now depending on the PWA alone.

 

[Wildcat Media]

I'm not sure how XF's default PWA works on Pixel 3 and Pixel 5 as I have neither devices to test it. But i'd imagine it would need a tag that you would need to keep in the PAGE_Container. I had a few tags prior to 2.2 and removed them all and now depending on the PWA alone.

I'm sure it's something like that. The Pixel phones are about as pure of an Android version as it gets, so I would think whatever PWA offers should work OK in those. I may try adding those meta tags back in and see what I get, if they aren't there already.

 

[djbaxter]

I'm confused. Your original instructions say this:

Open template PAGE_CONTAINER:

Find:

<link rel="manifest" href="{{ base_url('webmanifest.php') }}">


Replace:

<link rel="manifest" href="{{ base_url('webmanifest.json') }}">

These two lines look exactly the same to me. Can you clarify?

 

[JoyFreak]

I'm confused. Your original instructions say this:

Open template PAGE_CONTAINER:

Find:

<link rel="manifest" href="{{ base_url('webmanifest.php') }}">


Replace:

<link rel="manifest" href="{{ base_url('webmanifest.json') }}">

These two lines look exactly the same to me. Can you clarify?

The file format is the difference. The original is .php and the custom is .json. You'll have to download the resource and upload the .json file to your root XF installation folder.

 

[djbaxter]

The file format is the difference. The original is .php and the custom is .json. You'll have to download the resource and upload the .json file to your root XF installation folder.

D'oh. I obviously need more caffeine.

Thank you.

 

[Donny]

I'll keep watching this. Keep up the good work.

 

[🔥Iggy🔥]

i know this is a minor hack but that may only make it more frustrating that im having problems lol....this make sense to anyone?

mainly, my webmanifest.php DOES NOT match the json file.....completely different not even close....oddly, my file DOES match what i get from a default fresh downloaded file pack...so...

-file check comes back with no errors
-i have completed the setup in admincp and downloaded the app myself(a couple weeks ago by now) so i know its working....

how is this possible? makes zero sense to me...

running xen 2.2.2

thank yous

 

[jasculs]

Question, how would the .json be edited when my XF is on a directory and not in the root url?

Is the coding structure different? Are the \ / the same structure as in the .php file?

 

[Jkay]

Thank you it was all simple.

However, I wish it were possible to use the: pwa install prompt also called add to home screen

Here are the official info.

How to provide your own in-app install experience

Use the beforeinstallprompt event to provide a custom, seamless, in-app install experience for your users.

web.dev

Patterns for promoting PWA installation

How to promote installation of Progressive Web Apps and best practices.

web.dev

Would you know how to do it? also for a fee

 

[JoyFreak]

Thank you it was all simple.

However, I wish it were possible to use the: pwa install prompt also called add to home screen

Here are the official info.

How to provide your own in-app install experience

Use the beforeinstallprompt event to provide a custom, seamless, in-app install experience for your users.

web.dev

Patterns for promoting PWA installation

How to promote installation of Progressive Web Apps and best practices.

web.dev

Would you know how to do it? also for a fee

This is already available by default. Android supports it but iOS does not. You can read about it somewhere in this thread https://xenforo.com/community/threads/progressive-web-app.181448/

 

[Jkay]

No the add to home screen banner is not there by default.

There is a poor mobile message in the drop-down menu. (also in your forum)

I mean this (which I already use on wordpress)

.

 

[JoyFreak]

No the add to home screen banner is not there by default.

There is a poor mobile message in the drop-down menu. (also in your forum)

I mean this (which I already use on wordpress)

.View attachment 243564

This can be achieved with a template modification. Although, this isn’t the place to ask as this is unrelated to what this guide offers. I currently have no interest. You should ask in the requests forum for a developer to look into it for you. Good luck.

 

[thenashy]

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