Every business owner today strives to be better represented in the digital world, providing an interesting and convenient product for both desktop users, and mobile audience. As an option, many people choose to create a mobile application. but, task of high-profile companies with web development – offer alternatives to any ideas. One of these interesting alternatives – progressive web app (WEIGHT). Learn more about PWA later in the article., what do they represent, what are the benefits and how is it possible to integrate PWA with a Drupal site.
What is a progressive web app (WEIGHT)?
A progressive web application is a web application, loaded like a regular site, but at the same time creates modern digital opportunities like those, what is offered in native applications. It could be push notifications., work offline access to the hardware of the device and so on. PWAs combine the capabilities of modern browsers and mobile devices. These technologies can be used for company website development, as well as for information projects.
Why PWA? A few words about the benefits of PWA
Integrating PWA with Drupal site, you enrich the site with cool technologies, inherent applications. This can significantly improve the position of your business.. Let's now talk in greater detail about some of the benefits of PWAs.:
- The cost of creating a PWA is much lower, than the cost of creating a native application.
- A progressive web app is also built faster, than a native app.
- PWA can work for all users regardless of browser thanks to a progressive enhancement approach (progressive enhancement).
- The user can easily add progressive web apps to the home screen without having to go to the app store.
- Such applications are responsive and provide a comfortable experience on desktop devices., tablets and smartphones.
- Additional features like push notifications are great at getting attention, increasing attraction to your site.
- PWA applications are able to work offline or with very slow internet thanks to the Service Worker, which improves the user experience and expands your audience.
- PWAs work securely by using HTTPS, what prevents data manipulation.
What's inside? Component PWA
Each Progressive Web App contains 3 key components:
- Application shell (app shell) saves core JavaScript files, CSS и HTML, needed to quickly load your application's interface from the cache.
- Service-Worker (service workers) – these are JavaScript files, which provide loading resources from the cache for offline users, and can also be configured for push notifications and so on.
- Web Application Manifest (web manifest) – this is manifest.json file, containing the application configuration (title, colors, logos, etc.) and allows users to add it to their home screen.
How to add PWA to Drupal
As known, Drupal has a module for every purpose. Progressive Web App Integration – not an exception. Such integration can be done using the Drupal Progressive Web App module..
Drupal Progressive Web App module
The Progressive Web App module adds PWA functionality to a Drupal site without complications. It provides standard settings, and JS developers can add a Service Worker to further customize PWA behavior.
Here are some options of this module for integrating Drupal and PWA:
- The module contains a Service Worker for caching and offline work. When it's active, it helps pages load faster. The Service Worker is responsible for promptly serving files from the cache. Among the additional "secrets" – using fallback images for non-cached images.
- This Drupal creates a flexible manifest.json file with the necessary metadata. It allows the prompt to appear “add to home screen” in browsers, who support it.
- Site users can configure and edit the manifest through the web interface on the Drupal site.
- Other modules on the Drupal site are able to make their own modifications to the manifest.
The module settings page is available at admin / config / pwa / settings, where you need to fill in the necessary data in the manifest or change the default data (Application Name, description, default language, start URL, theme and background colors, and much more). The page also contains the service worker settings for your PWA, out of the box responsible for caching.
System requirements for working with the Progressive Web App module
To use this module for PWA integration, the following requirements must be met:
- The PHP version on the server must be 7.2 above. The creators of the module plan to further increase the minimum requirements for PHP according to new releases of the programming language.
- Your server must support secure communication over HTTPS. This is a recommendation from the World Wide Web Consortium.
_
