Auto-translation used

Mobile application development on PWA

A little bit about us

We are a Troubleshooting Technology company, which has been engaged in the design and development of IT solutions for business, education and government agencies for more than 6 years. During this time, we have implemented dozens of projects, from mobile applications and web services to integration platforms and analytics and automation systems.

What are we going to talk about

In the continuation of the last post, let's look at what approaches there are when developing a mobile application.

How does application development begin?

If you decide to create a mobile application, it is important to understand the amount of work that needs to be done. Before starting programming, preparation, analysis, design, and only then implementation are carried out.:

  • Requirements formation: what does the app do, what functions are needed, and who will use it.
  • Creating user scripts (user flow): how the user will move through the interface.
  • UI/UX design: rendering of the interface, buttons, screens, interaction logic.
  • Architecture and backend: the server side, if you need to store data, process requests, and work with the database.

 These jobs do not depend on the chosen technology, they will be in any case. And then there are already:

  • Development of the frontend (mobile part): The technology is already being selected here (more on them later).
  • Testing and publishing: verification, debugging, and posting on the App Store and Google Play.
  • Support and updates: bug fixes, feedback updates, new features.

These jobs do not depend on the chosen technology. They will be available anyway, they just may differ in time and cost.

What approaches are used in the development of mobile applications?

When it comes to mobile apps, there are three main approaches:

  • PWA is a progressive web application that works through a browser, but "as an application"
  • Cross-platform - One app for iOS and Android based on common code (Flutter, React Native, etc.)
  • Native development - separate development for iOS and Android in native languages (Swift, Kotlin)

In this post, we will analyze the approach with PWA in detail.

PWA

From a technical point of view, this is a website that can work as an application. It can be published on the Play Market and App Store platforms, installed from there, has its own icon on the desktop, has offline access, visually looks like an application, not a page in a browser.

Examples of this approach from large companies: Twitter Lite, Starbucks PWA, Uber Web.

Until 2019, the installation process of such an "application" was difficult for the user, since it could only be installed on the first visit to the site through a browser. After the first visit, the user could install it on his device by clicking "Add to home screen" (this is actively offered in Android, slightly less noticeable in iOS).

After installation, PWA behaves like a real application: it starts by clicking on the icon, runs in a separate window, and can work without the Internet.

You no longer need to open a browser to use the functionality, the user does not feel much difference. But technically, the browser engine is still used inside.

In 2019, Google is introducing Trusted Web Activity (TWA), a way to publish PWAs on Google Play. 2021-2022 Capacitor.js and PWABuilder are beginning to be actively used as a PWA packaging tool for Android/iOS. 2023-2024 Apple partially removes restrictions for PWA on iOS 16.4+: push notifications allow, offline is improved, desktop installation.

Usually, the implementation via PWA is chosen:

  • To launch an MVP, to test the idea, because it is cheaper to develop and the website also turns out to be a plus.
  • Suitable for a limited budget.
  • There is no need to access complex smartphone functions.
  • There is already a website that can be adapted and "packaged" into a mobile application.

What is available from the permissions:

  • Push notifications work stably on Android (and partially on iOS starting in 2023).
  • Face ID, Touch ID, and PIN are available via WebAuthn.
  • Camera, microphone, geolocation, gyroscope, accelerometer.
  • Working with files, copying, drag-and-drop — within the framework of the File System Access API.
  • Working with BLE, WebUSB, Web Serial — works on Android (not on iOS).
  • Offline access and caching are provided through service workers.

Of the advantages, we definitely single out one codebase - the web.

However, PWA is not suitable if:

  • The application must run in the background (for example, when the screen is closed or the application is minimized).
  • You need access to BLE and NFC on iOS. It works on Android, but not on iOS. Apple still blocks Web Bluetooth
  • Heavy graphics, 3D animations, AR, rendering and all tasks where performance is important are used.
  • We need deeper access to the device (contacts, SMS, calls, notifications, access to applications and statistics, system events)

Otherwise, there are no technical limitations to this approach. You can raise an online store, a super app, and a corporate system. Here you already need to build on the necessary functionality, technical limitations, rules and requirements of the platforms.

Is there a difference between the cross-platform and native approach

Of course, speaking in the language of users, the sensations are not the same.

1. The user experience is perceived worse

Developers and Reddit users note that even after testing the PWA, they feel it slower, less responsive, and less "native" — especially in terms of scrolling, transitions, and screen stability (for example, returning to the feed position) (you can read it here)  

This affects the perception of the application and leads to more frequent failures — even if everything is OK in terms of functionality.

2. Performance tests show that native or cross-platform applications show better performance results than PWAs, because they interact better and more efficiently with device resources.

And what about the cost

In development, this option will be cheaper, because you will not have to involve developers of the mobile application. Otherwise, it strongly depends on the design and functionality. According to the average price tags, the cost of developing a PWA is 2-3 times cheaper than developing a native application.

In terms of development time, PWA comes out faster than cross-platform solutions, and much faster than native ones, due to a single code base, which simplifies further support.

Result

If the goal is faster, cheaper, there are no special requirements for the interface part and the functionality allows, then PWA is the right choice. And there you can always switch to cross-platform or native as needed.

Comments 1

Login to leave a comment

Хороший подход

Reply