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.
 

Mendalla

Well-known member
Will I soon be told to blame my members for using Apple devices?

If you read the actual articles, the reason Apple devices are not supported is that Apple does not support the spec for PWA or push notifications. Rather than making everyone wait on Apple, Xenforo went ahead and implemented it for those who can use it (Android and Windows). So that's why @Taylor J said to blame Apple. Obviously, Apple users are not the ones to blame but they should be made aware that it is their device manufacturer, not Xenforo, that is holding them back.
 

RobParker

Well-known member
If you read the actual articles, the reason Apple devices are not supported is that Apple does not support the spec for PWA or push notifications. Rather than making everyone wait on Apple, Xenforo went ahead and implemented it for those who can use it (Android and Windows). So that's why @Taylor J said to blame Apple. Obviously, Apple users are not the ones to blame but they should be made aware that it is their device manufacturer, not Xenforo, that is holding them back.
Neogaf works perfectly as a PWA on iOS. Very impressed when I tested it.
 

rickhz

Active member
If you read the actual articles, the reason Apple devices are not supported is that Apple does not support the spec for PWA or push notifications. Rather than making everyone wait on Apple, Xenforo went ahead and implemented it for those who can use it (Android and Windows). So that's why @Taylor J said to blame Apple. Obviously, Apple users are not the ones to blame but they should be made aware that it is their device manufacturer, not Xenforo, that is holding them back.

I had read it, and understand the situation.

Mobile Device Info
1.Apple iPhone23,192 (46.66%)
2.Apple iPad1,075 (2.16%)

The above is from Google Analytics and it shows that Apple Iphones and Ipads account for nearly 50% of my mobile traffic. The 2.2 "progressive app" leaves them in the cold. I am an Android user, but I can't expect people to drop their Iphones just so they can have a functioning forum app.
 

drastic

Well-known member
I had read it, and understand the situation.

Mobile Device Info
1.Apple iPhone23,192 (46.66%)
2.Apple iPad1,075 (2.16%)

The above is from Google Analytics and it shows that Apple Iphones and Ipads account for nearly 50% of my mobile traffic. The 2.2 "progressive app" leaves them in the cold. I am an Android user, but I can't expect people to drop their Iphones just so they can have a functioning forum app.
Be lucky you're only 50%

Mine is 70% or higher :/

I got excited for PWA, but if the bulk of my users can't use it, it's 70% useless to my site.

Apple needs to get their head out of the sand and open up to things like this.
 

Brogan

XenForo moderator
Staff member
Ultimately though, your users aren't losing anything or suffering from a lack of functionality because of Apple's closed ecosystem mindset.

Literally the only difference between the PWA and the browser is an icon.

I actually prefer the browser for various reasons.

Eventually Apple may learn as Sony did (memory sticks anyone?) that having proprietary standards is a waste of time.

If not then consumers have the choice.
 

clubpromos

Active member
I'm happy to see PWA coming soon.
My members though, they keep asking for years now: how do I find the [my forum] app on the app store?
I am not expecting Apple to implement standards out of the goodness of their heart.
The Apple app store is tremendously popular and profitable.

Having an app listed in the app store is a great visibility opportunity for any forum and that's what my 65% iOS users are expecting (or have been waiting for ever since I migrated from Vbulletin so many years ago).

I remember some threads years ago where some were told: why an app when Xenforo is responsive? I also remember thinking: should we expect mobile users to make an exception and change their habits and preferences and not want our forums as a mobile app listed on the App store?
To me that looked like lost opportunity and totally contrary to market trends.

I think that PWA, at least what I am learning of it, is great progress. I still wish that I could get my app in the App Store and get my forums in front of more potential members that way.

If not then consumers have the choice.
I didn't understand this. What choice are you referring to for iOS users?

Eventually Apple may learn as Sony did (memory sticks anyone?) that having proprietary standards is a waste of time.
But should we wait for a trillion $ company whose app store model dominates for over a decade to do what seems to some to be "what's right"? And should we hope that the majority of users expecting apps in the App store change their ways before the discussion forums model dies?
To be honest, I don't see that happening the Sony way that you're referring to at all in the foreseeable future. I hope I'm wrong but it doesn't look that way TBH.
 
Last edited:

Kirby

Well-known member
Literally the only difference between the PWA and the browser is an icon.
Hmm ... is it?

Can you have a forum as a separate task with just the browser?
Can you click on a link (in a post etc.) to open an external website, navigate a bit there and go back to the forum exactly where you left with one click with just the browser?
Can you avoid browser UI elements (address bar, etc.) occupy valuable screen space with just the browser?
Can you perform actions (like starting a new thread) directly from the launcher icon with just the browser? (possible with PWA, but not implemented (yet) )
Can you share content (photos, video, etc.) from other apps to the browser? (possible with PWA, but not implemented (yet))
Can you publish a website to Google Play store without much effort (possible with PWA as TWA)?
 
Last edited:

askandy

Active member
I still wish that I could get my app in the App Store and get my forums in front of more potential members that way.
I believe you can, with this add-on from @truonglv

We may use that for iPhone, and wait for PWA for Android Users. Still determining next steps for us.
 

sbj

Well-known member
Although I agree that PWA is the right direction and it not working on iOS makes it half useless, I find the discussions intriguing.

99% of you earn money from your sites. I have no sympathy with anyone inside those 99% who cry for a mobile app. I also criticize the dev team from time to time for not progressing fast enough (imo), but on the other hand in the last 4-5 years I have not seen anyone of you investing in the XF eco system. If there is something you need, invest in it and sell it on here or publish it. But no. You all cry and demand but yet you don't want to invest. You cannot expect everything from the dev team. A little bit help would be nice. You are too greedy.
 

rickhz

Active member
I believe you can, with this add-on from @truonglv

We may use that for iPhone, and wait for PWA for Android Users. Still determining next steps for us.
The "best" forum software shouldn't need addons for the most basic functionality. At this time having dedicated forum apps in the app store and Playstore is basic functionality. AMP should also be considered basic functionality.

I switched from Vb to Xenforo because at the time it was cutting edge. Ever since they have just been adding more window dressing. :(
 

Mendalla

Well-known member
At this time having dedicated forum apps in the app store and Playstore is basic functionality.
What will an app do that a responsive mobile site in a modern browser like Chrome or Edge won't? That's the question. If the answer is "nothing", then an app is a just another interface, not basic functionality.
 

askandy

Active member
If there is something you need, invest in it
+100% -- totally agree. I've never seen a piece of software that has everything we need or want. As long as it has a framework to allow it to be extended easily, then it's good in my book.

Truth is, there is a native mobile app for Xenforo available (I've linked to it here), and the pricing is pretty reasonable IMO. That's why we're strongly considering using it.

If I can't find something I believe we need, we usually have it built, and make the investment.

What will an app do that a responsive mobile site in a modern browser like Chrome or Edge won't?
Many are pointing to the lack of push notifications on iOS. But, for every obstacle, there is most likely a reasonable work-around.
 
Last edited:

Mendalla

Well-known member
My thoughts on PWA after using it for a couple weeks. Not so much a review as "here's what I am feeling in this moment."

It's ... okay. Getting notifications of alerts on my phone with a badge on an icon is nice. Otherwise, though, I am not finding a real benefit over just using my browser. In fact, since I often check my site, then pop over to this one, I often end up using my browser for Xenforo Community. It's easier to change tabs in a browser (Edge, but I've tried it with Chrome, too), or tap in the address bar then tap the quick launch icon for Xenforo, than to actually switch apps. Beyond that, since the PWA essentially runs in the browser, I don't find much difference or benefit when I am actually doing stuff on the board.

So far, I have been using the PWA just to try it out and to help if I need to support my users who want to use it. But in the long haul? Not sure I'll keep using it myself. I'm already getting back into the habit of just using Edge. It's just easier the way I do things.
 
Top