Create a Progressive Web App (PWA): Everything You Need to Know + Tutorial

Gerrit Meyer
Feb 2, 2025

Progressive Web Apps (PWA) offer several advantages: They can be accessed via the browser, making them platform-independent and searchable through search engines. Plus, they come with many features typically reserved for native apps. They can also tap into mobile device hardware—Bluetooth, NFC, authentication, and vibration are just a few examples.

In a previous blog post, we explained what a PWA is. Today, after a brief recap, we'll focus on how you can create a Progressive Web App yourself.

How does a PWA work?

The key functional components of a PWA are the Service Worker, Web App Manifest, and Application Shell. The Service Worker is a JavaScript file that acts as a proxy between the web application and the network. The Manifest, a JSON file, contains essential information about the PWA and its features, while the Application Shell provides the basic structure for a responsive user interface.

What can a PWA do & what can't it do?

A PWA runs through the browser but can be installed on the device, shared via QR code, and offers offline functionality. It is searchable by search engines and can use certain mobile device features (e.g., sending push notifications). Here's a quick overview of its pros and cons:

Advantages

  • Ideal for functional use cases, like industrial machine monitoring or digital forms.

  • Shareable via link or QR code and easy to install.

  • Runs in a browser, making it device- and OS-independent.

  • Responsive, with access to hardware and many mobile device features.

  • Offline-capable.

  • Can be built cost-effectively with no- or low-code solutions.

Disadvantages

  • Best for industrial or business applications, less suited for consumer apps.

  • Distribution via common app stores can be challenging.

  • For graphic- and processing-intensive applications, performance may not match native apps since PWAs run in a browser.

  • On iOS, there may be limitations (e.g., unavailable background functions).

  • Unlike native apps, PWAs lack access to all hardware features of a device.

  • Offline usage often relies on cached data, offering a less "seamless" experience compared to native apps.

How to build a PWA: options and methods for progressive web app development

Now that we’ve covered the theory, let’s move on to the practical part. Before you start, consider how you want to create your Progressive Web App. You have several options:

Develop in-house or outsource

If you want to program a Progressive Web App from scratch, you’ll need solid knowledge of JavaScript, HTML, and CSS. Pre-built frameworks can help reduce manual effort. Hiring specialists, however, comes with a cost. Alternatively, you can outsource the development.

Build it yourself with no-code

No-code tools allow you to create a Progressive Web App without any coding knowledge. This works by using pre-built functionalities that you can piece together into a PWA. It’s called visual programming. However, no-code has limitations when dealing with more customized or complex use cases.

Build a PWA yourself with low-code

Low-code application development also uses visual programming with pre-built modules but allows for more customization by integrating actual code. A basic understanding of software, creativity, and a willingness to learn is key, as this method lets you handle more complex use cases compared to no-code.

Progressive Web App builders based on visual programming offer significant advantages over traditional development: you save time, reduce costs, and build in-house expertise. Since we’re experts in low-code, we’ll now show you how to build an app without coding.

How to PWA: Progressive Web App development with low-codemit Low-Code

If you have a basic technical understanding and are ready to invest some time and effort into learning, you can create and deploy a Progressive Web App using a suitable low-code platform without writing any code.

This approach is much faster than programming an app from scratch and offers another advantage: you can quickly verify ideas and concepts for your application without a significant initial investment of time or resources. In this tutorial, we’ll walk you through the first steps.

Step-by-step guide to building a Progressive Web App with Heisenware

  • Define your use case: Even if you already have an idea of how you want to use the PWA, you should first narrow down the application and clarify the problem the PWA is meant to solve. In a production environment, for example, a use case could be displaying Overall Equipment Effectiveness (OEE). The PWA would need to process, store, and visualize automatically captured machine data as accurately as possible.

  • Translate into requirements: Start by thinking about a user story. Ask yourself what your user's specific needs are and where the PWA can add effective value. For example, sticking with the OEE case, your production manager might want to compare the OEE of Hall 1 with Hall 2, or even compare different locations or production lines. The key question at this stage is: what does the PWA need to do to make this happen?

  • Plan the user interface: Sketch rough mockups of the screen views (the user interface) to give the app an initial look. At this point, you may also notice if additional technical requirements are needed for the desired UI, which can help you refine your list.

  • Choose a tool: Once you have the basic outline of your idea, choose a tool that meets your requirements and can execute your planned user interface. Our low-code platform Heisenware, for instance, is particularly well-suited for creating Progressive Web Apps for the industrial and manufacturing sectors.

  • Start small: Don’t aim too high at first. Instead, focus on a manageable part of your use case, such as the OEE for a single machine. Implement this part from start to finish so that it’s captured and visualized in the PWA.

  • Test, test, test: Now it’s time to test your progress on different screens and devices. The Heisenware App Builder already gives you a preview of how your PWA will look on smartphones, tablets, and PCs.

  • Consider user testing: If you like, you can make your initial version available to test users for feedback. Heisenware allows you to create results at any stage of development, so you can conduct tests in different phases as you go.

  • Optimize and iterate: Based on your testing, continuously improve the PWA. You can then expand the application to cover other parts of your use case or add more features as needed. One big advantage of a PWA is that it’s delivered as a website, meaning any changes or new features in later versions will automatically appear when users reload the PWA—no need to download or install a new version.

The result is a ready-to-use app, giving you a solid foundation that can be iteratively developed—whether to add missing features in complex apps or to accommodate changes during ongoing operations.

Low-code is a smart choice for building a Progressive Web App

As this tutorial has shown, building a Progressive Web App isn’t rocket science. With low-code, you have a strong foundation to achieve a functional outcome in a reasonable time frame and with relatively low costs.

If you'd like to learn more, we'd be happy to show you our App Builder in a free web demo—schedule a session with us online today!