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
Time interval for updating the Joomla PWA
When changes are made to the Service Worker, i.e. changes are made to the PWA at the user, the setting "Time interval for updating the Service Worker" is used. Here the Service Worker at the user is updated in the background, the cached files are deleted and the static files are actualized, if a new defined Service Worker version is defined. The test mode is only for checking purposes, because the time interval is set very short. The recommended setting is 3 to 23 hours.
If you plan to make several changes to the Joomla website or to the static files CSS, JS, then the setting may be shorter. The update of the Service Worker will only be done, if the Joomla Plugin with TT PWA is saved with a new 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, Network First or Cache First / Network First depends on the Network Connection 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 and requested page is not in the Cache, 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. Static Files will be delivered speedy from the Service Worker Cache.
Cache First - Network First depends on the network connection
When selecting Network First there is the possibility to choose the Cache First strategie in depending on the quality of the Internet speed. This determines the effective network connection in terms of speed and latency. The value is then either "slow-2g", 2g, 3g or 4g. The miTT PWA plugin for Joomla allows you to configure the corresponding effective speeds, so that the selected value and worse the PWA network strategy Cache Firstwould come to bear.
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 manifest 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.
App Kurzbefehle (App Shortcuts)
To use App Shortcuts activate them. Then you can define the App Shortcuts like name, description and icon. The App Shortcuts refer to a Joomla menu link. The icon should be defined as PNG in the size 192 x 192px. App Shortcuts are supported from Chrome version 84 on.
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 different operating systems of an Android smartphone display the icons differently. To get a good result there is the Maskable Icon. To create this icon, use the Maskable-App-Editor. To use this feature, the setting should be "any maskable", otherwise the default value "any" is used.
Because you don't need just one icon, the best method is to use a manifest generator like the one from Firebase Alternatively, you can create the 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.
iOS Status Bar PWA and iOS Install Banner
If no Apple Icons are added by the template yet, this can be done here with the button.
Apple iOS does not yet offer a button to install the Web App on the iPhone. To install the Progressive Web App on the iOS smartphone, it must be added to the home screen. With this button you can display the installation banner. If no installation hint is desired, the "Install Prompt" of the PWA can also be suppressed.
The top bar on iOS devices, which contains the time, wifi status and battery, is called the iOS Status Bar. It can be defined with the "default" value for white background and black text. Black stands for black background and "black-translucent" takes the background of the body HTML element. The text color is white. To make the iOS Status Bar the same color as the navigation, the body color in the template must be adjusted accordingly.
Custom or own Install Button for the PWA
Depending on the app, a separate installation option of a PWA is useful. If activated, the standard banner will be blocked for the time being. This allows an own button to be integrated into the website. This button must have the CSS class "mittpwa__install__a2hs" to trigger the installation of the PWA. The installation button is hidden in the Safari browser and Firefox desktop version. If the browser does not support the installation of a PWA, the button is inactive or cannot be clicked. Here is the example code with the corresponding class:
<button class=" mittpwa__install__a2hs">Install</button>
The button can be integrated via a Joomla Module, a Joomla Article or the Standard Template.
Push Notification - Joomla PWA
* only in version miTT PWA PUSH (Joomla Plugin)
In the tab Push Notification the settings of the push messages are made. In the first setting "Choose category" you can specify the categories of Joomla posts from which the push messages should be sent.
In addition to the article, a title can be specified, which should appear in addition to the post. Furthermore, you can choose whether the category should also be displayed.
miTT PWA PUSH supports the sending of push messages via Joomla articles or FLEXIcotent. If you plan to send push messages via CCK K2, you can set the option to "Yes" and specify the category from which it should work.
The "Destination Url" determines which page should be opened when the user clicks on the push message. Here you can choose either the start URL of the PWA or the Joomla view or directly the article which was advertised with the push message.
The "New messaging Channel" determines the group that the subscribers are added to. This value should be set once and should not be changed again.
Firebase Google Analytics can be activated here, but cannot be deactivated by the user in order to comply with European data protection regulations. Therefore it should not be used on a production system. A solution for this is being sought.
* only in version mitt PWA PUSH (Joomla Plugin)
Push messages are sent using Google Firebase Cloud Messaging (FCM). The prices for this can be found in the Pricing of Firebase under Cloud Messaging. At the moment the service is free of charge (Stand June 2020). To start using the service you have to create a Firebase account.
In the Firebase Console you add a new Project and assign a project name. In the second step you are asked if you want to activate Google Analytics for the project. To use it DSGVO compliant the users should have the possibility to disable tracking. The plugin with PWA PUSH does not allow this yet.
After creating the project, add a Web App to the project. After assigning the name you will get an overview with the data, which you enter into the Joomla Plugin. Transfer the values between the quotation marks like apiKey, authDomain, databaseUrl, projectId, storageBucket, messagingSenderId, appId. The measuerementId is only necessary if Firebase Analytics (Google Analytics) is used.
Back to the project overview you will find the tab Application at the top. In the settings of the application you have to create the PublicVapidKey in the tab Cloud Messaging. Here you go to Generate key pair below to create it.
In addition to the PublicVapidKey, authentication via the Firebase Admin SDK is required. Here you switch to the tab Service Accounts and can generate a private key below. This key will be placed on the web server, a folder above the root directory. The name of the key (without path) is entered in the PWA plugin at the bottom.
Creation of buttons for push messagStandard (Installationshinweis)es
To enable the user to subscribe to push messages it is necessary to provide the buttons. They can be added either via the template or module.
<button class=" mittpwapush__subscribe">Abonnieren</button> <button class=" mittpwapush__unsubscribe">Abbestellen</button>
It is important that the class is used in the button "mittpwapush__subscribe" and "mittpwapush__unsubscribe". Whether a text or an icon is used is irrelevant.
Periodic Background Sync
Under the tab Sync you can set the background synchronization for HTML and images in the mobile web app (Joomla PWA). Here the content of the urls is synchronized in the background at the set intervals. The website visitor usually has to agree to this action. The configurable Sync Interval is a guideline value, because the browser does not perform a background update in case of different criteria like low battery or high CPU load. Furthermore miTT PWA does not allow any sync if there is no free space available on the mobile device.
The background synchronization of a PWA is very useful if the content is updated frequently and you want to provide a high offline experience with up-to-date data to the user. Even content that the website visitor has not yet accessed can be cached.
To allow the user to do this, simply copy the url from the address line of the post or image without the web page name into the Url Path input field provided. This feature is available to all newer chrome-based browsers like Chrome and Edge.
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.
Changelog miTT PWA for Joomla
In this tab the changes are documented to see which new features are available and which problems have been fixed. In order to benefit from the new features, it is necessary to save the plugin in addition to updating it.