Progressive Web Application (PWA)

Exploring the power of progressive web apps for mobile devices

A demo PWA (mobile app)

The aim of the project was to create a functional, feature-rich product that would demonstrate the capabilities of a progressive web app (PWA). It was meant to serve as an example of what can be achieved with a PWA mobile app. Additionally, we planned to use it as a “playground” where developers can experiment, validate their hypotheses, and test out ideas for new features.

Introduction
About the project

Even though it was an internal project, we decided to run it like any other project – with clearly defined requirements and a proper product roadmap,  working in sprints, and following the principles of Scrum. The team involved in the project consisted of a Product Owner, a Product Owner Proxy, a Scrum Master, a designer, front-end developers, and a QA engineer.

In its assumptions, the app was supposed to serve as a demonstration tool. Its main purpose was to showcase various features that are possible to implement in a progressive web app. That’s why we wanted it to address the concerns of product owners who are choosing between a PWA and a native mobile app and demonstrate the possibilities and limitations of progressive web applications. Eventually, it also turned out to be a useful platform for exploring the PWA’s capabilities.

Our tasks

Research & development

The R&D phase was a time for exploring and experimenting with different ideas and approaches to solve different problems related to PWA.

Design

To serve its purpose, the app needed to be user-friendly and eye-catchy and look exactly like a native app.

PWA development

From geolocation, through a QR scanner and video calls module, to augmented reality – every feature needed to be fully functional.

App Store release

As one of the common concerns related to PWA is that it can’t be put in the popular app markets, we decided to… put the app in the App Store and the Play Store.

01

Challenges

1. Lack of consistent information about the capabilities of PWA

It is quite a common challenge to determine if a progressive web application (PWA) is the right solution for a particular set of requirements. Even though there are plenty of articles about this topic available on numerous blogs, they often present inconsistent, contradictory information, making it difficult for product owners to make an informed decision.

2. Making wrong assumptions usually costs months of work

One of the challenges of building a mobile app is choosing the right product tech stack. With many options available, it can be difficult to make an informed decision that aligns with one’s business objectives and enables to implement all the features included in the product roadmap. The wrong choice can result in months of works and reworks and delay the launch of the product launch.

Many companies already heard about the possibilities offered by PWA, but they are reluctant to build one. A native mobile app - despite all its drawbacks - is still perceived as a “safe” solution. It’s great to have a real example of how PWA addresses the needs of a modern mobile app.
Darek Kocięcki Neoteric

Darek Kociecki, Chief Growth Officer, Neoteric

02

Solutions

1. Product backlog based on the most common client concerns and request

It is a good practice to start building a digital product by running user interviews. This project was no different. We already had a lot of insights gathered by our business development team and common client concerns listed. What we needed to do was to turn them into a product backlog.

For the 1st product release, we created 9 feature demos: Geolocation, Scheduler, Theme, Video Chat, Map, Video Upload, Photo upload, QR Scanner, and Device orientation, as well as About and Install tabs, which explained the technicalities of PWA technology. Later on, we also added an Augmented Reality (AR) feature.

2. Conducting comprehensive research

At this stage of the project, there were still many unknowns. And, remember, the app was meant to serve as an example showing the capabilities of PWA in mobile app development. That’s why before jumping into the development, we needed to conduct research on the following topics:

  • CI/CD for PWA,
  • which React stack will suit PWA best,
  • Cordova v Capacitator v Bubblewrap,
  • Testing apps with Browserstack,
  • Videochat for React,
  • API for charts demo.
3. Intuitive, scalable, and accessible design compatible with the WCAG 2.0 standard

Our designers worked on the mockups and wireframes. It was important to give the app a look & feel of a native app regardless of how a user interacts with it, whether it’s on a desktop or a mobile device. Additionally, the app needed to be scalable – its layout should be able to fit additional features and multiple language versions. Last but not least, we wanted this app to be compatible with Web Content Accessibility Guidelines (WCAG) 2.0, level AA, meaning that it should be usable and understandable for the majority of people with or without disabilities. Following the principles and guidelines, we made sure that:

  • Information and user interface components were presentable to users in ways they could perceive.
  • User interface components and navigation were operable.
  • Information and the operation of a user interface was understandable.
  • Content was robust enough to be interpreted reliably by a wide variety of user agents, including assistive technologies.
4. Using Capacitor to create a multiplatform app with a single code base

After conducting the research, we decided to use Capacitor as a native runtime. Capacitor is an open-source environment that lets you run web apps natively on iOS, Android, and as progressive web apps with a single codebase. As it is based on plugins, it allows developers to connect the app with native APIs of different devices in a fast and easy way.

Technology we used
React
Capacitor
Figma
03

Project Results

The app was successfully uploaded to the App Store and the Play Store

The app is available in the most popular app stores, both on Android and on iOS. It can also be accessed in a web browser. Users can easily compare how the app looks and how the desired features work on different platforms.

Reducing the time required to create a PoC

Whenever there is a need to build a proof of concept (PoC) and check if it is possible to include a certain feature in a progressive web application, we have an environment set up. Adding a new feature is easy and takes significantly less time than building it from scratch.

Verifying that PWA is a great alternative to native mobile apps

Our team has managed to create a functional, feature-rich product that demonstrates the capabilities of a progressive web app (PWA) and serves as a great example of what can be achieved with a PWA. From the users’ perspective, it feels just like a native mobile app, yet – it’s cheaper and faster to develop.

Try it yourself

Discover our
other projects

Migrating the biggest online yoga studio in Europe from Teachable to a custom platform
Read the story of migrating an online yoga studio from Teachable to a custom platform that resulted in 10x times churn reduction....
Adapting the youth profiling app for mobile devices and modifying existing interface
How to make a product accessible to a broader audience? Have a look at mobile devices project of the WorldBank....
Mobile application saving buyers and sellers up to 6% of the real estate value
By eliminating 3rd party agents from the process, users of the app save the cost of fees that can typically get to about 6% of the real estate value....
clutch logoTop Artificial Intelligence Companies 2023
clutch logoTop AI Companies 2023
clutch logoTop Web Developers 2023
clutch logoTop Web Developers 2023