A discussion of Progressive Web Apps, compared with native apps
Modern web development has come a long way since the early days of basic HTML, CSS, and JavaScript sites. More recently, the focus has shifted away from being exclusively on web browsers to native mobile apps built for iOS and Android devices. Native apps bring a lot of functionality that traditional websites were not able to offer, such as a more immersive user experience and seamless offline usage.
Most large online business now offer customers a native web app experience, for a broad range of activities from online banking, to food delivery and other e-commerce sites, to social media, to government services. The near ubiquity of such apps has given rise to the expression "I bet there's an app for that!".
As the state of web technology has continued to improve over time, the need for web apps that can function in a similar manner to such native apps has increased - finally giving rise to “progressive web applications” (or PWAs).
What Exactly is a Progressive Web App?
As mentioned, a PWA is an application built with web technologies stacks, i.e. using HTML, CSS, and JavaScript. However, these apps contain innovations that enable them to function and feel more like a native app.
Some of the major improvements include push notifications and ability to use the apps offline. PWAs also leverage the power of modern APIs to asynchronously deliver content in real time, without having to constantly reload pages from the web server. PWA frameworks typically come with a wide range of open-source community plugins and options that make development much easier and faster (not having to be built from scratch). PWAs are also downloadable, and can be installed on devices much like a native app (albeit with some limitations).
One of the main benefits PWAs is that companies can build a single app that runs on both iOS and Android devices. While larger companies will still also build native apps (usually with a prompt to download it, targeting new users trying out the web app first), it is possible to maintain just a single codebase and offer a PWA - if the company is smaller and has limited developer resources.
Many large companies that offer both native and web apps have still taken the PWA approach for their web offerings, such as Uber, Tiktok, Spotify, and Twitter. Most of these PWA apps can be installed on the user’s home screen on their device.
Common Features of a PWA
Responsive Design
Because PWAs are built for web browsers, which include both desktop and mobile browsers, it is crucial that they work well on all device sizes. This can be achieved either via responsive design principles (i.e. having CSS classes active depending on the media query for the device being used), or by having unique different desktop, tablet, or mobile views that load depending on the device. Regardless, the web app should work seamlessly with any screen size, and have content display on any view-port size.
Option to Install the PWA
PWAs can be installed to the home screen of the user’s device, giving it a similar look and feel to a native app. This tends to increase user engagement substantially, compared to forcing users to visit the website directly each time they want to use the app.
Available to Use Offline
A key feature of most PWAs is the ability to cache or store content locally, so that the app will continue to work seamlessly when it is offline. This is crucial for keeping users engaged and providing a better user experience (similar to native apps). Examples of offline usage would include the ability to read or edit content posted online, or store media files (like music or videos) on the device to be used even when the app is not connected to the Internet.
SEO
One of the main advantages that PWAs have over native apps is that they can appear directly in online searches. While native apps can be discovered on landing pages or linked to websites, they typically need to be downloaded from app stores first. PWAs are still websites, so they are indexed in search engines like Google - having a popular PWA is therefore beneficial from an SEO standpoint.
PWAs vs Native Apps: Key Comparisons
Cost of Development
PWAs are usually substantially cheaper to develop, test, and maintain than native apps. Native apps require developer teams that specialize in certain languages (for iOS and Android), and in most cases both are required to serve the full market of users.
In the case of PWAs, the frontend is nearly always built in JavaScript, often a modern framework like React, Vue, or Angular. JavaScript developers are generally more versatile (full-stack), and only need to maintain a single codebase for all platforms serviced by the PWA. There is also less complexity, as it is not necessary to work with iOS or Android SDKs.
Overall this will reduce the cost dramatically, making it a much more feasible option for smaller companies or start-ups, before they scale to the point that native apps would be required.
Security
While native apps are typically secure due to the infrastructure of the operating systems they are built on, this also requires a lot of measures to be implemented (such as multi-factor authentication).
PWAs are required to run on the HTTPS protocol, which makes them highly secure when communicating from client to server. However, it is important to note that some modern JavaScript frameworks can allow for vulnerabilities to be built in (like storing vulnerable information in the browser), so steps should be taken to safeguard against this.
Key Requirements for Building PWAs
Frontend Frameworks
The most common JavaScript frameworks for building PWAs are React, Vue, and Angular. In particular, open source frameworks like Next.js (for React) and Nuxt.js (for Vue) have PWA projects built in, which can be installed with a few clicks of a button, and be configured however needed.
HTTPS Protocol
An https connection is necessary to securely transfer data between your PWA’s frontend and the backend server.
Frontend Shell
This is the initial view the user will see, usually server-side rendered HTML, serving as the skeleton for the app. This view should load very quickly, and have placeholder or loading view components when necessary to show the user what is happening. Data is then pulled in via APIs, and populated into the app when loaded.
Service Workers
In order for your PWA to continue functioning offline, one of the key technologies required are service workers that run background code and perform advanced caching of data as needed. The main function of the service workers is to detect changes in the network, fetch data asynchronously and push notifications to the user when their Internet connection is restored. This provides a much smoother overall user experience.
Kuroco works Hand-in-Glove with PWAs
If you are thinking of building a PWA for your business, it is likely that you will need a content management system (CMS) to manage your content across multiple platforms. Kuroco is an ideal solution for PWA projects, with API management functionality that allows you to customize endpoints for different frontends.
Our solutions work seamlessly with all major frameworks like React/Next and Vue/Nuxt commonly used to build PWAs. If you would like to learn more about how our products can help your business, please reach out to us and we will be happy to answer any questions!