The internet was first built with a purpose of better communication for the military and scientists during the 1960s. Soon, the Web transformed into a revolutionary phenomenon around the 1990s and has been unstoppable ever since. Although the purpose for the web kept changing, one thing that remained constant was convenience.
The need for convenience and effectiveness brought about many innovative ways to access the internet. Native mobile apps and Web apps are two such technologies that have made internet browsing easy and convenient. In this article, we will be talking about Progressive Web Apps and how you can implement it with Drupal using the Drupal Progressive Web App module. But before we dive into all of that, let’s look at the features of native and web apps and how progressive web apps actually fill the gap between the two.
Features of Native Mobile Apps
- They are platform-specific apps. Which also means that they need to be rebuilt for every new platform (iOS, Android).
- Need to be downloaded.
- Usually super-fast.
- Rich in features and functionalities.
- Can blend seamlessly into any device and feel like a part of it.
- Can work offline.
- They can access device data, device hardware and local file system easily.
- More expensive to develop, maintain and upgrade.
- Are pre-approved for security and can be downloaded at App stores.
- Hard for search-engines to crawl.
Features of Web Apps
- Works independent of platform. All you need is a browser to access them. Supports most modern browsers. Does not need to be downloaded.
- No particular SDK for developing them. Frontend is developed using either HTML, CSS, JavaScript and a LAMP or a MEAN stack for backend.
- No need to upgrade. Lesser development and maintenance costs.
- Although it needs authentication, security is an issue because it can be vulnerable for unauthorized access.
- They don’t work offline and can be slower than native mobile apps.
- They aren’t listed on App stores so discovering them may be harder.
What are Progressive Web Apps and how do they fill the gap?
So, in short, native web apps are highly capable but lack in terms of its reach. Whereas web apps have a wider reach but lack in capabilities. And that is where Progressive Web Apps come in to bridge the gaps.
Progressive Web Apps is an ideal combination of the benefits of native apps and web apps. Using modern web capabilities, Progressive web apps (PWA) can deliver app-like experiences to users. It combines features offered by most modern browsers with the benefits of mobile experiences. You can build native-app-like, extremely complex and installable apps. With Web Assembly being supported by most browsers now, PWAs can be built in languages of the developer’s choice, thus widely increasing the scope and flexibility of the functionalities it can offer.
Features of Progressive Web Apps
- They are platform and device independent. Works beautifully on any browser.
- They load fast and are extremely reliable (even with a low internet speed). Scrolling is very smooth and fluid.
- Can work offline too.
- Native app-like push notifications can be enabled.
- Can access device hardware and data like native apps.
- Shortcuts can be added on the user’s home screen (instead of downloading them)
- No need for complex installations. Can share the URLs easily.
- Responsive across all devices.
- They are easier and faster to develop. Maintenance is easy as well.
Before talking about the PWA module in Drupal, let’s look at the minimum requirements to build a PWA -
- Should be run over HTTPS.
- Should include a Service Worker – Service worker is a script (javascript) that runs over https on the browser and provides browser access. It provides the native app-like features like offline content delivery, push notifications, etc.
- Should have a Web App Manifest – which is a JSON file containing metadata with information about the web app like the name, description, author and more. This is also useful for search engine optimization.
The PWA Drupal Module – How to make Progressive Web Apps with Drupal 9 (and 8)
The Drupal PWA module is easy to install comes with the Service Worker (for caching and other offline app-like capabilities) and Manifest.js that you can configure. You will however need to make sure you have SSL installed before you begin with the PWA installing process. If your requirement is extremely specific with tons of customizations, you can develop the PWA by using front end frameworks like Angular or React and customize your own Service worker.
Installing the PWA Drupal 9 Module
With Drupal 7, installing the Progressive Web App Drupal module was as easy as downloading and enabling the module. You could generate the manifest.js file via a config form and validate it. However, in Drupal 9, we cannot integrate this functionality directly just by enabling the PWA module. The reason being it does not provide you an option to configure the manfest.js file.
- Install the module by downloading and enabling the PWA Drupal module.
For Drupal 9, apply this patch
Once done, navigate to configuration -> PROGRESSIVE WEB APP -> PWA settings and add the required information.
Service Worker
URLs to cache - This is where you can specify the pages that you need to be made available even when offline. The URLs mentioned here will be cached -make sure you flush the cache whenever you make any updates here.
URLs to exclude – If you have pages that absolutely need to work only with the internet, mention them here.
Offline page – Display a personalized page to your users when they get offline and the page isn’t cached.
Manifest.json
The Drupal manifest.json file is what allows users to add the PWA to their home screen. It contains configurations that you can modify to change how your PWA will behave – like the name, display name, background color, orientation and more.
The file will be added to the head tag of your index page.
The below image shows the “Add to the home screen” option and an icon will be created on the home screen.
