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.
 

Brogan

XenForo moderator
Staff member
On a mobile device, click on "Install the app" at the bottom of the side menu.

1594222127711.png


On a computer, there are a few ways.

The browser may prompt for it.

Click on the + in the address bar:
1594222196228.png


Click on the option in the drop down menu:
1594222203788.png
 

NicolasZN

Well-known member
So it doesn't seem to work on iPhone 8 running the latest version of iOS......using the Microsoft Edge browser.
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.
It won't work on any iPhones running any browser.
 

Mendalla

Well-known member
doesn't show on my S10+ either. I've downloaded brave, chrome, firefox and edge with ZERO showing install.
I've actually installed it twice on my S9, once using Chrome and once using Edge, which is what I am currently using. No issues with either. What version of Android? I'm still on 9.
 

Mendalla

Well-known member
Haven't used 10 yet myself (complicated reasons related to it being a work phone keep me from upgrading this one) so can't really test. I thought someone else had said they are running it on 10, though and I can't think of any reason I've heard why it would not work.
 

clubpromos

Active member
Google and Microsoft's collaboration to easily get your PWA in to the Play Store.

https://www.pwabuilder.com/

Here is the PR announcement: Microsoft and Google team up to make PWAs better in the Play Store
That's great news because like it or not, users seem to want the app to be in the Play/App store.
The app stores are also a great way to be found by more people. Not just those who already know your forums and may or may not trust the PWA install process that also don't seem to work on Safari (my users are 65% iOS).

Is there any equivalent to the PWA Builder for Apple App store?
 

askandy

Active member
Is there any equivalent to the PWA Builder for Apple App store?
This is a great article about PWA on iOS.


One idea the writer mentions is using SMS/Text Messaging instead of Push Notifications on iOS.

Now that's a pretty interesting idea worth exploring IMO.

Curious as to what others think about that as a fallback solution for iPhone notifications??

Separately, the same developer has written a library and tool to help implement an "add to home screen" experience:
 
Last edited:

tajhay

Well-known member
One idea the writer mentions is using SMS/Text Messaging instead of Push Notifications on iOS.
Wouldn't that be a fairly expensive solution? Sms costs money in some countries. And imagine sending intl sms for small non profit websites. Could be abused as well.

But other than that thought, fantastic links provided. Hope they find a good solution for iOS platform
 

Kevin

Well-known member
Wouldn't that be a fairly expensive solution? Sms costs money in some countries. And imagine sending intl sms for small non profit websites. Could be abused as well
At least in the US simple alerts could be sent to users phones using carriers SMS gateways so it'd be no different than sending an email. Interesting idea for iOS users. I don't know if non-US carriers support SMS gateways but it'd be interesting to see if it might be viable.
 

askandy

Active member
Wouldn't that be a fairly expensive solution
I suppose it depends on how you implement it. If you made the solution only visible/accessible to iOS users, and limited it to certain type of Alerts, it may not amount to very much.

For example, in one of my other projects, we're sending SMS messages, using two different SMS messaging platforms which allows us to reach 60 countries. To send 800 sms messages to people in the USA, it costs us $20.80. Some countries are more, some are less.

You could in theory make the solution into a paywall, where to get the alerts via SMS, the member could pay $3/month or something like that -- just enough to cover your costs. Or you could just absorb the cost for a bit and see how it goes.
I don't know if non-US carriers support SMS gateways
Yes, using 3rd-party SMS services you can reach most major countries via SMS.
 

rickhz

Active member
Am I supposed to be thrilled with an app which Apple users can't use?

No AMP to help keep our forums relevant in Google's eyes, but a neutered "Progressive Web App".

Lovely.
 
Top