What are Progressive Web Apps (PWA)?
One Technology To Serve Them All
How does a company or start-up decide on what to put in the limited budget? In this article, I share my opinion on why web apps have become a suitable solution.
Start-ups and small companies usually face the same challenges: Creating a digital solution to solve a problem in the market with limited resources. However, when accomplishing the business plan, the entrepreneurs face the operative challenge of developing a digital product.
But how does one sensibly begin planning for such a product? Buzzwords like Cloud-Native, Serverless, App Stores, Microservices, and DevOps seem to overwhelm smaller companies quickly; how do I put those Buzzwords into context, and what do I need to develop and ship an app as an SME?
👉 What is the actual product? As long as a user uses it someday, the virtual product is an app or, technically, a frontend. Nothing else should be the focus at the beginning of the development of a product by a small company or a Start-Up. Here is why:
The Web App is what the customer will hold in their hands.
“to create a purely digital product, we need a frontend, which can be an iOS or Android app, but it can also be a modern website or both at the same time in the form of a Progressive-Web-App”
It is as simple as a hundred years ago; the right product convinces the client or investor to see and feel it accordingly. A product can be an app or a website, which the customer can use as a “physical” part of a virtual world. But, conversely, it is of secondary importance whether the product is hosted in the cloud or in which architecture the developer built the backend, at least for the first few steps.
So, to create a purely digital product, we need a frontend, which can be an iOS or Android app, but it can also be a modern website or both at the same time in the form of a Progressive-Web-App (PWA).
👉 I advise you to consider the last method mentioned because it will help a small-to-medium-sized company or start-up get the most out of its budget and save time.
Why a PWA is an essential key technology for start-ups and SMEs
A company needs to create a product that can solve the market problem, is attractive, and has the chance to meet acceptance.
👉 But the product must also be discoverable and accessible.
For example, a native app is only available in the app stores and is under constant competition with other participants, and it will eventually get lost in the crowd. Not to mention the slow update cycles when you must pass the audits.
Conversely, a classic website often does not meet the modern demand for permanently being present for the consumer. Moreover, developing both in parallel can quickly become very expensive or impossible.
Best-Of-Breed: This is where the Progressive Web App shines!
Here, the PWA stands out from the best of both worlds and thus occupies the “best-of-breed” position. For example, for several years, push notifications, offline capability, and the ability to install on mobile devices have been standard features on modern browsers.
Here are some examples of modern capabilities that major browsers, including Safari, support:
Web Push (Push notifications)1 allows apps to send timely and relevant notifications to users even when the browser is not open.
Offline-First & Installation2: This feature enables apps to work offline or on low-quality networks and allows users to install the web app on their devices for easy access.
Screen Wake Lock3: Prevents devices from dimming or locking the screen when the app needs to stay visible.
Screen Orientation4: Allows the app to control the orientation of the device screen to enhance user experience for specific tasks.
Geolocation API5: Enables PWAs to obtain geographical location information, which is essential for location-based services.
Web Share API6 allows users to share text, links, files, and other content directly from the web app to other apps installed on the device.
IndexedDB & Cache API7: For robust client-side storage solutions, allowing data to be stored and retrieved efficiently.
WebRTC8: Enables real-time communication capabilities, such as video and audio conferencing, directly in the browser without plugins.
Web Workers9 allows JavaScript to run in the background, independent of user interface scripts, improving app performance and user experience. This little bit of technology can make huge differences!
🍪 In the coming week, we will discuss modern web technologies, and I will show some of them on Stream: PWA-Live-Event. Come join us!
Start-ups and companies have to budget and deliver
A young company usually has little time and space for experimentation. Decisions must be seated and made. They must pursue a goal-focused objective and not waste valuable resources developing different variants of their not-yet-existing product. There is often only enough for a Minimum Viable Product, which should work out straight if possible. Large investment-driven companies may throw many MVPs on the market and try until one works, but a small or start-up company does not have this luxury. There’s only one shot, and one should make this one count.
I highly recommend that Start-Ups stay with only one cross-platform project and combine the app world with the world of the web. Do not stress your limited resources too much when you are not in a specific need. There’s a great you don’t need to do this anymore.
Future-proof technology and a first-class citizen in modern web architectures
A PWA is a standalone and decoupled frontend; it exists independently and installs itself on the device by the first visit. Regarding the backend, it’s crucial to understand that modern web solutions are compositions of services like Microservices or SaaS cloud solutions. Therefore, composing headless services requires standalone frontends like PWAs communicating with the APIs.
I don’t want to get too much into technical details about the backend architecture in this article. But I want to point out that a PWA isn’t bound to any specific type of backend or SaaS; thus, the application can exist with any technical foundation the company will use in the future.
The example user experience of a cross-platform Web App in production in a B2B area
In early 2020, we started working on a business app for a German company in the property market. Before we released it, the agents created reports using pen and paper, which was time-consuming and inefficient.
The Web App was announced as a mobile app, available via a link. However, the users were skeptical and treated this website as if it would be only “app-like” initially. But after a short while, it transitioned into absolute positive feedback. And here is why:
The users could use the app in the field completely reliably with their mobile phones or tablet devices without a steady internet connection. The results were automatically synchronized with the same app on the desktop PC or Mac when agents finished their tasks at the property. When the agents were planning their day or week, they used the Web App on the desktop PC to get the best overview, and in the field, everything was in place already.
👉 The value here is that we only created ONE application for all major platforms. That approach provided the same user experience without maintaining many codebases as a developer or forcing the users to handle several apps to get their tasks planned, organized, and executed.
Conclusion: Why I recommend taking a serious look into Progressive-Web-Apps
A PWA is a great mix for most businesses in terms of features, discoverability, and budget. In my experience, the effective costs are often below 50% of the costs for developing native apps for each platform, not to mention the web version, which is usually required.
Instead of talking about 2–3 sub-products, a PWA can cover all requirements at the same time, unified in one platform and codebase.
Of course, native apps might outperform PWAs nowadays regarding pure performance and edge features, but this advantage decreases monthly. This disadvantage won’t exist forever because modern native web technologies evolve faster than ever.
🍪 Ask yourself if the requirements really necessitate native app development. The overhead is huge and leads to severe business problems. Most, if not all, requirements are already covered by 2024 web standards!
🍪 App-Stores: You can push your PWA to app stores as well. This is possible for some years. Here, you have good capabilities with tools like Capacitor10 to bridge edge functions of the devices to JavaScript and the Web-View (Browser).
In addition, the Fugu-Tracker is a community project that monitors the progress of current web technologies, which are the basis for PWAs.
Have a great Sunday!
Adrian,
stackableCTO, Mentor, and CTO webbar.dev
https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API
https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API?retiredLocale=de
https://developer.mozilla.org/en-US/docs/Web/API/Screen_Wake_Lock_API
https://developer.mozilla.org/en-US/docs/Web/API/Screen_Orientation_API
https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API
https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API
https://adrianstanek.dev/post/persisting-data-in-modern-web-apps
https://de.wikipedia.org/wiki/WebRTC
https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers
https://capacitorjs.com/