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.
 
From my understanding, that's only true in certain circumstances. Roughly, apple-mobile-web-app-capable which then loses the navigation that is provided by Safari (or in Android's case, the system buttons), outside of edge based swiping. That's not something we'd intend on losing -- it may work in some scenarios but not in XF -- so iOS will basically just open Safari.
Personally I can't think of a reason why someone would need the software back buttons vs edge based swiping, I barely ever use the browser back buttons on desktop when browsing a XenForo site :P

If you won't add an option for this, I'm sure someone will write an add-on for it and/or add a tutorial resource :) It is after all just a couple wee lines, like so:
HTML:
<meta content="yes" name="mobile-web-app-capable">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="Trakt.tv" name="apple-mobile-web-app-title">
 
From my understanding, that's only true in certain circumstances. Roughly, apple-mobile-web-app-capable which then loses the navigation that is provided by Safari (or in Android's case, the system buttons), outside of edge based swiping. That's not something we'd intend on losing -- it may work in some scenarios but not in XF -- so iOS will basically just open Safari.
I see the problem for the standard theme. But for sites with own styles it wouldn't be too hard to implement a back buttons und gestures work too. Actually the PWA experience on iOS is not that bad though it lacks Push and some other things, but you can still get a nice App-like feeling on iOS too if you want to. So a option for fullscreen would be nice for iOS Users :)
 
This is coming from someone who vehemently detests most things that aren't Apple devices: I laughed out loud when I saw iOS described as "the game-changer".

Sorry, to clarify what I meant. Without iOS support this is next to useless for us (same as Push notifications). That's obviously Apple's fault, not yours, but it's true. iOS is by and away our largest OS with Apple mobile devices our largest demographic. Getting something that works on iOS would be a "game changer" in that context.
 
I can also confirm that as mentioned above, adding neogaf as a home screen icon does give you something like an app, it doesn’t just open safari.
 
Am I understanding this correctly, it is an app but is not going to work on iPhones???

So wouldn't it be best to wait for ios?
 
Last edited:
From my understanding, that's only true in certain circumstances. Roughly, apple-mobile-web-app-capable which then loses the navigation that is provided by Safari (or in Android's case, the system buttons), outside of edge based swiping. That's not something we'd intend on losing -- it may work in some scenarios but not in XF -- so iOS will basically just open Safari.
You might want to reconsider this (maybe only as an option for admins to turn on). As I said before, we've done this on XF 2.1 with iOS and our users are generally happy with it after we added pull-to-refresh.

IMHO, browser-navigation should not be necessary if the web-app is designed properly and it would be really sad not to have the benefit of a seperate task (this was the major reason ours users wanted to have an App) just because iOS does not support minimal-ui.
 
Am I understanding this correctly, it is an app but is not going to work on iPhones???

So wouldn't it be best to wait for ios?
For iOS, they're going to be essentially just letting you define a bookmark for your home page, which opens a new browser tab as if they had navigated to your site using their mobile browser - unless you explicitly edit your templates with meta tags like the one I posted above.

Given that it's possible to programmatically detect whether the site is running in PWA mode on iOS (window.navigator.standalone - source: https://developer.apple.com/library...eference/SafariHTMLRef/Articles/MetaTags.html), they're only not supporting this in an attempt to force Apple's hand.
 
It’s slightly more nuanced than that. More devices are sold with Android but then their coverage ranges from £50 not-very-smart phones up to Samsung Galaxy and Pixel flagship revolutionary devices.

Most of Apple’s devices are on the upper end of that scale and price.

The target market of some of the lower end models aren’t necessarily tech savvy internet users. So the OS market share at least isn’t an accurate representation of the subset of the market who are regular (if at all) internet users.
 
It’s slightly more nuanced than that. More devices are sold with Android but then their coverage ranges from £50 not-very-smart phones up to Samsung Galaxy and Pixel flagship revolutionary devices.

Most of Apple’s devices are on the upper end of that scale and price.

The target market of some of the lower end models aren’t necessarily tech savvy internet users. So the OS market share at least isn’t an accurate representation of the subset of the market who are regular (if at all) internet users.
Even if real-world it's actually 40-60, my point is still quite valid. You don't "wait for ios" otherwise we still wouldn't have PUSH.
 
On my forum, the majority of users, especially active users, are those who use Apple products, which, to hide both my friends and me, is also only Apple technology. And it must also be admitted that this is a weaving audience that needs an expensive, high-quality product, without the need for constant configuration and with an accurate and understandable interface. Maybe it's time to create a petition and promote it through congress? Why hasn't anyone called Timothy Cook yet? ;)
 
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... 🤔

We need to send some “love” to Apple
Just do it!
 
By standard methods, success in this direction is unlikely to be achieved. Just a non-standard step is needed. I recall how at one time I wrote to Steve Jobs that he would create a story of SMS messages in 2009-2010, how this story will be useful and how users can use this story, not only I wrote, many wrote, but only heard us 2 years ago.

Saul Goodman would definitely have figured out how to achieve a positive solution in the shortest possible time.
 
Last edited:
Google doesn't really do well for web app websites (have experienced it)

So hope the main site will be available as php/html for search engines and this web app is available for users
 
Status
Not open for further replies.
Top Bottom