Skip to main content

How to turn your Joomla site into a PWA (Progressive Web App)

| Gianluca Gabella | Joomla!
share on facebook share on twitter share on linkedin

Index:


Turning your site into a Progressive Web App (PWA) is simple and brings many practical advantages, let's learn how to turn it into one in a few easy steps with this guide!

What is a PWA?

A PWA is a website that uses certain technologies in order to be viewed and 'experienced' by mobile users in a faster way and integrated with the operating system, simulating the experience that using a real app might give.

A PWA-transformed site will be 'installed' on the user's device, and it will also be possible to create shortcuts that go directly to certain pages of the site:

pixedwebapp

The inherent convenience of PWAs is that they are 'built' with universal languages such as HTML, CSS and Javascript, so they are not tied to the machine on which they run as might be the case for a programme written in Java or C.

Remember that in order to turn your site into a PWA, certain minimum requirements must be met:

  • SSL protocol: the site must be in HTTPS and have an active SSL certificate
  • Responsive site: the site must necessarily be responsive (adapt to small phone screens)
  • Presence of the Service Worker and offline operation: we will see how to create one
  • Presence of a manifest file: we will also see below how to create one

Let us begin the transformation: create the manifest.json

The first thing we need is a file called manifest.json which we can create using a standard text editor (like notepad++).

Let's fill it in with the following code, and we will go on to see how to customise each point later:

{
  "manifest_version": 1,
  "version": "1.0.0",  
  "short_name": "###",
  "name": "### ### ###",
  "description": "###",
  "icons": [
    {
      "src": "###.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "###.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/",
  "background_color": "#f47920",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#f47920",
  "shortcuts": [
    {
      "name": "Ultimi post dal blog",
      "short_name": "Blog",
      "description": "Leggi le ultime novità sul blog",
      "url": "/###.html",
      "icons": [{ "src": "/###.png", "sizes": "192x192" }]
    },
    {
      "name": "Contatti rapidi",
      "short_name": "Contatti",
      "description": "Contattaci direttamente dal tuo telefono",
      "url": "/###.html",
      "icons": [{ "src": "/###.png", "sizes": "192x192" }]
    }
  ]
}

Let us now see how to customise our file by replacing the various ###:

  • short_name: the short name of my application (e.g. 'pixed')
  • name: the full name of the application (e.g. 'pixed web app')
  • description: the description of my application
  • icons: the icons that will be displayed on the phone
    • two pngs are usually sufficient, 192x192 and 512x512 format (to cover most devices)
  • start_url: the first page is usually '/', i.e. the root (the homepage)
  • background_color: customised colour for the app (in my case pixed orange)
  • display: the display of the app. Can be chosen between standalone, fullscreen or minimal-ui
  • scope: we can also leave '/' here
  • theme_color: customised colour for the app (in my case pixed orange)
  • shortcuts: most interesting part, we can create shortcuts that go directly to specific pages on the site. In my case, I inserted two shortcuts to the blog and contacts. For each shortcut, it is necessary to define:
    • nome
    • short_name
    • url
    • icon

Once the file has been customised, we save it and upload it to the root of our site (e.g. with a client such as FileZilla).
Last step: we must edit the header of our site to add the following line, which serves to load our newly created file:

<link rel="manifest" href="/manifest.json">

Second step: the service worker

Let us now create a service-worker that will serve to initialise the 'transformation' system in PWA and will also manage, for example, the caching of pages so that they can be read offline.

Let us create a new text file called service-worker.js with any text editor and paste these lines of code into it:

var cacheName = '###';
var filesToCache = [];
var filesToCache = [
  '/',
  '/###.html',
  '/###.html',
  '/###.html',
  '/###.html'
];

/* Avvia il Service Worker e Memorizza il contenuto nella cache */

self.addEventListener('install', function(e) {
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
    return cache.addAll(filesToCache);
  }));
});

/* Serve i Contenuti Memorizzati quando sei Offline */

self.addEventListener('fetch', function(e) {
  e.respondWith(
    caches.match(e.request).then(function(response) {
    return response || fetch(e.request);
  }));
});

Again, we need to customise our file by replacing the various ###: we give the cache a name (e.g. 'pwa-nomesito') and inside the filesToCache array we insert the URLs of the pages we want to keep in the cache, so that they are also available offline.


Warning:

A brief word must be said on the issue of offline display: if your cache (or yours, depending on how many and which cache systems you use) is not set up properly, 'offline' display may give you rendering problems (e.g. you may see pages that are out of date). If you use plugins such as JCH, you may have problems on some browsers (such as Firefox). If you experience problems displaying pages, I recommend that you leave the filesToCache array empty and do not save any offline pages!


Now that you have created and customised your service-worker.js, you can upload it with FileZilla to the root of your site.

Almost at the end: let's activate the system!

We are almost there, the last step is that of initialisation. We must insert a Javascript script inside our site, and we can do this directly in the index.php of our template (or by using an override, to avoid our modifications being overwritten each time we update the template).

We insert this script inside the body, just before closing the </body> tag:

window.onload = () => { 'use strict'; if ('serviceWorker' in navigator) { navigator.serviceWorker .register('https://WWW.TUOSITO.IT/service-worker.js'); } }

Remember to put this string inside a tag < script type="text/javascript"> ... </script >

and to change WWW.YOURWEBSITE.COM to the correct domain name.

The end! If everything went well, our site should behave like a web app and modern browsers should give the possibility to 'install' our site within the operating system.

How can we see if everything is working properly?

The first test to do is via Chrome's developer tools.

We go to our site and open the tools by pressing F12.

Clicking on the 'Application' tab should bring up a screen like this:

manifest

This means that the manifest.json file has been correctly read and interpreted.

Let us now click on "Service Workers" in the left-hand column.

Again, if everything has been configured correctly, a screen like this should pop up:

serviceworkers

If you also read 'Activated and is running', that means we're on a roll! Everything is working properly and your site is officially a PWA!

How do I install my website on my phone?

Easy! In most cases (like Chrome), the browser itself will ask you if you want to install the PWA, otherwise just go to the browser menu and select the 'add to home screen' option. In this case, not a simple link will be created, but our site will actually be 'installed'.

firefoxchromepwa 


Bibliography

https://it.semrush.com/blog/cose-una-pwa-progressive-web-app/
https://web.dev/install-criteria/
https://web.dev/customize-install/
https://www.joomla.it/blog/8929-trasformiamo-il-nostro-sito-joomla-in-una-progressive-web-application.html


If you liked this article, please share it!

share on facebook share on twitter share on linkedin
condividi su Facebookcondividi su Twittercondividi su LinkedIncondividi su WhatsAppcondividi su Telegram