XF 2.2 iOS pwa installation flow

[benFF]

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?

Cheers!

 

[CedricV]

It will indeed pop up once they’ve installed it.

You can also see it in the menu

 

[benFF]

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?

 

[CedricV]

Clicking that button will give you clear instructions how to add it as an app.

 

[benFF]

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.

 

[CedricV]

They wouldn’t know but I assume a floating notice would work well to inform them.

 

[Kirby]

On Android for example, the first time you visit the site it will ask do you want to install as an app.

Nope, this is not the case - users will only get the Install button as shown in the screenshot (but tapping that will directly start the installation process).

 

[Elliott]

IOS 16.5 Push not working in account settings

 

[BassMan]

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.

 

[Elliott]

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.

Thanks, solved the problem

 

[Oersted]

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?

 

[Oersted]

OK, I see now, there is an MP4 that displays there on XenForo's site: https://xenforo.com/community/styles/default/xenforo/add_to_home.mp4

Is the idea that we are supposed to put our own video/gif there, and if so, how do we do that? Does that require a template mod?

 

[Jeremy P]

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.

 

[digitalpoint]

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

 

[MichaelCS]

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.

 

[TPerry]

See if this works in your extra.less for that style.

.offCanvasMenu--nav .offCanvasMenu-installBanner .button {
color:white;
}

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 {
color:white;
}

should address all the buttons to give a white text.

 

[MichaelCS]

.offCanvasMenu--nav .offCanvasMenu-installBanner .button { color:white; }

You sir, are a gentleman and a scholar. Thank you! I can now continue on with the rest of my life lol

 

[Ludachris]

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.

 

[benFF]

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

[FF] Page Criteria for Xon Browser Detection

Add a new set of criterion to the Page criteria when you have @Xon Browser Detection installed. Especially useful for notices.

xenforo.com

 

[securedme]

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.

Which style property? Where can I find it?