XF 2.2 Progressive web app

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.

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.

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.

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.

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.

If a user tries to open or navigate the app without a proper network connection, we display a simple offline message.

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.

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]

I'm trying to figure out figure out what this adds beyond adding the following to our PAGE_CONTAINER template (I have used the following for years now): <meta name="mobile-web-app-capable" content="yes">. With this and a handful of site "favicon" codes, if someone adds our site to their home page, they get an icon and a "chromeless" window with no browser controls. XF 2.2 seems to add onto this but I wonder if the method is different (beyond the code I pasted above).

It's quite a significant amount of additional stuff to be fully compliant as a web app. There's a manifest.json that is generated, a service worker, the ability to have a more friendly "offline" message, splash screen, install banners etc.

That will be very hard to overcome for many of us. We can't even fit the main name of our forum into 12 characters. The staff has an abbreviation we use so we might have to roll with that. The icon is unique though, so that will help with identity.

This is not us picking an arbitrarily low limit, this is a requirement of the spec. Presumably because phone app icons are typically very small and it's a fairly poor experience to see something like "XenForo Com..." so a much smaller title is desirable.

Ironic how for years, so many complained about IE6 not conforming to industry standards, now someone else is doing it (who should know better).

I know right...?

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?

 

[Dad.]

For those using the PWA feature on UI.X, we will probably be removing the setting on it as we did not offer service workers with ours and this will be a better utility. Will be hard to 'migrate' over and since settings are minimal I might recommend just setting this up prior to disabling on UI.X. It'll remain deprecated for a while after 2.2 release I think then be removed. Not sure best way to handle yet but shouldn't be a huge deal.

 

[Wildcat Media]

It's quite a significant amount of additional stuff to be fully compliant as a web app. There's a manifest.json that is generated, a service worker, the ability to have a more friendly "offline" message, splash screen, install banners etc.

Good to know! The "web app" code I added did work well on its own, and this will fill in the blanks on the remaining parts of it. Will there be some sort of icon, button or other device where members can "install" the app? In the past, we had to tell them to add the forum to their home screens in order to create the icon.

This is not us picking an arbitrarily low limit, this is a requirement of the spec.

I figured that was the case.

I know right...?

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?

Back when I did some (limited) developing, it was a series of workarounds to make a site work in IE, Netscape and others. Beside IE6, the worst browser I ever had to deal with was Netscape 4.7. There was some bug in it that would cause elements on a page to disappear completely. We used to run an old forum system called WebBBS (which was a variation on the old wwwboard script), and it would make the textarea for posting disappear. I couldn't figure out what some users were complaining about until I downloaded it and tried it myself! It was some other styling element on a page that caused the issue. And it wasn't limited only to the forum script.

You think we'd be past that era by now, no?

 

[Wildcat Media]

For those using the PWA feature on UI.X, we will probably be removing the setting on it as we did not offer service workers with ours and this will be a better utility. Will be hard to 'migrate' over and since settings are minimal I might recommend just setting this up prior to disabling on UI.X. It'll remain deprecated for a while after 2.2 release I think then be removed. Not sure best way to handle yet but shouldn't be a huge deal.

Does this also apply to Flare, which is based on UI.X 2?

 

[Mian Shahid]

Superb

 

[Chris D]

Good to know! The "web app" code I added did work well on its own, and this will fill in the blanks on the remaining parts of it. Will there be some sort of icon, button or other device where members can "install" the app? In the past, we had to tell them to add the forum to their home screens in order to create the icon.

You can see some of the "Install" call-to-action options available in the first post to give you some idea. It varies from browser to browser. Hopefully this will be slightly more intuitive and easier to find.

 

[Faust]

For those using the PWA feature on UI.X, we will probably be removing the setting on it as we did not offer service workers with ours and this will be a better utility. Will be hard to 'migrate' over and since settings are minimal I might recommend just setting this up prior to disabling on UI.X. It'll remain deprecated for a while after 2.2 release I think then be removed. Not sure best way to handle yet but shouldn't be a huge deal.

I’m using UIx theme, would styles will be affected by this app ?

 

[Sperber]

Does this also apply to Flare, which is based on UI.X 2?

Since UI.X is the framework.. @Mike Creuzer , you and your folks are writing a step-by-step guide for that? I know I won´t be the only one, but if this UIX-PWA removal has a point, hidden deep in the darkest woods, where somone can break that whole thing - from experience I know that I´ll step on it blindfolded but with confidence

 

[Earl]

PWA is the future❤ This one is the best so far

 

[RobParker]

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 neofag.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.

@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.

 

[Chris D]

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".

If it was a game-changer, fundamental progressive web app specifications wouldn't be missing from its platform in 2020. There aren't really many ways you can defend their record on this. Their entire approach to anything PWA is extremely lacklustre, and I incluide push notifications in that.

You can do Share > Add to home screen to "install" an icon on iOS but it does little more than add a bookmark albeit accessible from your home screen that opens a new Safari tab. Some of the changes we've added are supported by iOS including the "offline notice" but there is little anything else.

But almost none of that is new as a result of the changes we've made here. It is mostly, with minor exceptions, the same old bare minimum that Apple has supported for a number of years.

 

[Frode789]

Apple doing what Apple does best... Not following any standards and making life miserable for anyone who wants to get any devices etc outside of their eco-system. Which is also why there will never be any Apple products in my house. I detest their practices.

 

[DragonByte Tech]

it does little more than add a bookmark albeit accessible from your home screen that opens a new Safari tab.

Just to give a wee clarification to this: It's definitely not just a new Safari tab. It shows up on the home screen as an app icon, and when you open it, it runs as if it's your standard web wrapper app.

Of course, the point about push notifications stands, no argument there. I felt it was important to clarify that installing a website to the home screen is not just the same as bookmarking by any stretch of the imagination.

I've used an installed version of the Trakt.tv website for a good number of years.

 

[Chris D]

Just to give a wee clarification to this: It's definitely not just a new Safari tab. It shows up on the home screen as an app icon, and when you open it, it runs as if it's your standard web wrapper app.

Unless we've missed something, it doesn't. It shows up on the home screen, but it just opens it up in a new Safari tab.

 

[Ranger375]

Unless we've missed something, it doesn't. It shows up on the home screen, but it just opens it up in a new Safari tab.

When you go to the website from your iphone you can click the little arrow on the bottom of the browser and then press "add to Home screen."

 

[Chris D]

That's what we're talking about. It shows up on the homescreen but it doesn't do anything other than opening up a new Safari tab when it is tapped.

 

[DragonByte Tech]

Unless we've missed something, it doesn't. It shows up on the home screen, but it just opens it up in a new Safari tab.

Try it on https://www.trakt.tv yourself. It works differently than here @ xenforo.com. I'll try and get a screen recording going if you can't reproduce it, if I can work out how to avoid exposing some of my contacts' personal information.

 

[Recep Baltaş]

Great feature in the right direction! AMP next please

 

[Mike]

Just to give a wee clarification to this: It's definitely not just a new Safari tab. It shows up on the home screen as an app icon, and when you open it, it runs as if it's your standard web wrapper app.

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.

 

[Kevin]

Love that PWA is being embraced , just a question about the icons...

Currently I'm specifying several different sized icon files in our manifest file, with XF 2.2 will we still be able to modify the XF generated manifest to include additional icons besides the two specified in the ACP?

For reference, here's one of my current manifests...

{
        "name":"Cameraderie",
        "short_name":"Cameraderie",
        "description":"Cameraderie Photography Forum",
        "start_url": ".",
        "lang": "en-US",
        "theme_color":"#ffffff",
        "background_color":"#ffffff",
        "display":"standalone",
        "icons":[
                {
                        "src": "images/icons/favicon-16x16.png",
                        "sizes": "16x16",
                        "type": "image/png"
                },
                {
                        "src": "images/icons/favicon-32x32.png",
                        "sizes": "32x32",
                        "type": "image/png"
                },
                {
                        "src":"images/icons/apple-touch-icon.png",
                        "sizes":"180x180",
                        "type":"image/png"
                },
                {
                        "src":"images/icons/android-chrome-192x192.png",
                        "sizes":"192x192",
                        "type":"image/png"
                },
                {
                        "src":"images/icons/android-chrome-512x512.png",
                        "sizes":"512x512",
                        "type":"image/png"
                }
        ]
}