XF 2.2 PWA setup helper and Web share API

Not so long ago we showed you the new progressive web app functionality coming in XF 2.2 and since then we've added a couple of related bits which we are including as of XenForo 2.2 Beta 2.

pwa_helper_web_share_hys_01.png
PWA setup helper​

localhost_22x_admin.php_pwa_ (1).pngThere are a number of requirements you need to meet before a PWA becomes installable by most browsers. Some of these requirements are server config related, others are options, some are language based and some are style based.

While they're not particularly strenuous, we thought it would be worth highlighting all of these requirements in one place to make the process of setting up your PWA even easier.

To check if your forum meets the requirements to be installable as a progressive web app you now just need to head over to Admin > Setup > PWA setup.

Once complete the PWA will now be installable on supported browsers.

Web share API​


While not directly related to PWAs this is another modern web API that aims to bridge the gap between web apps and native apps by leveraging native device features. The Web share API allows your users to share content from your forum using the native device "share sheet" built into their devices. This one is even supported by iOS! 😱

Instead of us rendering the typical share icons in various places like these:

pwa_helper_web_share_hys_03.png


We instead display a single share control:

pwa_helper_web_share_hys_04.jpeg


And where we display the content-specific search icon, such as in the top right corner of posts, tapping it no longer displays the search tooltip.

Tapping the share button opens up the default experience for sharing content on your device. Most apps on most devices will extend the default share sheet meaning in just a few taps your users can be sharing your content with their friends/colleagues via whichever native app they have on their devices.



pwa_helper_web_share_hys_05.jpeg pwa_helper_web_share_hys_06.png



In other PWA related news we have also added a new style property.

web_share_07.png


This property allows you to indicate whether the icons you have provided are sufficiently padded enough to enable them to be cropped for various device icon styles. For example, it means your icon can be cropped to a circle so it appears nicely on Android devices without cropping anything out of your icon.

In most cases if you do not verify your icons are maskable they will usually be shrunk to fit the "safe area" but this may not look optimal so it's worth doing.

You can read more about maskable icons here and you can use this tool to help test and verify your icons are maskable.
 

Kirby

Well-known member
Thanks for the update. :)

Supporting maskable icons is great, as this does make Lighthouse happy (and does look better in many cases).

Support for Web Share API is awesome, this does bring us further forward to true "App" experience.
Can we also get support for web share target? ;)
 

NealC

Active member
Are you aware when viewing in PWA mode on an iPhone for example there is no back/forward navigation? Try going to your site and then tap New Posts. There is no way to go back to the new post list so you have to go the home screen and tap new posts each time. I reported this in another thread about a month ago.
 

Chris D

XenForo developer
Staff member
We don't support PWA on iPhone fully yet mostly for that reason.

If you are experiencing this on your own site it's not coming from XF and you may have a customisation that provides this functionality - sometimes it ships with your style.

FWIW you can navigate forward and back with gestures, i.e. swiping from the very left or very right of the screen.
 

Kirby

Well-known member
Are you aware when viewing in PWA mode on an iPhone for example there is no back/forward navigation?
Hmm?

ios-xf.jpg


This is how PWA does look on the iPhone, so there are navigation buttons, but you could also use edge-based swiping.
 

NealC

Active member
Hmm?

View attachment 232255

This is how PWA does look on the iPhone, so there are navigation buttons, but you could also use edge-based swiping.

That is not PWA but in Safari browser in traditional web site mode. If you tap the share button and save to the home screen you'll be in PWA mode. Here is the side by side:

 

Chris D

XenForo developer
Staff member
As I just said, if that's your experience on your own site that isn't coming from XF.

You very likely have a custom web manifest defined. You can test this out by adding XF Community to your home screen and comparing the experience.
 

NealC

Active member
This is the experience when someone saves the web page to their home screen in iOS such as the XF site to appease them for not supporting Tapatalk that this is just as easy to launch and view on its own.
 

RobinHood

Well-known member
Should the web share work on the share icon for individual posts? As that seems broken for me now on iOS. The pop up doesn't appear anymore and the share sheet doesn't appear.
 

Chris D

XenForo developer
Staff member
Yes it should work. Does work for me.

476CED8A-1771-4FBB-9CDE-3EB1176153B8.jpg


It could be cached JS although that shouldn’t generally happen.

May also be related to iOS version but I think most recent iOS versions support this out of the box.
 

RobinHood

Well-known member
Weird. I updated iOS on my phone and cleared the history and website data and still not working for individual posts. Tried it on an iPad too.

The share thread button below the similar threads box works grand, just not posts.
 

Chris D

XenForo developer
Staff member
Yeah it’s something we’re looking into. After clearing caches at this point it may work on a subsequent tap.

It works flawlessly on iOS 14 beta...
 
Top