Progressive webapplications (PWA)

 administrator    01 Feb 2022
 None    blog


What are they and why are they important?

PWA's become more and more important lately. That is understandable because they have a lot to offer. But what are they?

If you are a developer and writing applications in PHP or another scripting language, you probably will have dreamed that it would be nice if you could run your application just as an 'app' on your mobile device. Building native apps for Android and IOS is not that simple. Some tools allow you to use only one code-base, but you need a subscription to the app store and need to share a high fee on your sales.

PWAs allow you to install your browser-based applications as a traditional web app on a mobile device, including a nice icon on the mobile desktop.

So what are PWAs?

First of all, let's start with the definition that you can find on Wikipedia:

A progressive web application (PWA), commonly known as a progressive web app, is a type of application software delivered through the web, built using common web technologies including HTML, CSS, JavaScript, and WebAssembly. It is intended to work on any platform that uses a standards-compliant browser, including both desktop and mobile devices.

Since a progressive web app is a type of webpage or website known as a web application, they do not require separate bundling or distribution. Developers can just publish the web application online, ensure that it meets baseline "installability requirements," and users will be able to add the application to their home screen. Publishing the app to digital distribution systems like Apple App Store or Google Play is optional.[1]

As of 2021, PWA features are supported by Google Chrome, Apple Safari, Firefox for Android, and Microsoft Edge[2][3] but not by Firefox for desktop.[4]

Nice definition, but how does it work? Well. First of all, a PWA must be able to run without a live connection to the server. So everything required to run the application needs to be in the PWA cache of your mobile device. That is a problem for scripting environments, as in our case, PHP runs on the server, not on the mobile. The PWAs are based upon the web browser, so the supported environment is HTML(5), CSS, and JavaScript. If you are a JavaScript developer, then you can come far. But for database access, you still need a server connection. To solve that problem, the PWA requires a fallback. If there is no internet connection, then the PWA must be able to handle that. 

Creating PWAs in PHsPeed will be supported in Q2/Q3

In terms of PHsPeed, we implement a PWA solution that allows you to enable all your PHsPeed applications into a qualified PWA. Suppose you start the application from a PWA-aware device (Android, IOS, Windows), then a splash screen will appear with two options: one to start the application and one to install the application as an app. If the user decides to install it, the application will be installed on the mobile device with the predefined icon. From that moment on, the install option will not be available anymore. The user can now start the app from his home screen.

If the internet connection is gone, the PWA will detect this, and the splash screen will reappear with the error message that there is no internet connection. There is an option to restart the application, which will work as soon as the internet connection is restored.

As a small disclaimer, we are currently developing this option so that the real implementation might be a bit different. And of course, if you already know how PWAs work, you can already deploy the PHsPeed application as a PWA. Using the PHsPeed implementation makes the feature available to anyone using PHsPeed.