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.
 

Wesker

Well-known member
That's my philosophy--nobody should have to download an app to visit any of my forums on mobile. If they want to put a shortcut on their home screen, that's up to them. If it's enhanced as a PWA, that's just a bonus. In my case, I'll just release things as-is and let the members decide what they want to do. The forums are good enough that the interface they access it with is far overshadowed by their actual participation in the forums. If they are spending time fretting over whether or not their favorite devices does or does not handle features, then we're doing something wrong in providing them a community that for some is a big part of their lives.

+1

This is correct.

This is a nice addition to 2.2 but at the end of the day, 98% or more of your actual members will likely never use this web app. Biggest upgrade with XF came with 2.0 when the design changes to a very mobile friendly software. That said, innovation is key to survival and this is a nice upgrade to xenforo.
 

Wildcat Media

Well-known member
This is a nice addition to 2.2 but at the end of the day, 98% or more of your actual members will likely never use this web app. Biggest upgrade with XF came with 2.0 when the design changes to a very mobile friendly software. That said, innovation is key to survival and this is a nice upgrade to xenforo.
The limited amount I do now to create a chromeless window is a nice option for mobile devices. (I posted the code earlier in this thread.)

For push notifications, I realized that we have a lot of members on the busier forums who are very active. Some of them might be making 20 or 30 replies per day on average. Some, quite a few more, especially if they are active in dozens of threads. The number of notifications would be overwhelming on mobile device. There are days I get several notifications and sometimes I feel even those are overwhelming. I don't know if the push notifications are able to aggregate under one notification when used as a PWA (like our app notifications showing us we have 23 emails, or 14 text messages, etc.), but the current push notifications seem to come through one at a time. I can only imagine the notifications of members who are far busier than I am. Maybe that is why I put the push notifications at a lower priority. Nice to have, nice to offer, but not a deal breaker. Members always have email if they want to get notified of new activity.
 

gogo

Well-known member
Do you keep typoing your own site? I'm assuming you mean neogaf.com which seems to have an awesome PWA implementation which works great on my iphone.


Yes. That's a typo. o_O That's not my website, I'm not even a regular game player. I discovered that website when I tried to find some xenforo sites with beautiful themes. That's the one.

I got my website pwa enabled too by the add-on Home Screen Installation 2.0.1 which you can find in the Resources area here at xenforo.com. It works well.
 
Last edited:

DigNap15

Well-known member
I have never liked Apple since the 1980's for those very reasons.
They are non standard
And everything they sell is dearer just for the logo.
Don't buy Huawei either!
 

gogo

Well-known member
As a user we can choose not to use Apple stuff, but as a web developer, we can't and shouldn't abandon Apple users if you want your website go strong.

For PWA thing, iOS supports it. You don't need to do anything extra to make it usable in iOS. i.e. if it's usable in Android, it will be usable in iOS. There are some limitations in iOS though, such as you don't have push notifications for PWA in iOS.
 

Kirby

Well-known member
It would be nice if users could configure which URL they would want as start URL for PWA:
 

gogo

Well-known member
It would be nice if users could configure which URL they would want as start URL for PWA:

In the manifest.json of the add-on Home Screen Installation, there's a line:

"start_url": "/?utm_source=homescreen",

I'm not sure what it does and if it's related to what you're asking for.
 

Kirby

Well-known member
It does specify the start URL, the suggestion is to make this a user option so each user could configure which URL he would like to to start at, just like is is possible with browser bookmarks if using the browser.

We did this in our XF 2.1 PWA implementation and our users really like that.
 

jb-net

Active member
As a user we can choose not to use Apple stuff, but as a web developer, we can't and shouldn't abandon Apple users if you want your website go strong.

Exactly! We can criticize Apple for not following an open standard, we can choose not buy Apple products, we can point the finger on Apple for doing the wrong thing. However, by ignoring iOS, Xenforo is also doing the wrong thing. Our community users could not care less about the discussion we are having here right now. They use Apple devices and expect Xenforo to work exactly like on Android and they have every right to do so!

It is our job to work on a solution even if we feel that we Apple is acting unfair by not supporting open standards. We need to do the right thing by supporting iOS nonetheless.
 

Kirby

Well-known member
As others have also pointed out, I'd really like to see PWA support on iOS (even though it is yet impossible to use push notifications).

If this does mean that only standalone mode is usable I'd opt to use standalone for all mobile devices and implement necessary navigation features (like reload and back) via gestures and/or icons within XenForo.
 
Top