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.
 
First, I welcome the PWA implementation (y)

Second, I criticize Apple for not following the open standard and support your call to send feedback to Apple. @all: Please participate!

However, I also feel that it is important to support iOS Users, which are a big and important audience of my Xenforo Community. After Push Notifications, the PWA is now the second feature that does not include iOS Users.

While I understand that supporting push notifications and web apps is easier following open standards I also would like to point out that all these features could potentially also be done for iOS.

There are tons of websites supporting iOS Push Notifications and iOS Apps. I know it is more difficult to add iOS support. But just pointing the finger at Apple for not following the open standards (which is true and I criticize Apple for that) is not enough.

In the end:
  • my community user don't care about the technical solution (if it follows an open standard or Apple's proprietary way)
  • the end users sees that other websites are able to support Apple's Push Notifications and Apps.
  • as a community owner I have to tell my end users that I'm only able to support Android (and Chrome/Windows) but not iOS. Not because it wouldn't be technically possible, but because it would be more difficult to also support iOS.
  • therefore I have to ignore the needs of a large group of my community users who would like to use the same features as Android users.
I fully understand the additional time, effort and costs to add support for iOS. I'm not asking to get it for free. You could make it an official Xenforo addon, I'm willing to pay for it!

Pointing the finger at Apple (which is justified) is one side of the story, working on a possible solution to also support iOS would be the other side.
 
neofag is running Xenforo with a customized ThemeHouse UIX pro. Actually any xenforo website can do the pwa if your website is compliant to their simple requirements.

There's an add-on that helps you make your xenforo to pwa.

Home Screen Installation 2.0.1

It's very easy to install.

I believe XF2.2's PWA implementation is doing something more than that. Can't wait for the XF2.2.

Do you keep typoing your own site? I'm assuming you mean neogaf.com which seems to have an awesome PWA implementation which works great on my iphone.
 
Pointing the finger at Apple (which is justified) is one side of the story, working on a possible solution to also support iOS would be the other side.

Thing is, at some point Apple will add support. They are just slow with updating Safari to the latest WebKit standard.
 
This makes no sense. Punish half the people for something out of your control or let those people take advantage of it and use it to be more excited about your community which should lead to more content and a better experience. Why would you ever take away options for those that can use them when it comes to zero cost to you? Are you going to lose 50 percent of your customers because of something that you can not control, really?

Not adding feature - no one is aware of it, no one misses it as it's not available, everyone continues to use your site

Add feature for half your users - discriminate against half your users, make them annoyed that you've put effort into something for Android but excluded them, end up with different user experience, lose some users because they think you don't priortise them
 
Add feature for half your users - discriminate against half your users, make them annoyed that you've put effort into something for Android but excluded them, end up with different user experience, lose some users because they think you don't priortise them

You're making a lot of assumptions here. I never heard my users complaining about being discriminated for a feature that works on just one platform.

Such features are a privilege, not a right.

Not adding feature - no one is aware of it, no one misses it as it's not available, everyone continues to use your site

You could disable the feature in the admin panel, that should resolve your use case until Apple adds support :)
 
Last edited:
You're making a lot of assumptions here. I never heard my users complaining about being discriminated for a feature that works on just one platform.

You could disable the feature in the admin panel, that should resolve your use case until Apple adds support :)

I'm basing my responses on experience here...

And yep, we'd need to turn it off, hence my comment at the start of this discussion that it's next to useless for us if it doesn't support iOS.

iOS support DOES seem possible given the cool example above so I'd rather push for that.
 
Can pwa enable screen swiping for thread page changing? Swipe to the left to go to next page, to the left for previous page? This is a normal app gesture.
 
Can pwa enable screen swiping for thread page changing? Swipe to the left to go to next page, to the left for previous page? This is a normal app gesture.
On iOS it does work out of the box. Not sure about Android, depends on the OS Version i would guess.
 
Are you going to lose 50 percent of your customers because of something that you can not control, really?


I never said anything about losing anyone. But my customers pay, so to give one half of the customer base a feature I cannot give the other, would leave me with a load of people who think I'm neglecting them. For me, If they all can't have it, it will be switched off globally until they can.

Meanwhile, xF and a theme from @Russ renders the forum so well on everything from the tiniest phone to a big screen TV. So feel I can afford to wait
 
I never said anything about losing anyone. But my customers pay, so to give one half of the customer base a feature I cannot give the other, would leave me with a load of people who think I'm neglecting them. For me, If they all can't have it, it will be switched off globally until they can.

Alrighty then. Sorry Apple screwed you here.
 
As pointed out elsewhere, it doesn't seem to be in Apple's best interest to support PWAs as they are basically a direct competitor to the App store.
Why for Google (Android) this is different? Aren’t they earning a cut too?
 
It's a moot argument. The websites that will rely on PWA technologies for the best mobile experience are exactly the type of people who will never release a native app and it seems even Apple disagree with apps that are just web views these days. And even if they somehow did create an app, they'd be very unlikely to be able to make any revenue by it that would be significant to Apple or Google.
 
The websites that will rely on PWA technologies for the best mobile experience are exactly the type of people who will never release a native app ....
That's my philosophy--nobody should have to download an app to visit any of my forums on mobile. If they want to put a shortcut on their home screen, that's up to them. If it's enhanced as a PWA, that's just a bonus. In my case, I'll just release things as-is and let the members decide what they want to do. The forums are good enough that the interface they access it with is far overshadowed by their actual participation in the forums. If they are spending time fretting over whether or not their favorite devices does or does not handle features, then we're doing something wrong in providing them a community that for some is a big part of their lives.
 
I agree @Rudy

A good responsive design resolves like 98% of the mobile experience. The rest is bonus.

For example, push notifications are nice to have, but it's not that kind of feature someone would desperate need to access the website.
 
For example, push notifications are nice to have, but it's not that kind of feature someone would desperate need to access the website.

In fact, I turned them off for myself after a month or so. Partly because my board isn't that critical that I can't wait until I get on to see alerts and partly because I find them a bit annoying for sites where I do use them. Even here, I have email, rather than push, set for the couple forums I watch (HYS and announcements) that I want alerts from.
 
Status
Not open for further replies.
Top Bottom