Progressive Web Apps

The world of web development has come a long way from the days of static HTML pages. Today, we have dynamic, responsive, and fast web applications that can rival native apps in terms of user experience. Progressive Web Apps (PWAs) are the next step in this evolution, bringing the best of both web and native apps to provide an optimal user experience.

This is a topic I really enjoy and on will I worked a considerable amount of time. I gave talks and workshops as well as created tooling. In this article, we'll explore what PWAs are, why they're important, and how to get started with building your own.

What are Progressive Web Apps?

PWAs are web applications that take advantage of modern web technologies to provide a native app-like experience to users. They are built with web technologies like HTML, CSS, and JavaScript and run in a browser, but they can also be installed on a user's device, just like a native app.

PWAs are designed to be fast, reliable, and accessible, even when a user is offline. They should load instantly, regardless of network speed, and provide a smooth and seamless experience. The user experience is the key of all this and we will be focusing on improving it at the best we can.

The Benefits of PWAs

1. Fast and reliable: PWAs are designed to load quickly, even on slow networks, and provide a seamless experience, regardless of network speed. One of the key aspect that facilitate this is that PWA take advantage of the service worker to cache data and resources, which can also enable us to making them available offline.

2. Installable: PWAs can be installed on a user's device, just like a native app. This makes it easy for users to access the app from their home screen, without having to open a browser and navigate to the website. This is one of the most interesting benefits and it's simple to get it as you only need to have a the site behind https, a Web Manifest, and a service worker.

3. Cross-platform: PWAs are built with web technologies and run in a browser, making them platform-independent. This means that a single PWA can run on multiple devices, including desktops, laptops, smartphones, and tablets. Having all those platforms at hand, enables you to reach more people than only targeting a subset of those with a native application which is a great win when deciding which tools to use.

4. Discoverable: PWAs can be discovered through search engines, just like any other website. This makes it easy for users to find and install the app, without having to go through an app store. Not only that, you have the possibility to add your PWA in the native app stores using things like PWA Builder and reach even more people.

5. Lower development costs: PWAs can be developed and maintained with web technologies, which are typically more cost-effective than native app development. This means that it is possible to build a high-quality app at a lower cost. Having a single code source can be very helpful as you don't need to have different teams to build each app and you can write a feature once and take advantage of it everywhere.

Getting Started with PWAs

Building a PWA is straightforward and can be done using any modern web development stack. The basics are the same as any web development, define the user experience and design the app, build it using your prefered web development stack (make sure to use modern tools and frameworks to ensure that the app is fast, reliable, and accessible). Once it's ready, test it, optimize it, publish it and promote it.

This seems to be the usual cycle, right? So what's the special thing when building a PWA? You will add the Web App manifest and the service worker. For the Service worker you can use tools such as Workbox which provide you with tools to make that without effort.

Additionally, you can take advantage of the new Web APIs under what is known as Project Fugu, which enables you to add native features such as push notifications, access to usb ports or bluetooth devices.

A talk in spanish

I talked about PWAs in several conferences but always in spanish. Anyway, if you want to see one of them, you can see the following one.

Final thoughts

Building PWAs is a great way to bring the best of both web and native apps to your users. Whether you're building a simple web app or a complex native app, PWAs are a powerful tool for delivering a high-quality user experience.

Progressive Web Apps are not always the future but the present of web development, providing fast, reliable, and accessible apps that can be installed on a user's device, just like a native app. With the benefits of lower development costs and cross-platform compatibility, PWAs are a great investment for businesses and developers alike.

To ensure the success of your PWA, it's important to focus on user experience, performance, and accessibility. This means using modern tools and frameworks, testing on multiple devices and platforms, and constantly iterating to improve the app.

PWAs are the next step in the evolution of web development, and their potential for providing a native-like user experience on the web is limitless. So if you're looking to build a high-quality app that is accessible, fast, and reliable, consider building a PWA.