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.
 
What should I be looking out for?

On Android
  1. Start the App, then take a look at your tasks (running Apps) and compare that to XenForo running in your browser
  2. Navigate to a thread in your browser and in the PWA and compare the screens
  3. Open an external link from a XF 2.2 page in your browser and the PWA and compare the screens
  4. Compare push notifications from XF 2.1 and 2.2
 
On Android
  1. Start the App, then take a look at your tasks (running Apps) and compare that to XenForo running in your browser
  2. Navigate to a thread in your browser and in the PWA and compare the screens
  3. Open an external link from a XF 2.2 page in your browser and the PWA and compare the screens
  4. Compare push notifications from XF 2.1 and 2.2
Another thing to check is turn on Airplane Mode; the PWA will give a nice offline message while Chrome (or any other browser) will give the normal can't connect type error.
 
I don't see the + sign in my Chrome Bar to add this Forum. Either on ma Windows Lapton or on my iPhone. But I managed it via Safari Kontext Menu on the phone to add the XF App. Are these Infos probably chaced extremely by Chrome that it takes a while?
 
Its on my iPhone not there. Tested Safari and Chrome.
on Windows PC in Chrone i also see no Icon.
What am I doing wrong?
 

Attachments

  • FCA8C4B8-3A6F-4299-94EF-021732AC4236.webp
    FCA8C4B8-3A6F-4299-94EF-021732AC4236.webp
    32.6 KB · Views: 76
This "progressive web app" thing is too complicated. Only on the desktop with Windows 10 and Chrome (where I don't need it) did it work as expected. Android 6.1 (S5 Neo) no chance. Neither with Firefox, nor with the Samsung browser or Chrome. I cannot offer this to the users of our forum in such a complicated way.

Young people in particular always want a OneClick option that works "out of the box".
 
This "progressive web app" thing is too complicated. Only on the desktop with Windows 10 and Chrome (where I don't need it) did it work as expected. Android 6.1 (S5 Neo) no chance. Neither with Firefox, nor with the Samsung browser or Chrome. I cannot offer this to the users of our forum in such a complicated way.

Young people in particular always want a OneClick option that works "out of the box".

What? The pwa on Android works great. I would really like to know how it is too complicated..
 
This "progressive web app" thing is too complicated.
Hmm, I don't have a device with Android 6, on my Samsung Galaxy S9 it does work just fine and I'd at least expect it does work fine as well on older Android versions with an Up-To-Date Chrome.
 
Hmm, I don't have a device with Android 6, on my Samsung Galaxy S9 it does work just fine and I'd at least expect it does work fine as well on older Android versions with an Up-To-Date Chrome.
I have always installed the latest versions that I can get.

In the meantime I have found how it works with Android 6.1 and the latest chrome version. "Get xenforo Community" appears in Chrome's 3-point menu. Then tap on it "starts the PWA version of the forum.

There is still the hope that one day we will have enough postings with solutions that we can offer our users a tutorial that will lead to success.

With Firefox you have to select "Forums" in the xf-menu and then "Install ..." appears. But nobody comes up with something who is otherwise only used to remote-controlled "click / tap / wipe". ;)

That should work everywhere like under Win10 and Chrome.
Xenforo is called up in the browser, then a new + symbol "flashes" next to the browser bar and when you click on it (...) the PWA version installs itself without further ado.


Addendum:
Only criticism is not my way, so here is a suggestion for a possible solution to the problem.
Many sites, including XenForo.com, have a start site that does not immediately show the PWA option.
Couldn't you do the following in the header of the start page so that PWA is displayed immediately?

<link rel = "preconnect" href = "https://xenforo.com/my.manifest"> ?
 
Last edited:
With Firefox you have to select "Forums" in the xf-menu and then "Install ..." appears. But nobody comes up with something who is otherwise only used to remote-controlled "click / tap / wipe". ;)
Hmm, that does not seem to be the case for me - I can just install via clicking the icon:
Firefox-PWA.webp


That should work everywhere like under Win10 and Chrome.
Xenforo is called up in the browser, then a new + symbol "flashes" next to the browser bar and when you click on it (...) the PWA version installs itself without further ado.
Might be an option for users, but I wouldn't want to have such a "prompt" for guests.
 
Status
Not open for further replies.
Top Bottom