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.
 

Scandal

Active member
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.

I upraded my forum to xF2.2 on my localhost (as first rehearsal).
I installed the progressive web app via my Windows 10 Chrome browser, but I can't see this loading screen with my icon.

Is there any way to see in action this screen?
Since my forum is not online, I can't check it via my smartphone in case the screen is not appear just in Windows 10 Chrome's progressive apps. :)

Thanks!
 

Steve Freides

Active member
I have not read but the first page and this page of this 17-pages-and-counting thread.

Am I right that both browser and operating system must be non-Apple to support this? At the moment, I am using Chrome on a decade-old MacBook Air. :)

Thanks in advance for your replies.

-S-
 

Brogan

XenForo moderator
Staff member
From the first post.

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.
 

Steve Freides

Active member
OK, thanks for pointing that out. I wasn't quite sure what "any iOS-based browsers" meant, but it sounds like you mean it to be any browser running on an Apple operating system. I wouldn't characterize Chrome as "iOS-based" but it's just a matter of semantics, I suppose.

Thank you again.

-S-
 

Rudy

Well-known member
I have this working on the desktop for the most part, but I need to track down why it won't work on Android Chrome. I can add to home screen manually, but all it does is open in a browser tab with the other sites. Back in 1.5 and 2.1, I added in my own META tag to enable "installing," although it was a more crude version of what PWA offers in 2.2.

But I need to go through all of the settings first, as there are many to look at. It seems as though it's one of those situations where conditions need to be absolutely perfect for PWA to work, and then we have to wait over 24 hours and hope it appears in the browser.

One nice feature on Win10 is that if I click on a notification, it opens right up in the PWA I installed, vs. opening another tab in the browser. I would guess it does the same on mobile. Pretty slick!

A shame that the fruit-named company in charge of IOS won't support web standards. They've turned into Microsoft a la Internet Explorer back in the old days, where we had to make all sorts of exceptions to get standard markup to work with their browsers. I thought we were past that now.
 

Rudy

Well-known member
OK, thanks for pointing that out. I wasn't quite sure what "any iOS-based browsers" meant, but it sounds like you mean it to be any browser running on an Apple operating system. I wouldn't characterize Chrome as "iOS-based" but it's just a matter of semantics, I suppose.
I'm still confused--that wording is still not clear to me.

I guess I'd like a more clear answer--will Chrome on IOS support installing, and push notifications?
 

RobParker

Well-known member
If someone told you it won't work on a "Windows-based" browser, would you think they meant IE/Edge or any windows version of a browser (Firefox, Chrome, etc)? I think it's quite clear that it's the latter.
 

Rudy

Well-known member
If someone told you it won't work on a "Windows-based" browser, would you think they meant IE/Edge or any windows version of a browser (Firefox, Chrome, etc)? I think it's quite clear that it's the latter.
No, it's still confusing. 😉 To me, the way it is worded now, it can still mean either one. And to our tens of thousands of members who are not computer-literate, they will jump to any conclusion since they don't fully understand browser vs. operating system and they will read it both ways also.

And to take it one step further, OS-based means that the browser itself is part of the operating system, in my opinion. Kind of how IE was baked into older versions of Windows, or even how Chrome might be closely tied to the Chromium OS. And for the browsers themselves, Chrome and Edge are currently based on the Chromium engine...not an OS.

If we word it as "All browsers running on IOS," that makes a lot more sense to us.

Much easier to say that it doesn’t work on iOS.
Yes. Or at least make it clearer. "No browser on IOS will support PWA" says all I need to know. Or if it's "Safari browser on IOS won't support it, but Chrome on IOS will work," then say so.

I only need to know this so we can ward off member issues since they'll read about these new features, then blame us for not supporting them.

And we wouldn't even have this discussion if that fruit-named company would get off their high horse, stop trying to be the Microsoft of old (cough IE6 cough), and just support the flippin' industry standards like everyone else does...
 

Chromaniac

Well-known member
i am not sure if pwas are an official web standard.

 

AndrewSimm

Well-known member
I know having a PWA was a popular suggestion but after months of use I see very little value. In fact, I actually think it is more of a hinderance than it is helpful. For example, when I click on a push notification on my computer it launches the PWA. The problem with this is that after reading the notification, I then need to close or minimize the PWA to go back to browsing in Chrome. In general, I think most users prefer to have multiple tabs open to quickly access information.

For mobile devices, I still prefer to use a browser over an app. I think it really comes down to being able to switch between different websites quickly and a PWA does not help with that.
 

Mendalla

Well-known member
I know having a PWA was a popular suggestion but after months of use I see very little value. In fact, I actually think it is more of a hinderance than it is helpful. For example, when I click on a push notification on my computer it launches the PWA. The problem with this is that after reading the notification, I then need to close or minimize the PWA to go back to browsing in Chrome. In general, I think most users prefer to have multiple tabs open to quickly access information.

For mobile devices, I still prefer to use a browser over an app. I think it really comes down to being able to switch between different websites quickly and a PWA does not help with that.
I use it with my own site on my phone because I often just go on to check activity or see a push notification and it works well for that. Other sites, though, I've been using my browser. On my computer, I prefer a full browser. Often have multiple tabs going and the app is just too limited in that environment.
 

Brogan

XenForo moderator
Staff member
I stopped using it immediately.

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