How to Quickly Transform Your Drupal Site to a Mobile App
Creating mobile experiences indistinguishable from native mobile apps with web technologies is a reality. The process of developing a mobile app is easier than ever. And if your site lives on Drupal, you can quickly transform it into a mobile app with minimal development. We recently managed this process for two websites, both are now available on the App Store and Google Play. In this post, we shared some key takeaways from the experience.
Modern websites and web apps can be enhanced with features traditionally available only in native mobile applications. They are called PWAs (Progressive Web Apps) and can reduce the investment and maintenance needed by a magnitude because they use the same codebase for all platforms.
We started to work with the PWA technology in 2019 and closely followed its evolution, melting down its limitations over the years. Please just take a quick look at what PWA can do today before making a decision about jumping into native mobile application development. It’s worth mentioning that the advanced caching and offline capabilities provided by the PWA technology can benefit any website even if there is no intention to turn them to mobile apps.
In this post, we will show two use cases of successful PWA implementations.
News portal apps for diginomica
We break through the tech media noise with real world context - and help enterprise leaders bring transformation closer to reality.
We’ve been working with the diginomica team on their unique IT news portal successfully since 2018. They’ve always been open to innovation such as text-to-speech integration, and accessibility improvements (keyboard navigation, dyslexia mode, and more). Recently, they started to build a multiplatform presence to better serve their audience. Diginomica has become available on Alexa and there is more to come. PWA features had been added to diginomica.com earlier on to boost performance and offer offline features, such as the Your story library.
Building and publishing mobile apps was the next step and was surprisingly easy to take especially to Google Play. We used PWAbuilder.com without any hassle. We had to adjust the site itself a little bit to comply with Google Play news site requirements, but then with PWAbuilder.com we managed to build the app binary like a breeze. The last step was to fill in the metadata on Google Play and publish the app.
We knew that publishing to the App Store will be more difficult. First of all, PWAbuilder.com is not enough for Apple. A Mac with XCode is required to build and sign the app binary. In our use case, we also hit the Cookie Consent issue. Apple has its own and it is required to be used. It’s called App Tracking Transparency (ATT) and we used it together with Google’s Firebase to control the user consent for Google Analytics. We also had to make it play well with our Cookie Consent solution. Apple’s approval and publishing process is known to be more time-consuming and we can just confirm that, but after a couple of rounds we pushed it through successfully.
Download at
Life-saving information for people fighting off epidemics on the field with limited or no internet
The Epidemic Control Toolkit provides guidance on evidence-based methods to prevent and control the spread of epidemics.
Volunteers and professionals of the largest humanitarian organization in the world are using this website and the apps built from it to access potentially life-saving information when they are working on the field fighting off epidemics in areas with limited or no internet access. To support this use case we had to implement a custom feature to prefetch (download) all the information.
As the content is coming from a Drupal CMS and can be updated at any time, it was important to keep it up to date as well. For this purpose a PWA approach is excellent. The initial footprint of the website and the apps built around it is very small, but when the user clicks the Offline mode button it offers to download the full site or the relevant half of the content in their language as the content is available in 5 languages (English, French, Spanish, Russian, and Arabic). This way the users can prepare and refresh all the content in their offline caches before their missions.
Once the features worked on the website building and publishing mobile apps was easy and straightforward with PWAbuilder.com and in this case, it didn’t require custom coding or configuration neither for iOS on top of using the standard XCode building process on a Mac.
Download at
Challenges / Limitations
PWA-based mobile apps are running in a hidden browser, therefore native apps can outperform them and can provide deeper hardware integration.
While most features are working in modern browsers, the strongest support is present in Chrome and other Chromium-based browsers such as Edge. We propose to check the compatibility of the required features for example on https://caniuse.com/. Android is the most supported target platform and you can also install launcher icons on Windows because in general Google and Microsoft are strong supporters, while Apple is silently following the trend. For example, web push notifications were made available only in iOS 16.4 and there is still a 50MB storage limit on iOS for PWAs. Overall it’s now harder to list what a PWA can not do as opposed to a native mobile app than vice versa.
Takeaways
If you consider building a website or web app or already have one and plan to expand reach via other channels such as the App Store and Google Play, then PWA (with the PWA module for Drupal and PWAbuilder.com) in most cases is a no-brainer choice for faster time to market, reduced investment, and maintenance costs.
