Add a PWA progressive webapp to your Joomla website Popular

Every website, a Joomla website also, can be converted, added as, a pwa app.

A PWA is a progressive web application, which can be installed as application directly from your website with the help of a modern browser on almost any device.

It has a lot of possibilities in itself.
we have made a example here how to add the PWA functions as a possibility to a Joomla 4 website, so visitors can install your website as PWA app on their pc or mobile.

Download the .zipfile from this page if you are interested in how this works.

About a PWA app

A PWA needs 3 things to work

• A manifest.json file
• A serviceworker.js file
• A bunch of icons in all sorts of formats so it can be installed to android, ios and windows computers and mobiles from one location.

Creating these files can be a challenge and takes a lot of time to set up. We have made this example to make it an bit easier to do this.

in the download on this page you find some stuff to get you going

• a example mainfest file
• a example serviceworker file
• a zip file with a bunch of example icons for Andoid, ios and Windos 11

How to set up a PWA for your Joomla website

The easiest way to get some help and understanding of the process of creating a PWA and setting it up is to:

• go to pwabuilder.com where the files in this example are also made for the most part
• here you can fill in the url of your website and check the status of your PWA and help you to get it up and running.
  We have made/added in the example the core functions that are needed for a PWA that meets the criteria for a installable PWA

Manifest file

The manifest file in the example needs to be changed to your needs on various fields. here is a list from start to finish.

Open the manifest file in a editor so you can change it.

• background_color: This is the background color of your PWA app. you can change it to your own needs
• description: Change the description to what your webapp is about
• name: Fill in the name of your PWA app
• short_name: Give your PWA app a short name
• start_url: in most cases this is the homepage of your app, so that is what the manifest does with this "/"
• theme_color: You can change the themecolor here
• Icons: here we have added the standard locations of the various icons  as they are generated in the manifest edit screen / icons in pwabuilder.com. Here you can create these icons from a core icon of at least 512x512 pixels in png.
• Just make a icon of that dimensions  from your logo or otherwise. This icon needs to be present in your Jooma 4 website in the images/icons folder. create such a folder if you don't have one yet.
• In the pwabuilder.com at the manifest edit screen at the icons tab there you can select the core icon and create the other icons that are listed in the manifest file as a .zip file.
• This .zipfile contains 3 folders and a icons.json file. just unzip the file and upload the 3 icons folder (android, ios and windows11) to the root installation of your Joomal4 website. The example manifest file picks them up here

After you have changed the example manifest to your needs, upload it to the root of you Joomla 4 website. We tell Joomla 4 that it is present later.

Serviceworker js file

In the example you find a serviceworker js file (pwabuilder-sw.js) that adds the core functionality of a serviceworker to your website, so the serviceworker works in your browser. There are 3 different serviceworkers available in PWAbuilder,com. You can use one of the others there ass well if you want.

Upload the serviceworkerfile to the root of you Joomla 4 installation

Make it work all together

The last step is to tell your Joomla website that the manifest.json and the pwabuilder-sw.js file are present in your website.

There are various ways to do that. For our websiteprojects we often use the t4_bs5 template and framework from Joomlart.com. Here adding this is super simple. Just add the code to the global setting of your template. Here your can add code to the before /header location or the before /body. the best location for the serviceworker code is to add it to the before/body.

If you use the core Cassiopea template of Jooma 4 the easiest way is to set (temporarily) the configuration to no editor, so the code you add to a custom module we are going to create does not get filtered out.

Create a new custom module, give it an proper name and add the code as shown below here in the image.
Set the module to all pages and publish it on the footer location.

After that your website can be recognized as PWA app and with for example a Chrome or Edge browser it can be installed on your pc, tablet or mobile.

This is a example of how you can create a core PWA webapp from your website.
You can do lots more with a PWA once it is installed at your visitors, such as direct messaging etc... 

We hope it helps you create your own PWA Webapp for Joomla.