- Compatible XF 2.x versions
- 2.2
- 2.3
Prerequisites:
You need to know how to search and 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:
cafesaxophone.com
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:
Edit the PAGE_CONTAINER template:
1.1 Search for
1.2 Remove the next line, ie remove:
(This takes out the superfluous "Install the app")
1.3 In the line after that ie
1.4 (Optional: change the wording of Install the app to How to install the app). Search for the phrase install_app, edit the wording to How to install the app.
Again edit the PAGE_CONTAINER template (a couple of lines below the one we removed above):
Remove the video link:
Replace that code with this:
Change PATH_TO_IMAGE with the actual image URL.
Save the template!
Result:
You need to know how to search and 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
cafesaxophone.com
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
Edit the PAGE_CONTAINER template:
1.1 Search for
<div class="offCanvasMenu-installBanner js-installPromptContainer" style="display: none;" data-xf-init="install-prompt">1.2 Remove the next line, ie remove:
<div class="offCanvasMenu-installBanner-header">{{ phrase('install_app') }}</div>(This takes out the superfluous "Install the app")
1.3 In the line after that ie
<xf:button class="js-installPromptButton">{{ phrase('install') }}</xf:button> change {{ phrase('install') }} to {{ phrase('install_app') }}1.4 (Optional: change the wording of Install the app to How to install the app). Search for the phrase install_app, edit the wording to How to 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:
Code:
<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:
Code:
<strong>NB: For Safari start at step 2</strong>
<ol style="padding-left:15px">
<li>(Firefox only) Tap on the hamburger menu <xf:fa icon="fa-bars" aria-hidden="true"/> at bottom right </li>
<li>Tap on the share icon <img src="PATH_TO_IMAGE/share-icon.svg" height="22" width="18" alt="Share icon" /> (bottom of page)</li>
<li>Scroll down and tap on <em>Add to Home Screen:</em></li>
</ol>
<img src="PATH_TO_IMAGE/add_to_home.jpg" height="290" width="250" alt="add to home screen" />Change PATH_TO_IMAGE with the actual image URL.
Save the template!
Result:
