Progressive web applications and implementation in Drupal 9

The need for convenience generated many innovative ways to access the Internet. Native mobile applications and web applications are two such technologies that have made browsing the Internet easy and convenient. In this article, we will talk about progressive web applications and how you can implement them with Drupal using the Drupal progressive web applications module. But before delving into all that, let's look at the features of native and web applications and how progressive web applications fill the gaps.

Características de las aplicaciones móviles nativas

• They are specific applications of the platform. This also means that they must be rebuilt for each new platform (iOS, Android).
• They need to be downloaded.
• Generally super fast.
• Rich in features and functionalities.
• They can seamlessly integrate into any device and feel like part of it.
• They can work offline.
• Pueden acceder fácilmente a los datos del dispositivo, al hardware del dispositivo y al sistema de archivos local.
• More expensive to develop, maintain, and update.
• They are pre-approved for security reasons and can be downloaded from app stores.
• Difíciles de rastrear para los motores de búsqueda.

Characteristics of web applications

• They do not depend on the platform. All they need is a browser to access them. They are compatible with most modern browsers. It is not necessary to download them.
• There is no specific SDK to develop them. The frontend is developed using HTML, CSS, JavaScript, and a LAMP or MEAN stack for the backend.
• No need to update them. Lower development and maintenance costs.
• Aunque necesitan autenticación, la seguridad es un problema porque pueden ser vulnerables al acceso no autorizado.
• They do not work offline and can be slower than native mobile applications.
• They do not appear in app stores, so discovering them can be more difficult.

What are Progressive Web Applications and How Do They Fill the Gap?

In summary, native web applications are highly capable but lack reach. While web applications have a broader reach but lack capabilities. And that's where progressive web applications come into play to bridge the gaps.

Progressive Web Apps is an ideal combination of the benefits of native applications and web applications. Using modern web capabilities, Progressive Web Apps (PWA) can offer app-like experiences to users. It combines the features offered by most modern browsers with the benefits of mobile experiences. Extremely complex and installable app-like applications can be created. Now that Web Assembly is supported by most browsers, PWAs can be created in the languages of the developer's choice, greatly increasing the reach and flexibility of the functionalities they can offer.

Características de las aplicaciones web progresivas

They are platform and device independent. They work wonderfully in any browser.

• They load quickly and are extremely reliable (even with a low Internet speed). Scrolling is very smooth and fluid.
• They can also work offline.
• Native push notifications similar to applications can be enabled.
• They can access the hardware and data of the device like native applications.
• Shortcuts can be added to the user's home screen (instead of downloading them)
• No complex installations needed. They can easily share the URLs.
• Responsive on all devices.
• They are easier and faster to develop. Maintenance is also simple.

Before talking about the PWA module in Drupal, let's look at the minimum requirements to create a PWA:

• Must be run over HTTPS.
• Must include a Service Worker: the Service Worker is a script (javascript) that runs over https in the browser and provides access to the browser. It provides native app-like functions such as offline content delivery, push notifications, etc.
• It must have a web application manifest, which is a JSON file containing metadata with information about the web application, such as the name, description, author, and more. This is also useful for search engine optimization.

The PWA Drupal module: how to create progressive web applications with Drupal 9 (and 8)

The Drupal PWA module is easy to install and comes with Service Worker (for caching and other offline app-like capabilities) and Manifest.js that we can configure. However, we must ensure that we have SSL installed before starting the PWA installation process. If our requirement is extremely specific with tons of customizations, we can develop the PWA using front-end frameworks like Angular or React and customize our own Service Worker.