XF 2.2 Progressive web app

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.
 

Mendalla

Well-known member
Liking PWA so far. Have it on my phone (Android 9 with latest Chrome) and desktop (Win10 1803 with latest Chrome). Had 3 notifications from it on the notifications area of my phone when I got up this morning and like having the "app" look. Definitely getting used on my site, even if I'm the only one who actually uses it. 😎
 

Mendalla

Well-known member
Maybe I get it wrong ...
I mean, it was not about whether someone uses PWA, but about being able to use it - and not just with the latest software and hardware. ;)
I was just putting out my general thoughts on the PWA, not commenting on the availability issues. I run with an older, non-technical crowd and most of them could probably care less about whether they are using a browser or an app to access the site. So I likely won't get many, if any, complaints about the lack of Apple support for it.

Now, the editor changes... yeah, I might hear about that.
 

Brogan

XenForo moderator
Staff member
I've been using this for a few days and haven't noticed any benefit at all over a browser.

Conversely, one of the blocking points in continuing to use it, especially as a moderator, is the inability to open other pages in a separate tab, as you can with a browser.

You also can't just quickly view another site (obviously).

So I'll be sticking with Chrome.
 

Mendalla

Well-known member
Conversely, one of the blocking points in continuing to use it, especially as a moderator, is the inability to open other pages in a separate tab, as you can with a browser.

You also can't just quickly view another site (obviously).
Good point. I'll have to see how it works for me once I can upgrade my site, but I see where you are coming from. Certainly, on a desktop, I often have multiple tabs on the go when I am doing admin work, including external things like cPanel, so I can't really see doing that sort of thing in the PWA. For day-to-day reading and getting caught up on what's happening on the site, though, I think it will still be useful.
 

Chromaniac

Well-known member
yeah. xenforo type sites are more suited as pwas on phones. on desktop single frame apps make more sense like chrome secure shell or squoosh. for power users pwas on computers are useless as you would keep on jumping between the web app and tabs in a browser.
 

snoopy5

Well-known member
Could you please go more into details how the push notification works exactly with this Progressive web app compared to the way it works in XF 2.1?

Does the user have to have the browser open to get those push notifications? etc.

I want to make sure that no matter what the user is doing with his (non-Apple) smartphone or what browser is open/closed, he gets this alert on his mobile.
 

Chromaniac

Well-known member
notification behavior is same as 2.1 i believe. except that in 2.1, notification opens the forum in a browser window while now in 2.2, if the user has installed the pwa, it would load the thread in pwa.
 

snoopy5

Well-known member
notification behavior is same as 2.1 i believe. except that in 2.1, notification opens the forum in a browser window while now in 2.2, if the user has installed the pwa, it would load the thread in pwa.
That would be sad because then this is only a cosmetic change.

We need a notification system that is not always limited by what else a users makes on his smartphone. We need notfications which come always through like in normal apps. No matter what the user is currently doing or not doing on his smartphone.
 

Chromaniac

Well-known member
notifications are supposed to come no matter what the user is doing on his phone! the website is not required to be loaded in browser for it to work. of course, if the browser itself is not running in background (for instance if the user has forcibly closed it), the notifications would probably not work. but that also applies to native apps.

what kind of limitations have you noticed on 2.1?
 

snoopy5

Well-known member
of course, if the browser itself is not running in background (for instance if the user has forcibly closed it), the notifications would probably not work. but that also applies to native apps.
As far as I know, this is not the case with native apps. I do not use social media apps myself privately, so I am not sure. But I think that I get notifications with i.e. threema, even if I closed threema in the background.

I have to test this again. Anyone else has experience with FB/Instagram apps? Do they deliver the notifications when the app itself is closed?
 

Mendalla

Well-known member
That would be sad because then this is only a cosmetic change.

We need a notification system that is not always limited by what else a users makes on his smartphone. We need notfications which come always through like in normal apps. No matter what the user is currently doing or not doing on his smartphone.
I get notifications on my phone from both my own site in Chrome and this site in the Xenforo PWA regardless of whether I am even using my phone. The difference is that notifications from the PWA put a badge on, and open, the PWA while all Chrome notifications regardless of site go to Chrome. So it does make a difference and, in my experience at least, you do get a notification even if the app isn't open.

Now, on desktop, the browser or app has to be open (but not necessarily on the site) to receive notifications in my experience, part of why I find push in general more useful on phones.
 

AndrewSimm

Well-known member
What is the best possible use for this on an iPhone? I added Xenforo to my home screen but notice no difference when using it.
 

Mike Creuzer

Well-known member
To me, PWAs and the web as a whole is actually the shift. aka it is shifting back to web. Ive seen native tools go back to web. Its easier to dev for, more resources, standardized, etc. and obviously highly accessible. There are some shortcomings sure but overtime I expect the gap to be bridged. Meanwhile, an app is useful in many situations. Many forums will not require one. A PWA is a good stopgap imo. Speaking specifically to forums, mind. There is definite utility that apps offer that PWA or web do not and will not for some time. But to claim you will lose members, idk about that.
 
Top