Progressive Web Apps: You don't always need native

Too many developers opt immediately to build native apps, even if their app is a simple To Do list or news outlet.

React Native has become one of the most popular mobile frameworks in existence. Personally, my journey into React as a whole began with React Native. At the time, I was building an Android-native mobile app in Kotlin & Android Studio for a client. I had a lot of autonomy and convinced the client migrating the app to React Native would be beneficial for a solo developer such as myself, as well as open up the project to a larger audience of potential collaborators; after all, JavaScript may be the most popular programming language of our time.

Fast forward a few years and, with added experience, I've come to regret that I didn't simply build the app as a Progressive Web App. The app uses no particular native features, and the most common ones like camera or microphone access, push notifications and background tasks (service workers) are exposed through the browser as well. Even our plans for AI could've been solved with a web app using TensorFlow, ONNX, or a custom cloud service.

And the icing on the cake? A PWA is truly cross-platform. Wherever you have a compatible browser, your PWA can run. Of course, a PWA is not the same as a native app. There are two sides to every coin.

Keep It Simple, Stupid

At some point in their tech career, everybody comes across the concept of KISS - Keep It Simple, Stupid. Naturally, this concept applies to mobile apps as well. Especially if your app needs to support both mobile as well as desktop/web. Why build and maintain the same app twice? Certainly, there are reasons, but rarely beyond optimization. Web technologies were built to be great at one thing: delivering beautiful UIs with ease. Why else would we want these technologies where we previously couldn't employ them? As opposed to prior solutions, leveraging Electron is a tradeoff between desktop-native functionality and UI simplicity, whilst React Native is the analog for mobile devices. From that perspective, PWAs are yet another layer of simplicity: even less access to native features in exchange for the same technologies you're already used to when building a regular web app.

Even if you don't intend to target desktop or web platforms, you might still consider building your mobile app as a PWA. With access to the entire tech stack of web apps, you also have access to a broader range of technologies. React Native is akin to vendor lock-in: you're stuck with React and constrained by its paradigms. However, the web comprises countless other technologies: Vue, Svelte, jQuery, CoffeeScript, proper CSS and dialects (e.g., SASS & Stylus), and Pug, just to name a few. PWAs grant you the freedom of choice. Sure, it's possible to use all of these tools with React Native as well, but not without varying degrees of effort.

Personally, as a solo developer with too many projects and too little time, PWAs enable a simpler and faster pipeline. There is no need for heavy development software like Android Studio, XCode, or any emulator/simulator. Accordingly, there is no need for stronger hardware with at least 200 Gigabytes of storage, 8 Gigabytes of RAM and 4 CPU cores just for your testing setup. All it takes is a lightweight code editor and a browser. Human resources are scarce and expensive. PWAs allow small teams to build complex products for several systems.

I have experimented with various solutions. Constructing user-facing interfaces has consistently been a challenging task. I found that the HTML/CSS/JavaScript combination is the most convenient, elegant, and adaptable option. After testing other technologies like Qt, WYSIWYG editors, Python's Kivy, Unreal Engine's UMG, and even custom OpenGL-based UI systems, I constantly found myself longing for the simplicity of HTML, CSS, and JavaScript.

Why not?

Of course, there are numerous reasons why building a native app might not be the best choice. Following are just a few reasons I've run into myself, resulting in a PWA as the not-so-simple choice.

A PWA is subject to the same security restrictions as a regular web app, such as the Same Origin Policy. For instance, when creating a mobile Web3 app, any request to Web3 gateways must either utilize Cross-Origin Resource Sharing (CORS) or be proxied through your domain and infrastructure. These restrictions do not apply when developing a native app. Instead of leveraging existing publicly accessible resources, you find yourself adding overhead to your infrastructure and incurring costs.

Although PWAs are inherently cross-platform, this feat is only realized through a strict dependency on compatible browsers. If your target platform has no such browser, naturally you cannot build a PWA. You are also limited to the features of said browser. Your PWA will only enjoy new emerging technologies after they've been adopted by at least one of your supported browsers on your supported platforms. It is thus nigh impossible to build a PWA for early adopters. For example, you cannot write a PWA that maps specialized functions to Samsung's S Pen or Apple's Pencil or accesses additional Bluetooth devices like Smart Watches or IoT devices.

JavaScript is designed as a single-threaded language. Thus, parallel processing becomes rather cumbersome. Node exposes Worker Threads, whereas modern browsers expose Web Workers. Nonetheless, these are not precise substitutes for threads and necessitate extra caution. In contrast, a native app can utilize multiple threads without any restrictions.

Ultimately, a PWA is essentially a standard browser window with a preloaded URL. As a result, you do not have complete control over the physical size and performance of your app. Your app's functionality will rely on the particular implementation details of the browser, making it susceptible to browser-specific exploits and bugs. While this is generally not an issue for most teams, larger teams might prefer to maintain full control.

Conclusion

In conclusion, Progressive Web Apps offer a simpler, more flexible approach to mobile app development compared to native apps. They provide cross-platform compatibility even beyond mobile and access to a wide range of web technologies hardly available to mobile pipelines. However, PWAs have their limitations, such as restricted access to native features and reliance on compatible browsers. Ultimately, as with everything, the choice between a PWA and a native app depends on your project's specific requirements and target audience. I merely hope to convey a trivial message: Keep It Simple, Stupid.

Did you find this article valuable?

Support kiru kodez by becoming a sponsor. Any amount is appreciated!