XF 2.2 Progressive web app

Mobile app installation
Mobile first. We hear it again and again, and with over half of all web traffic coming from mobile devices, it's more important than ever to provide your mobile visitors with a great experience.

Of course, XenForo 2 is built on a fully responsive design that gracefully adapts to any display size and makes using XenForo a pleasure on all devices, but now we're taking it a step further by enabling any XenForo site to become a progressive web app.

Progressive web what?

Okay, let's back up a little. Imagine a technology that allows a web site to appear and behave like an app without having to produce native code for each platform, or go through any vendor's App Store equivalent.

Progressive web apps, or PWAs, aim to bridge the gap between websites and native applications on both mobile and desktop devices using a series of emerging web standards. Push notifications, a feature introduced in XenForo 2.1, are a popular example of one such standard. In XenForo 2.2, we're expanding our support for these standards by making XenForo installable, implementing more graceful offline handling, and adding support for the badging API.

Setting it up

It's important to note that, like push notifications, making full use of these features will require a few extra steps to set things up.

Additionally, as with push notifications, these features are only available on devices and browsers that fully support PWAs. Would you care to take a guess as to what the most notable exceptions might be? As you may have suspected, once again Safari on macOS and any iOS-based browsers are the culprits due to Apple's ongoing failure to implement industry standards. While Safari on both macOS and iOS does support graceful offline handling, it does not support installation or badging (more on that below) at this time.

We would encourage you to make your frustrations known in public by applying virtual tar and feathers to Apple employees online until they relent and get their act together... or at least voice your support for these standards by continuing to reach out to @webkit on Twitter or the webkit-help mailing list. Officially, the best place to communicate with Apple is via their product feedback channels, and presumably they won't be able to continue to ignore a deluge of feature requests for the same thing... 🤔

Requirements

To make full use of these features...
  • Your XenForo installation must be accessed over SSL / HTTPS
  • Your site must have a relatively short title of 12 characters or fewer
  • You must publish a pair of square icons for your site, one at 192px and another at 512px.

Setting a short title

Publishing a pair of icons

What do PWAs look like?

If your site meets the requirements, your visitors will automatically be given the option to install your 'app' on their device.

The precise details of the interface and the circumstances permitting installation can vary by browser and in some cases can depend on the degree of interaction with your site a user has had.

When browsing with Chrome on desktop or Android, the app can be installed via the address bar on both mobile and desktop devices. On supported mobile devices, we also display a conspicuous yet unobtrusive banner in the off-canvas menu.

Mobile app install banner
Mobile app installation

Desktop app installation

Once the app is installed, it is readily available in exactly the same way as a native app. On mobile devices, that means it can be opened via an icon on the home screen. On desktop devices, it can be opened by searching your system or even pinning the app to your taskbar or dock.

Mobile app home screen
Desktop app home screen

Some devices will display a splash screen while the app is being loaded. The splash screen is automatically generated from the icons and background color of your style.

Mobile app splash screen

For most devices, we set the app to display a minimal interface. The elements of this interface also vary by browser, but most importantly include navigation controls. For Android devices running Chrome, we are able to use the native pull-to-refresh and back-button navigation controls, so we do without any additional interface.

Mobile app
Desktop app

If a user tries to open or navigate the app without a proper network connection, we display a simple offline message.

Mobile app offline page
Desktop app offline page

Chrome-based apps recently introduced support for application badging, which allows the app to indicate unread messages or alerts directly on its icon.
We are hopeful more browsers will support the badging API in the future.

macos-badge.png
Desktop app badging (Windows)

Looking toward the future

The PWA specification and standards are constantly evolving. We will continue to monitor them as time goes on in order to always provide the best possible experience on all devices.
 

Chris D

XenForo developer
Staff member
Still mulling this one over. As an Android user, I should be happy but I am kind of meh. My board doesn't have a lot of mobile users and that may be part of it. Of course, better mobile access, which this seems to provide, might change that. And I only have one Apple person that I know of so that limitation won't bite me at first. So I will definitely try it out when I am testing 2.2, just not as excited as I think I should be.
It's not just mobiles though. You can install PWAs on Windows and macOS with Google Chrome. This is demonstrated in the first post.

So, this PWA thing, will this work on iPhones that use the latest Microsoft Edge?

Like this one that I use in the screenshot?


FYI, I hate using Safari on my iPhone. I prefer MS Edge or Chrome.
Nope. When it comes to iOS every single browser are Safari/WebKit views. There is no such thing as a truly third party browser on iOS. People like Google and Microsoft simply build a wrapper around a WebKit view. This is why none of the browsers support PWAs or push notifications - because the Safari/WebKit view doesn't.

Apple probably won't support this anytime soon. :( They want their 30%.

I have Android though so I can use it.... But I'm in the minority for my audience.

That being said still the majority are on desktop for my site.
30% of what though? The people who need PWAs aren't going to build their own apps anyway, and even if they did, how many of them would actually generate any revenue?
 

Mendalla

Well-known member
It's not just mobiles though. You can install PWAs on Windows and macOS with Google Chrome. This is demonstrated in the first post.

First off, thanks for reading my mind and answering a question I had meant to look into. But compared to accessing the site in a good browser like Edge or Chrome on an up to date platform like Win10, do you gain much? I mean, I access 2 to 4 forums sometimes, 2 of which run Xenforo (3 on my rare returns to the first forum site I ever joined) and isn't iteasier to have them as browser tabs than as separate apps in that scenario? Or to have another site up on a tab when I am trying to read something and post about it? As I said, I will need to see how this works in practice before I will start jumping for joy.
 

Mendalla

Well-known member
A lot of that will depend on the type of website you are running.

If it's a forum-based website, the admins that run those kinds of websites may not be that enthusiastic about it.

However...

If an admin like myself who run websites that are heavy on media and/or use the XF Media Gallery, then yes, there is a great amount of enthusiasm for this PWA because it will benefit people who are always "on the run" and not sitting at the desktops/laptops all day long posting media-related content.

My website will benefit greatly from this new upcoming feature in XF 2.2

This hypothesis makes a certain amount of sense and certainly fits my scenario. We are a small, discussion-focussed board. I haven't even bothered with XFMG. There is not enough media being posted for it to be especially useful.
 

leebo

Active member
Please tell me the requests to install won’t be like the annoying ones asking for push notifications! No matter how many times I say DONT EVER ASK ME as soon as a cookie is cleared I get asked. 😡🤬 Asking to install things like this is the new Spam, and a huge reason Apple won’t ever likely open up their system.

I’ve said it multiple times, after about 4 years now of maintaining an App for both iOS and Android, Apple rewards developers who put in the effort and build a quality product that meets their standards. The reward, a customer base that’s VERY willing to support your efforts financially.
 
Last edited:

eva2000

Well-known member
First off, thanks for reading my mind and answering a question I had meant to look into. But compared to accessing the site in a good browser like Edge or Chrome on an up to date platform like Win10, do you gain much? I mean, I access 2 to 4 forums sometimes, 2 of which run Xenforo (3 on my rare returns to the first forum site I ever joined) and isn't iteasier to have them as browser tabs than as separate apps in that scenario? Or to have another site up on a tab when I am trying to read something and post about it? As I said, I will need to see how this works in practice before I will start jumping for joy.
Whether or not you'd be excited about PWA depends on how you usually consume your data/content. I've implemented PWA for my Xenforo forum for past 2yrs so you can install it as an Windows or Android app icon via Chrome web browser https://community.centminmod.com/threads/added-forum-pwa-mode-for-page-speed-improvements.15301/ but if you're use to using web browser itself, not too much difference. But if you're a person that lives within your app icon based usage, then it's more convenient than a web browser. It's almost generational, younger folks probably would make better use of PWA based forum apps, while older folks probably just use their web browser.

cmm-forum-paw-01a.png


Looking forward to XF 2.2 and seeing it's PWA implementation :)
 

frm

Well-known member
Not a mind changer to me (already sold on PWA), but does the PWA work with the ACP?

It'd be kind of annoying to open the PWA to chit-chat while not being able to have access to the ACP and having to go back into Chrome to do some simple mobile tasks.
 

RallyFan

Well-known member
What's the security side of this like? By using PWA does it then open up Xenforo to a greater range of hacks/exploits/vulnerabilities given there seems to be deeper Browser/OS integration?

As a side note it also would open up a wider range of troubleshooting requirements would it not?

That said, people I can see who will get most mileage from this are tablet users.
 

gogo

Active member
Unless we've missed something, it doesn't. It shows up on the home screen, but it just opens it up in a new Safari tab.

That's not true. The icon will open up as a standalone app just like the pwa in Android. Of course the website must be properly pwa configured. Try neogaf.com as I suggested.
 
Last edited by a moderator:

gogo

Active member
I don’t know what witchcraft neogaf are using but if XF could do that it’d be perfect.

neogaf is running Xenforo with a customized ThemeHouse UIX pro. Actually any xenforo website can do the pwa if your website is compliant to their simple requirements.

There's an add-on that helps you make your xenforo to pwa.

Home Screen Installation 2.0.1

It's very easy to install.

I believe XF2.2's PWA implementation is doing something more than that. Can't wait for the XF2.2.
 
Last edited by a moderator:

Frode789

Well-known member
Maybe this is getting too off-track now but as Chris and others said above, you're mixing together very different grographical markets. Most of our users are UK based and iOS (according to the site you used) has a 50% market share in the UK. Similar for the US (I imagine another major market for XF users).

Yes, if your site targets Africa where there's an 85% Android share or India (95%) you might have a point, but for a lot of us, our users are UK/US based and iOS dominates those markets.

You might like to think that it's only Africa, but you are wrong. UK has a larger than average userbase of iOS.(closer to 50%) The rest of Europe accounts for 70% Android, 30% iOS. UK isn't the center of the western civilization, even if it is more important for your site specifically.
 
Last edited:

JamesBrown

Well-known member
Just over half of my users are Apple Safari, So this, like Push, is another feature, I'll have to turn off. I can blame Apple till I'm blue, but my customers will blame me for not providing for them. For me at least, no one having the feature is better than only half being able to use it.
 

Brent W

Well-known member
Just over half of my users are Apple Safari, So this, like Push, is another feature, I'll have to turn off. I can blame Apple till I'm blue, but my customers will blame me for not providing for them. For me at least, no one having the feature is better than only half being able to use it.

This makes no sense. Punish half the people for something out of your control or let those people take advantage of it and use it to be more excited about your community which should lead to more content and a better experience. Why would you ever take away options for those that can use them when it comes to zero cost to you? Are you going to lose 50 percent of your customers because of something that you can not control, really?
 

Mr Lucky

Well-known member
Are you going to lose 50 percent of your customers because of something that you can not control, really?
I don't understand how you would lose 50% of your customes. Is this such a huge thing that you have to have it enebled or people won't use your forum?
scratch-head.gif
I really am intrigued now.
 
Top