15 tips Optimization of a PWA

How to improve your PWA, increase the user experience and give your visitors a native app feeling

1. Create a manifest

In addition to the Service Worker, the manifest is the heart of a PWA. Here the browser recognizes whether it is an installable PWA. The manifest is a JSON file, where icons, Theme Colour, Start Url and Splash Screen are defined. In the Chrome Browser Console you can check if you have implemented a valid manifest file. For the creation of a basic framework there are generators like the Web App Manifest Generator on the Internet.

2. Extending the manifest with shortcuts

From native apps we already know the shortcuts, here you tap the app icon for a longer time and get an additional selection menu to call up predefined actions. This function is now also available for Progressive Web Apps. When tapping the icon on the home screen for a long time, various shortcuts defined via the manifest are displayed. This allows the user to quickly call the desired function of the PWA.

3. Provide own Install Buttons

If a valid manifest and a service worker are provided, a pop-up will appear when the Web page or PWA is accessed several times, indicating that the Web App can be installed. The browser determines when this pop-up appears, which means that you have little influence on when this message is displayed. This pop-up function with the suggestion to install the PWA is not yet supported in iOS 13.

If you want to control the installation instruction of the PWA consciously, you suppress it in the Service Worker in the event "beforeinstallprompt". Then it is possible to implement a separate Install Button for Android and iOS.

Another option for iOS is to call the "Add to Homescreen" via the standalone function and include this note.

4. Defining the App Strategy

The app strategy defines how you want to address your users with the different types of end devices. This includes performance, data storage and which Internet connection is provided. It may be possible to deliver the standard for a low performance end device and present all possibilities for a more powerful device.

With Performance Observer the performance of the used devices can be queried and aligned or controlled.

In addition to the performance of the end device, the battery status could also be checked, whether a background sync is started or an update of the app is carried out.

The cache strategy is also part of App Strategy and is covered in the next tip for PWA.

5. Defining the cache strategy

The cache strategy defines when content is loaded from the server and at what time data is loaded from the cache (Network First or Offline First). The strategy can be made dependent on the available Internet connection, i.e. speed or available network. An additional point is the possibly activated data saving mode of the smartphone. This allows the user's priorities to be taken into account.

if (navigator.connection.downlinkMax > 50) { // schnelle Verbindung
   
 }

6. Queries for available permanent storage (Persist Storage)

To guarantee that the offline page is always accessible and does not end in a white page with an error message, you should ask for persistent storage. The available memory should always be used sparingly in order to conserve the resources of the smartphone.

if (navigator.storage && navigator.storage.persist)
  navigator.storage.persist().then(function(persistent) {
if (persistent)
   console.log("Speicher wird nicht gelöscht");
   else
   console.log("Speicher könnte unter Umständen gelöscht werden");
});

Unnecessary files or images could be deleted from the cache using the message event to free memory from the user's smartphone.

7. Implementing the Web Share API and Web Share Target V2 API

With the Web Share API, it is possible to give the user of the PWA or website "easy sharing" or "sharing". The user gets the usual share menu of the operating system.

With the Web Share Target API, the PWA is displayed in the Native menu of the operating system. As an example, images from the Photo App could be opened in the PWA to perform these further steps. The Progressive Web App (PWA) from Twitter has already implemented this feature.

8. Integration of the Payment API

Payment on the Internet can be complicated, as the credit card information is entered first. With the Payment API the user is given a clearer simplification in the input. Google Pay and Apple Pay can significantly support the user during the input process, as the card data already stored is used.

9. Adding basic authentication

Time-consuming registration, password generation and storage is connected with time expenditure. If the smartphone user does not have a password manager installed, remembering every password is a challenge. With the use of authentication techniques such as OAuth it is possible to log in securely with an existing Google, Facebook or iCloud account.

10. Controlling the App Lifecycle

Every app has a lifecycle that can be influenced in the individual phases. The app goes into the background, is terminated, is called again. Here you can influence the individual states with the events "visibilitychange", "freeze" and "resume".

11. Setting an update interval

An update of a PWA is initialized with every change of the Service Worker, if the web page is called. If an update is desired in the background, an update interval of the Service Worker can be set to perform an update in a certain time interval.

navigator.serviceWorker.register("serviceworker.js")
       .then( (registration) => {
 setInterval( () => registration.update(), 86400 )
});

12. Using the Message Event

The Message Event can be used to communicate between the Service Worker and the user, for example to inform about an update. In reverse communication, the message event could be used to delete superfluous files in the cache.

13. Publish the app to the App Store or Google Play Store

When you think of an app, you immediately associate it with the Google Play Store or App Store. Therefore, from a marketing point of view, it can be very useful to publish an app in the store. It is important to note that the guidelines of the store providers are fulfilled. It should also be noted that updates in the App Store are published separately. In the Google Play Store it is sufficient to exchange files on the server of the web application, because Android recognizes the app via a certified Url, which is already defined in the package.

Help for the creation regarding Store are PWA Builder (Microsoft), Apple Configurator 2 and WebAPK (Android).

A note on this, should an Android user install a PWA from the web, it is later not recognizable whether it is a PWA from the web or a native app from the Google Play Store.

14. Creating a Progressive Web App as a desktop application

We usually associate the term PWA with an app on a smartphone or mobile device. Google Chrome brings Progressive Web App as installable applications to the desktop surface, even across platforms. If installed, they can be called as independent programs on Windows, MacOSX and Linux.

15. Adding an emergency function

If unexpectedly something does not work and the Service Worker cannot be updated, it is helpful to be able to uninstall the Service Worker. Otherwise the "broken" Service Worker would always run as a kind of Ghost Worker. Therefore you should be equipped with the possibility to remove the Service Worker.

Extension for the CMS System Joomla

The tips mentioned above are successfully used in my plugin for Joomla, so that the website can be seen as a installable Joomla App .

Extensions for the CMS systems WordPress and Joomla

The mentioned tips are successfully used in my plugin for Wordpress and Joomla, so that the website can be installed as a Joomla App or Wordpress App.

Progressive Web App - PWA
Development from Stuttgart

As a professional web developer from the Stuttgart area I advise you on how to implement the various possibilities of a progressive web app, which is completely geared to your goals and wishes.

15 tips for optimizing a Progressive Web App (PWA),
that provide a native app feel