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.
 

Mike

XenForo developer
Staff member
Is there any reason (except Pull-to-refresh andy maybe the back button, tough that should be covered) not to always run standalone?
The back button is pretty fundamental I'd say. Outside of Android, it's not something that is provided with a standalone UI. So the approach is generally to opt into a reduction in the provided UI rather than vice versa.
 

Mike

XenForo developer
Staff member
Is the share option for PWAs enabled for us or not?

If we have addons installied, they will work aswell, right?

Speed improvements should be expected, right?
There aren't any explicit share changes from this, though I'm not sure what you're referring to here as there are two different things. The web share API itself is something that isn't likely to be too difficult to handle. The web share target API is a different beast.

Add-ons will work.

On the whole, don't expect to see much difference from a speed perspective. There are likely to be some changes, especially as we may tweak our service worker behavior a bit, but it's still generally serving things as XF does now.
 

AhmedAbdallah

Active member
@Mike @Chris D
I have some suggestions to make XenForo better with screen readers
These proposals concern only a very small group of users
So, my suggestions have no react on XenForo suggestions
Where can I send my suggestions
 

AhmedAbdallah

Active member
 

gogo

Active member
For iOS actually you can create the pwa app by share/add to home screen in Safari. This works on my pwa xenforo.

You may try the pwa thing by visiting neogaf.com with chrome in Android or Safari in iOS. In Android chrome, choose add to home screen. In iOS Safari, share and then add to home screen. Both ways will create an icon which is the pwa app.
 
Last edited by a moderator:

Kirby

Well-known member
There are likely to be some changes, especially as we may tweak our service worker behavior a bit, but it's still generally serving things as XF does now.
Quite understandable, though it would be extremely cool if you guys could come up with a solution to compile XF templates into smth. that can be rendered with a JS template engine on the client as that would allow to just use JSON instead of generating full HTML on the server. dreaming :)
 

sbj

Well-known member
There aren't any explicit share changes from this, though I'm not sure what you're referring to here as there are two different things. The web share API itself is something that isn't likely to be too difficult to handle. The web share target API is a different beast.
Thanks for the answers. From what I know, with PWA I can share photos on my phone with the PWA app. Like if I go to my "photos" and select some, then a share option comes up like I can share the photo with installed apps on my phone like Gmail, FB Messenger, WhatsApp and so on.
Will now our sites be included in this list in our phones when PWA is active?
 

Chromaniac

Well-known member
right. seems complicated. but would be amazing if i could share a link from browser to a specific thread on a forum without going through copy switch apps paste route.
 

Karelke

Well-known member
Much better than native apps. The dev team won't have to maintain several different code bases. Just imagine the horror if you had to duplicate all forum features to native apps.
 

Chromaniac

Well-known member
yup. i prefer pwas over native apps already. twitter's pwa works very well for instance. so i am pretty happy with this over paying a yearly fee for a native app that would always struggle with third party apps or would just be a wrapper around the web app which makes it pointless.

psa: you can get some of the functionality already on any website by using a web manifest file. i have it on my board for a while now. lacks offline storage features and a few others but works very well.

 

cdub

Well-known member
Much better than native apps. The dev team won't have to maintain several different code bases. Just imagine the horror if you had to duplicate all forum features to native apps.
And a native app wouldn't have add-ons which would mean I'd never use it.
 

Rudy

Well-known member
I'm trying to figure out figure out what this adds beyond adding the following to our PAGE_CONTAINER template (I have used the following for years now): <meta name="mobile-web-app-capable" content="yes"> . With this and a handful of site "favicon" codes, if someone adds our site to their home page, they get an icon and a "chromeless" window with no browser controls. XF 2.2 seems to add onto this but I wonder if the method is different (beyond the code I pasted above).

Your site must have a relatively short title of 12 characters or fewer
That will be very hard to overcome for many of us. We can't even fit the main name of our forum into 12 characters. The staff has an abbreviation we use so we might have to roll with that. The icon is unique though, so that will help with identity.

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.
I can hear the entitled members whining already. But we all know the answer to that. 😁 I'll have a sticky post and add it to our forum FAQ, including the parties that need to be complained to.

Ironic how for years, so many complained about IE6 not conforming to industry standards, now someone else is doing it (who should know better).
 

Chris D

XenForo developer
Staff member
This is an awesome feature @Chris D @Mike !
Best news in 2.2 by far. (so far at least ^^)

Having a separate addon is a nightmare and would not work for sites that use XF, so I agree that having a PWA is much better option.
Team effort but it was @Jeremy P and @Mike who spearheaded this effort so, credit where credit is due, they did a wonderful job.
 
Top