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.

 

[rickhz]

What will an app do that a responsive mobile site in a modern browser like Chrome or Edge won't?

Show up in the Apple Store and Google Play Store where millennials hangout.

 

[Mendalla]

Show up in the Apple Store and Google Play Store where millennials hangout.

But wouldn't there need to be an app in the store for each board? I mean, having a Xenforo app in the store does not help drive traffic to Wondercafe2. Many of my users don't really know they are using Xenforo save the odd time I mention it.

 

[Chromaniac]

yup. the reasonable solution would be to take the route invision is taking by offering a unified app for multiple forums. this way users of one forum can hopefully find other communities of their interest from within the app and it becomes an interconnected social platform with all participating forums helping out each other boost their membership. only a handful of communities here would have a userbase significant enough to invest time and money on a dedicated app and get them listed in both app stores. from what i have been reading, getting ugc platforms approved on apple store is already a big hassle.

 

[Mendalla]

yup. the reasonable solution would be to take the route invision is taking by offering a unified app for multiple forums.

Does that have to be Xenforo, or could a third-party developer do it with support from them? Sounds like it would have to go well beyond just developing the app. There would need be a "registration" system tied to the Xenforo licensing system to get that community list in. Probably with an opt-in/opt-out mechanism so we owners/admins can choose whether to have our communities appear.

 

[Mendalla]

On topic, I have stopped using the PWA for now. I will tell my users about it and give them the option, but I do find it easier when skipping between sites, or even between ACP and the forums on my own site, to just use a browser.

 

[Chromaniac]

could a third-party developer do it with support from them

Tapatalk did that and it didn't turn out well. This is why I am personally more than happy with pwa. But I understand that that larger sites like macrumors would probably benefit from a dedicated app.

 

[bomb2060]

This is timely. Some people were charging hundreds of dollars for addons that can do this same thing. I hope they made enough, it's over now.

Question: How do I submit this App to Google Playstore?

 

[Kirby]

Question: How do I submit this App to Google Playstore?

You can't directly submit a PWA, but you can package a PWA as a TWA inside an APK with tools like bubblewrap or PWABuilder.

You'll also need a google developer account ... and quite some time to fill out all the forms, but it does work.

MietzMietz - Mein Katzenforum - Apps on Google Play

MietzMietz - My cat forum with over 50,000 photos and cat mediation.

play.google.com

 

[drastic]

Tapatalk sucks because you're growing THEIR product, not your own.

Always go with your own app, even if it's a pain in the you know what. Grow and keep your own audience.

There's plenty of third party services that make app creating simple, help put it on the stores, etc. The app might only be a browser, but people love apps. So don't be scared to go for it.

 

[rickhz]

Tapatalk sucks because you're growing THEIR product, not your own.

Exactly. That's the #1 reason I have never went with Tapatalk even though many members have begged for it. I keep feeding them the usual Xenforo response - "But it's already responsive design and will work well on your cell phone as is". Not good enough for the "App crowd".

One of the notices I have setup on my site is a message telling users that holding their phones sideways will give them a more full featured version of the site. The majority leave their phones vertical and have no idea that they could bring up additional features.

 

[Chromaniac]

tapatalk was very handy few years ago when phones were not powerful enough and forum performance was poor in mobile browsers. but that has not been the case for a while now. i don't think i used my forum from the mobile browser a lot at that point of time. now i prefer the mobile browser over desktop for basic tasks like monitoring, moderating and of course casual posting.

 

[Recep Baltaş]

Tapatalk sucks because you're growing THEIR product, not your own.

Yepp. That's why we removed it! Tapatalk is boomer now

 

[⭐ Alex ⭐]

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.

Can anything be done using the meta element? Our forum has 'Add to Home screen' functionality on ios using the meta tag:

<meta name="apple-mobile-web-app-title" content="Our Forums">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

When you manually select 'Add to Home Screen' in Safari's share menu, it pops up on the home screen with its icon and splash screen however any hyperlinks open in Safari so for that I found a javascript hack for converting all links so that they open in the app. https://stackoverflow.com/q/2898740

Problem is this is a hacky approach and broke drop down menus such as the notification drop down menu, because if you tap them, they will drop down for a moment and soon after perform a load of the notifications page.

Maybe with some conditional code for ios "standalone" mode something can be done?

 

[askandy]

Maybe with some conditional code for ios "standalone" mode something can be done?

Have you seen this information:

The PWA Add to Homescreen Library

Managing the differences between each browser and platform's progressive web app installation process is daunting. The Add to Homescreen Library makes this easy

love2dev.com

I originally posted it here:

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

xenforo.com

 

[Ekonomist]

what about Adsense? is it allowed to puplish ads for PWA using?

 

[Chromaniac]

Pwa is basically your website in an invisible mobile browser. So it shows the same ads.

 

[Ekonomist]

Pwa is basically your website in an invisible mobile browser. So it shows the same ads.

Yes shows same ads and webview shows same ads too. but i had problems with webview android apps.

 

[frm]

This is pretty cool!

I just tested it in my site and it disappeared (already have it on XF). If you uninstall it, it reappears, so it's not saving it in the DB that it was installed so never show again—nice.

Which leads me to this DB/stats suggestion so it's not clogged up here.

 

[PumpinIron]

This is amazing. I get so many members asking me if I have an app for my forum. I'm constantly trying to explain to them that they can simply add it to the home screen and it will work just like an app. This will save me loads of time.

 

[Hristo Avramov]

Is there a guide how to submit your app to app store?