XF 2.2 Progressive web app

Status
Not open for further replies.
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.
 
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.


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.


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.


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.


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.


If a user tries to open or navigate the app without a proper network connection, we display a simple offline message.


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.

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.
This is just awesome.
 
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.

most of my traffic is mobile ios users. ugh....
 
So the users will download the app from apple store and google play and use it to comment on the forum?
the best way to understand what a pwa is to install and use one. my favorite one is https://squoosh.app/ (from google developers. enables you to quickly compress images). earlier browsers like chrome used to show install option through a bar at the bottom of the browser. that seems to have disappeared in recent updates. you can still install these websites offering pwas through the browser menu (add to homescreen option). so just load the link on (android) chrome (and most others) and check the browser menu for the option named add to homescreen. it would then install like a regular app. there would be a shortcut to this 'website' in your apps menu. and when you open it, it would basically run the website like a regular app without the browser interface. squoosh is able to completely work offline. other pwas provide limited functionality. xenforo pwa seems to be pretty limited in offline scenario as well. it would show you the forum ui but with offline message based on screenshots posted in this thread. the main difference is that you would have an app icon on your phone. it would load in fullscreen mode. and if you are offline, you would not see a browser error message but the forum UI with offline message.

update. offline message does not really show the forum ui. but it is still better than the error message shown by browser when you are offline. (https://xenforo.com/community/attachments/mobile-6-offline-png.227271/)

if you use twitter, you can check their pwa (just run twitter.com in a mobile browser and install it through the menu) which is fantastic and, in my opinion, better than their android app. there are tons of other examples. some fun pwas can be checked at this collection: https://progressivewebapproom.com/
 
Last edited:
the best way to understand what a pwa is to install and use one. my favorite one is https://squoosh.app/ (from google developers. enables you to quickly compress images). earlier browsers like chrome used to show install option through a bar at the bottom of the browser. that seems to have disappeared in recent updates. you can still install these websites offering pwas through the browser menu (add to homescreen option). so just load the link on (android) chrome (and most others) and check the browser menu for the option named add to homescreen. it would then install like a regular app. there would be a shortcut to this 'website' in your apps menu. and when you open it, it would basically run the website like a regular app without the browser interface. squoosh is able to completely work offline. other pwas provide limited functionality. xenforo pwa seems to be pretty limited in offline scenario as well. it would show you the forum ui but with offline message based on screenshots posted in this thread. the main difference is that you would have an app icon on your phone. it would load in fullscreen mode. and if you are offline, you would not see a browser error message but the forum UI with offline message.

update. offline message does not really show the forum ui. but it is still better than the error message shown by browser when you are offline. (https://xenforo.com/community/attachments/mobile-6-offline-png.227271/)

if you use twitter, you can check their pwa (just run twitter.com in a mobile browser and install it through the menu) which is fantastic and, in my opinion, better than their android app. there are tons of other examples. some fun pwas can be checked at this collection: https://progressivewebapproom.com/
How is it working for the users? Will they install the app?
 
they have a choice. they can continue to use it inside the browser. or they can 'install' it as an app using the button in the sidebar (screenshot in first post of this thread). or they can install it through the browser menu.

it's not something a lot of people are going to do. regular members of your forum would probably love it if they use your forum on their phones.

i have been using a limited variation of the same tech on my forum for a while now and forum loads like an app on my phone. i find it easier to use than running it inside the browser. i doubt there are many users on my small board who would be doing the same because the option to install is not very visible. the install button being provided by xenforo devs in 2.2 should be pretty useful in this regards.
 
Is a PWA a "Best of both worlds" or a "Not quite an app, but almost as good?"
Edit: The apple issue aside.
 
Last edited:
i personally love them. i mean in some cases they lack some features, are not as fluid as native apps. but in other cases they are more usable. for instance, links are actual links that you can copy on long press or share from context menu. a lot of native apps actually use webview inside for a lot of functionality. amazon is one good example at least here in india. terrible user experience. another benefit of pwas is that they have limited permissions compared to native apps. though i suppose they tend to consume more battery compared to (well designed) native apps.
 
Interesting thoughts thanks, and I didn't know Twitter had it, I will try it because I get bothered in the app when I can't copy and paste.

Looking forward to this for XF.
 
Not really. Is there a particular reason why you think that's needed?
I'm asking our web developer why he's asking, to get an answer, because I'm scratching my head on it, too.

If we did not add a Board Short Title, it shouldn't be an option, though. Correct?
 
Not necessarily, some browsers still support it regardless though I think the standard is leaning towards it being a requirement.
 
I'm still waiting for a response, but I think that making it toggle-able would be beneficial to allow communities to not have to offer a feature to only one subset of users.
 
Status
Not open for further replies.
Top Bottom