Progressive Web App
Technically speaking, a Progressive Web App consists a Service Worker who handles all requests between server and browser. The prerequisite is that the contents are transmitted in encrypted form. Among other things, the manifest serves the purpose that when the app is installed on a mobile device, the App Icon is displayed. A detailed explanation of Progressive Web Apps (PWA) and which Optimizations for a PWA can be made, you will find in the articles.
Installation miTT PWA Progressive Web App for Joomla
After successful installation, the settings can be made. To do so, go to the Plugins section and open miTT PWA. By activating and saving the plugin the service worker file is created for the first time. To ensure a correct function the Joomla PWA Plugin should be configured as follows
Service Worker Version
Register Service Worker Async
The only thing that is determined here is how the registration is to take place. If there are problems during the registration installation, the Async registration can be set to no.
Unregister Service Worker
If the PWA support is no longer desired or the service worker is faulty, it is possible to make this setting. This function should only be selected if the PWA is no longer required.
Tab Caching - Cache First or Network First
The decision whether Cache First or Network First can be made here. Cache First means that all files in the service worker cache are read and updated with this request. If Cache First is active, changes to the content are only visible the second time the cache is called. However, there is a clear advantage in terms of speed. If there is no Internet connection, the offline page is used.
Bei Network First , the current contents are always retrieved and updated in the background of the offline cache. If there is no Internet connection, the system checks whether the corresponding page is in the cache. If not, the configured offline page would be displayed.
CDN - miTT PWA
If files are loaded via CDN or a CDN plugin is used to receive files distributed over it, the CDN setting should be set to "Yes". If only Google fonts are transferred, the setting may be left at no. When using a CDN plugin, inline scripts must not be output via the CDN, otherwise it is not possible to register the service worker.
To enter the static cache, there are 2 possibilities, you can enter the paths one by one or you can use the text input field to add several paths at the same time. If you choose the text area field, the paths must be separated by commas. A new line after the comma keeps the clarity.
If the files of the static cache are changed, the service worker version (setting in the Plugin tab) must be changed so that a new cache is created in the browser the next time the PWA or web page is called.
As mentioned before, the content of the called page is put into a cache called 'pages'. If you don't want to cache certain pages and areas, you could exclude them here. To do this, select the term that appears in the URL. Then all the pages that contain the term in the url are not cached and are loaded from there. An example would be the login page.
The offline page can be configured if desired. Under the following path /plugins/system/mittpwa/offline.html the offline page can be found in the Joomla installation. This is a pure HTML page and can be edited as desired. One possibility would be to copy the complete source code from the browser and then paste it into the offline.html. The content between Body can then be deleted and adjusted.
Among other things, the manifesto is responsible for ensuring that the Progressive Web App can be installed. In this tab, the manifest could also be disabled if not desired. If you use your own manifest or customization, you could disable overwriting when saving the plugin.
Decide what your app should be called and with which page the app should start. To do this, simply enter the url without the domain (e.g. /startpage). As default the start page (/) is stored. Adjust the colors of your PWA and how the app should be displayed. If you should decide for "fullscreen" or a display without browser navigation, you should technically ensure that the navigation works smoothly without a browser.
The icons are best generated using a manifest generator like the one from Firebase or you can create your icons in the desired format, which can be defined as follows
You put the icons in a folder you have defined, such as "icons", and place it in the Joomla folder "/images/...". This folder you can then select the setting of the plugin. If these icons should be added in the header for Apple as well, then set this to yes.
To check if everything works as desired, we recommend to use the Chrome Browser in the first test, because it provides tools. A basic condition for the correct installation of the Service Worker is an encrypted website. To test it in a local environment without encryption, the site must be accessible on localhost and the browser line must also show http://localhost.
In the Chrome Browser open the console and switch to the tab "Application". If the Service Worker is correctly installed, a solid icon will be displayed at Status. Furthermore, it is very easy to simulate via the offline mode, simply tick the box.
Lighthouse PWA Test
Google also provides Lighthouse with the Chrome Browser to check the website for performance, Progressive Web App, best practices, accessibility and SEO. A test shows whether the website has the functionality of a PWA.
If the error "start_url does not respond with a 200 when offlineThe start_url did respond, but not via a service worker., then you should check if the start page is available offline. The easiest way is to check the Offline box under "Application" in Chrome Browser.
Alternatively, you can also add Firefox "Lighthouse" by using this Link into the bookmark list of the browser or right click to add it to the bookmark list. Afterwards you visit the desired page and click on this link and a Lighthouse Test is performed.