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.
 
@Chris D could you address this? iOS is obviously the game-changer for everyone so if there's a workable solution it's a big deal.

Unfortunately, Safari is anything but game changer. It lacks many CSS and JavaScript features. I mean, Chromium and Firefox are so much ahead, it's not even funny anymore.

I'm not sure why Apple doesn't update Safari more often. It's based on WebKit so it shouldn't be too difficult to incorporate the newest technologies.
 
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.
  1. Can the XF 2.2 PWA implementation be turned off/on ?
  2. Will the XF 2.2 PWA have some form of pre-caching + caching first strategy to populate browser's cache storage area i.e. for just the assets css, js and images that render the page at least to be precached and then some of other assets in cache first strategy ? Would love to not have to maintain my hacky job XF PWA implementation which uses navigation caching + pre-caching + caching first strategy :)

cmm-forum-service-worker-precaching-01.webp


cmm-forum-service-worker-precaching-03.webp
 
Our google analytics stats below. 50% of our total traffic is iOS. 14% is Android. Despite your feelings on Apple, we need to absolutely cater to iOS.

View attachment 227315
View attachment 227317

Yes for spesific sites (like yours) it may be more important than for others, but overall on a worldwide scale it isnt necessarily a "game changer" as the usage there is far, far from 50%. Sure, it would be nice to have though.. Doesn't really have anything to do with sentiments towards a company, but rather raw market share.
 
Maybe this is getting too off-track now but as Chris and others said above, you're mixing together very different grographical markets. Most of our users are UK based and iOS (according to the site you used) has a 50% market share in the UK. Similar for the US (I imagine another major market for XF users).

Yes, if your site targets Africa where there's an 85% Android share or India (95%) you might have a point, but for a lot of us, our users are UK/US based and iOS dominates those markets.
 
I'd just like to point one thing only in this iOS/not iOS disccussion:

Xenforo doesn't own Apple. Apple is the one who gives (i.e. enables) technologies for devs like XF or others to use (or doesn't give, so they can't be used). If you're missing something from Apple, talk to the Apple about this.

Here it is just pointless complaining and whining (though I do understand your frustration, but that's why I never used Apple products).
 
I'd just like to point one thing only in this iOS/not iOS disccussion:

Xenforo doesn't own Apple. Apple is the one who gives (i.e. enables) technologies for devs like XF or others to use (or doesn't give, so they can't be used). If you're missing something from Apple, talk to the Apple about this.

Here it is just pointless complaining and whining (though I do understand your based Pfrustration, but that's why I never used Apple products).

Well I respecfully disagree. The example earlier in the thread showed that iOS could support a XF-based PWA which works extremely well from what I could tell (neogaf.com).

For iOS actually you can create the pwa app by share/add to home screen in Safari. This works on my pwa xenforo.

You may try the pwa thing by visiting neogaf.com with chrome in Android or Safari in iOS. In Android chrome, choose add to home screen. In iOS Safari, share and then add to home screen. Both ways will create an icon which is the pwa app.

There also seemed to be some confusion on the XF devs behalf (it doesn't "just open a safari window" as was suggested by Chris).

It's easy to blame Apple (and it is their fault!) but if a workable solution exists (which it seems to) then ignoring it on principle or by a mistaken assumption seems like a bad idea.
 
Still mulling this one over. As an Android user, I should be happy but I am kind of meh. My board doesn't have a lot of mobile users and that may be part of it. Of course, better mobile access, which this seems to provide, might change that. And I only have one Apple person that I know of so that limitation won't bite me at first. So I will definitely try it out when I am testing 2.2, just not as excited as I think I should be.
 
just not as excited as I think I should be.

that’s how I see it. I’m that a it of people are very excited about it, but as I’ve mentioned before I don’t know what the fuss is about. But keeping an open mind,there must be something in it it just that I don’t get it.

But I will definitely try it and may be pleasantly surprised. I often run polls on my forum asking members what they’d like to see, not one has mentioned anything like this but we’ll see.
 
The craziest thing about it is that even before Microsoft moved to Chromium, their derivative of Internet Explorer, the older versions of Microsoft Edge, actually had many more of these standards implemented than Apple and much sooner. What kind of sorry state of affairs is that?

So, this PWA thing, will this work on iPhones that use the latest Microsoft Edge?

Like this one that I use in the screenshot?

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

FYI, I hate using Safari on my iPhone. I prefer MS Edge or Chrome.
 
Apple probably won't support this anytime soon. :( They want their 30%.

I have Android though so I can use it.... But I'm in the minority for my audience.

That being said still the majority are on desktop for my site.
 
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. so I'm not sure what to expect in terms of official support.

It seems like at some point Apple will have to give in on this issue (right...?) so I think it is better for XF to not build a workaround now that they will inevitably have to remove later. If anything, a third party developer should now have a much easier time building the "missing" features since XF2.2 seems to fill in just about every other blank of making PWAs work.
 
that’s how I see it. I’m that a it of people are very excited about it, but as I’ve mentioned before I don’t know what the fuss is about. But keeping an open mind,there must be something in it it just that I don’t get it.

But I will definitely try it and may be pleasantly surprised. I often run polls on my forum asking members what they’d like to see, not one has mentioned anything like this but we’ll see.

A lot of that will depend on the type of website you are running.

If it's a forum-based website, the admins that run those kinds of websites may not be that enthusiastic about it.

However...

If an admin like myself who run websites that are heavy on media and/or use the XF Media Gallery, then yes, there is a great amount of enthusiasm for this PWA because it will benefit people who are always "on the run" and not sitting at the desktops/laptops all day long posting media-related content.

My website will benefit greatly from this new upcoming feature in XF 2.2
 
Awesome features!

Do you have in program to add AMP support for users who uses xenForo also like a blog? xenForo has some amazing add-ons to make it like AMS (Article Management System). And with AMP would be very nice!
 
Status
Not open for further replies.
Top Bottom