XF 2.2 / 2.3 Alternative user friendly instructions for PWA iOS install V1.4

[OTuGaMoDz]

Compatible XF 2.x versions 2.2 /2.3
Prerequisites:

You need to know how to edit phrases, upload images to your server and identify the URL path (see FAQs) and very basic template edits. This is for 2.2.14 and above, but can be easily adapted for 2.2.13.

PWA must be set up on your forum

Time needed: 5 - 10 minutes

Demo:

Welcome to the Café: International Sax Forum​

Debate, banter, ask questions, answer them or just sit back, relax and have fun

The problem​

In spite of the fact that PWA installation is very easy, I have found that users find the current video installation instructions difficult to follow as the slides go by too fast. There are also no written instructions or graphics such as arrows that might explain what to actually do.

The process is very simple being only 2 or 3 actions (tap on share icon, scroll down and tap on Add to Home Screen) so for many people a simple written guide works best. I first of all tried making my own video with FCPX and Compressor to replace the default one but found it was going to be very time consuming considering all I needed were those couple of simple steps and an image or two.

Another thing I noticed was that it seemed superfluous to have the phrase Install the app as well as an Install button. And then I realised it seemed incorrect that the button did not actually install anyway, it just led to the instructions in the video mentioned above.

So instead of this:

We can have this:

The solution​

After messing with Final Cut Pro a bit, I realised that just adding some text with a template edit would be quicker and probably better.

1 Remove the superfluous phrase and use it in the Call To Action button instead​

• In the ACP Appearance > Phrases
• Find the phrase simply called install
• Change the text to How to Install the app

Edit the PAGE _CONTAINER template

Search for <xf:button class="js-installPromptButton">{{ phrase('install') }}</xf:button> and remove {{ phrase('install') }} replace with the words How to Install the app

Edit the PAGE_CONTAINER template:

Search for <div class="offCanvasMenu-installBanner js-installPromptContainer" style="display: none;" data-xf-init="install-prompt">

Remove the next line: <div class="offCanvasMenu-installBanner-header">{{ phrase('install_app') }}</div>

(This takes out the superfluous "Install the app")

2. The Install Instructions​

2.1 Upload the images​

• Download the supplied images (or make your own)
• Unzip the folder PWA Images.zip
• Upload both share-icon.svg and add_to_home.jpg to your server.
• Make a note of their URL paths

2.2 The instructions​

Again edit the PAGE_CONTAINER template (a couple of lines below the one we removed above):

Remove the video link:

<p>
                                    {{ phrase('follow_along_with_video_below_to_see_how_to_install_our_site_as_web_app') }}
                                </p>
                                <p style="text-align: center">
                                    <video src="{{ base_url(property('publicPwaInstallVideoUrl')) }}"
                                        width="280" height="480" autoplay loop muted playsinline></video>
                                </p>

Replace that code with this:

Vous devez répondre avant de pouvoir voir le contenu des données cachées.

Change PATH_TO_IMAGE with the actual image URL.

Save the template!

Result:

Télécharger PWA images:

Vous devez répondre avant de pouvoir voir le contenu des données cachées.

Version v1.2 (beta):
Clarified an issue with the phrase How to Install the app

 

XF 2.0 / 2.1 / 2.2 / 2.3  Automatically show custom images for broken post images in Xenforo 2 2.4

XF 2.0 / 2.1 / 2.2 / 2.3  [01] Extend Title Characters 1.0.0

[OTuGaMoDz]

v1.2 (beta)​

Clarified an issue with the phrase How to Install the app

 

[OTuGaMoDz]

v1.4

Simplified the rephrasing process