XF 2.2 iOS pwa installation flow


Well-known member
I don't have an iOS device, but I would like to give instructions to my users on how to set it up.

Could someone kindly provide some screen shots of what the flow looks like?

After they install to the desktop, will the "enable push notifications" banner show up at the bottom? Or do they need to go into the user control panel to hit the enable button?

Thank you 😊

So that "install the app" button is the same as going to the safari menu and "adding to home screen"?

So there's no notification that they can add as a pwa? They need to know about either of those two options?
Ok so what I mean is, if they don't click that button - they will never know a PWA is available?

On Android for example, the first time you visit the site it will ask do you want to install as an app / enable notifications.
You will need to add the forum to your iPhone's home screen. Log in and enable push notifications.

Push notifications won't work over Safari browser, just install it as a PWA app.
For some reason when I do this on iOS, or on Windows computer, I get the following message, but no video is there.


What is this video, and how do I get it to display there?
The "video" in XF 2.2.13 is a hard-coded GIF (styles/default/xenforo/add_to_home.gif). If it's not displaying on your site, it might be due to a customization issue. Additionally, it should only display on iOS as the install process works differently on other platforms.

In XF 2.2.14, this will be changed to a proper video which can be customized via a style property. This change has been deployed here already.
In XF 2.2.14, this will be changed to a proper video which can be customized via a style property. This change has been deployed here already.
At first I read that as the video would take on the style of the site it's displayed on and I was like, "Wow... since when can you apply CSS to a video? Or did they get super fancy and make an animated SVG or something?"

But then... "Oh wait... I know what they mean." 😂
I haven't even gotten to this problem yet lol. I'm still trying to figure out how to style the INSTALL button color as mine shows up as a solid red blotch. If the INSTALL was white I could live with it. Maybe. I'm scouring the web for solutions but not sure anyone has run into this one as most I speak to just use the COLORS menu to do all their style color work.

See if this works in your extra.less for that style.
.offCanvasMenu--nav .offCanvasMenu-installBanner .button {

If it's a custom style (not XF default) that designator may not apply if the developer has customized it (you will need to ask int that style discussion thread).
Are the rest of your buttons having the same issue? If so, then using
.button {
should address all the buttons to give a white text.
If only we could create a Notice that pointed users to instructions, and had the ability to display that notice ONLY to members browsing on iOS devices.
You can if you use Xons browser detection add-on and then extend the criteria with

Top Bottom