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.

 

[Sebastiaan]

Who still uses TapaTalk now a days

 

[⭐ Alex ⭐]

That's frustrating me as well. I have two XF 2.2 forums--one has been active for a while, and the other is a development installation. The latter shows up as an "app" on my phones. The other? Nope. Yet on a computer, they act as separate applications with no problem at all.

What I need to do is carefully compare the setup for both of these, and maybe if I find a difference between my two sites, I can drop a hint in here as to what might help with that. It'll be a couple of weeks until I get back home, though...

To get it working as a stand-alone app on ios I had to modify the XF source code. https://xenforo.com/community/threa...ng-for-ios-to-standalone.187505/#post-1475617

 

[Wildcat Media]

To get it working as a stand-alone app on ios I had to modify the XF source code. https://xenforo.com/community/threa...ng-for-ios-to-standalone.187505/#post-1475617

What's odd is that it used to work in the past, and quite reliably. Something has changed, probably in the browsers I've used on Android. Wish I could pinpoint when it stopped working but it's been at least a year.

 

[Wildcat Media]

To get it working as a stand-alone app on ios I had to modify the XF source code. https://xenforo.com/community/threa...ng-for-ios-to-standalone.187505/#post-1475617

Update--I realized that my custom add-on wasn't applying the following to PAGE_CONTAINER (somewhere in <head>):

   <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">

I fixed that just now, and saving a site to the home screen is working perfectly again.

 

[Suzanne O]

Who still uses TapaTalk now a days

Me.

 

[TPerry]

Me.

My issue with TT is the way that they currently want to steal your image content. There is NO way that I'm going to put a portion of my users imagery on their system as if I decide to leave, I lose ALL of that imagery. And I am NOT going to "pay" them to give them a leg up. If they want to pursues pecuniary reimbursement, they need to do that from the actual users of their app.

 

[JamesBrown]

Me.

 

[Suzanne O]

My issue with TT is the way that they currently want to steal your image content. There is NO way that I'm going to put a portion of my users imagery on their system as if I decide to leave, I lose ALL of that imagery. And I am NOT going to "pay" them to give them a leg up. If they want to pursues pecuniary reimbursement, they need to do that from the actual users of their app.

What?
It's free.

 

[TPerry]

What?
It's free.

Maybe you need to do a little more research. IF you want to host uploaded images via it on your OWN site and not on their CDN, you have to pay THEM money.
Been pretty much a thing with them since around 2016 or so. They simply place the images on uploads.tapatalk-cdn.com last time I looked (and that has been awhile ago and I haven't looked again since that immediately turned me off)... and I'm pretty sure that's not on your local install. So, once you remove Tapatalk, those linked images go the way of the dodo as they aren't going to provide free lifetime hosting of them if they are getting no return.
I used it when it first came out (in act, paid for the Pro version of the app)... but with the little games they began playing to worm money out of the admin (in addition to the users of the app) I simply chose to kick them to the curb.

 

[Wildcat Media]

I used it when it first came out (in act, paid for the Pro version of the app)... but with the little games they began playing to worm money out of the admin (in addition to the users of the app) I simply chose to kick them to the curb.

The last time I used them was back around 2011 or 2012 before I switched to XF. And even back then, they were getting into some janky things. What really scared me away was how their scripting bypassed all the XF safeguards, making it easy for spammers and scammers to sign up without having to deal with XF's built-in spam detection. And I forget the details, but there were gaping security holes as well, for the same reason--direct access to content vs. going through XF's safeguards.

Since then, I've read about them "syndicating" the content of forums without the forum owners specifically giving them permission. And there's the ongoing issue of introducing new features, yet never completely fixing all the older features that remained broken...and no support ever forthcoming from developers to help sort it out.

They're a non-starter for me.

 

[Suzanne O]

I don't bother signing up to the premium versions. The free one goes ok for me!

 

[AndrewSimm]

TT is complete trash and does more harm than good. Unless XF comes out with an app then you are best using mobile.

 

[Suzanne O]

TT is complete trash and does more harm than good. Unless XF comes out with an app then you are best using mobile.

Yeah but the new PWA app isn't ready yet.
Tapatalk is fine for now. once PWA is up and running it will be interesting to see if it runs similar to tapatalk.
Speaking of the PWA app, when will this be actually up and active? @Chris D

 

[AndrewSimm]

Yeah but the new PWA app isn't ready yet.
Tapatalk is fine for now. once PWA is up and running it will be interesting to see if it runs similar to tapatalk.
Speaking of the PWA app, when will this be actually up and active? @Chris D

TT limits revenue. It's best to never introduce it to your users. PWA is neat but it hasn't caught on and I doubt it ever well.

 

[Suzanne O]

TT limits revenue. It's best to never introduce it to your users. PWA is neat but it hasn't caught on and I doubt it ever well.

I don't do it to earn money mate.
I use it to get others to join my forum

 

[TheGroove]

TT limits revenue. It's best to never introduce it to your users. PWA is neat but it hasn't caught on and I doubt it ever well.

Now that I'm using PWA on iOS 16.4 I dumped Tapatalk, notifications were the biggest deal breaker for my users and now that we have it natively on both platforms TT is no longer needed.

 

[Suzanne O]

Now that I'm using PWA on iOS 16.4 I dumped Tapatalk, notifications were the biggest deal breaker for my users and now that we have it natively on both platforms TT is no longer needed.

pretty sure pwa isn't up to that yet.

 

[bzcomputers]

pretty sure pwa isn't up to that yet.

Sure is.

[OzzModz] PWA: iOS Standalone Mode

Requirements: XF 2.2+ Description: Changes PWA display mode to standalone for iOS devices (required to receive Push notifications starting from iOS 16.4+) Commissioned by @Moshe1010

xenforo.com

 

[TheGroove]

pretty sure pwa isn't up to that yet.

Sure is.

[OzzModz] PWA: iOS Standalone Mode

Requirements: XF 2.2+ Description: Changes PWA display mode to standalone for iOS devices (required to receive Push notifications starting from iOS 16.4+) Commissioned by @Moshe1010

xenforo.com

Yep, using this addon on my site and my users are all happy with it. It just puts your site into standalone mode, then I added a refresh button to accomodate for the lack of drag down to refresh, here is the code for that.

Safari push notifications coming to macOS and iOS

We use this script for that. If you're not sure how to implement it, I'd see about hiring @Russ. I don’t see why would users need to refresh a single page on my board

xenforo.com

 

[MapleOne]

PWA works great on my board except for one thing.

On occasion I have parts of the site that requires the phone to be turned sideways to see.


Example

/* Remove HTML WidgetS on mobile */
@media (max-width: @xf-responsiveMedium) {
        .html_widget_span {
            display: none;
    }
}

For instance I have a forum banner share and it will scrunch up too small on a phone screen so I deactivate the widget for tiny screens.

Now in browser mode you can turn the phone sideways and the widget will show up.

But when the progressive web app is used the screen will not turn when the phone is used sideways.

I am considering removing PWA for my site but I also use the larger icons for twitter and such so I have two questions.


What is a surefire way to remove PWA for the site while still leaving the site icons in settings.

or

is there a workaround that would allow the screen to be turned sideways.