One Codebase, All Platforms: Our Journey to Building a Progressive Web App

As a small company, we were faced with the challenge of developing a new website that could also function as an application for our users. We wanted to create a web app that could be accessed by anyone, regardless of the device they were using. After exploring various options, we decided to build a Progressive Web App (PWA). In this article, we'll describe how we built our own PWA from scratch and overcame some of the challenges we faced.

Why a PWA?

We chose to develop a PWA instead of native applications because it allowed us to have a single codebase that works on all platforms, eliminating the need for separate development for iOS and Android. This was particularly beneficial for us as a small company with budget limitations, as we needed an efficient and cost-effective solution. While the technology is not yet widely adopted, we believed that a PWA would provide us with the flexibility and scalability we needed to grow our service.

Challenges with Frameworks

While React and Angular are popular frameworks, some developers find the combination of HTML and JavaScript code to be a strange and cumbersome approach to web development. Moreover, the amount of boilerplate code required to create even simple applications can be overwhelming, making it difficult to focus on the core functionality of the application. Additionally, using React or Angular can require more code and configuration than other frameworks, which can lead to larger and more complex codebases that are more difficult to manage and maintain.

Challenges in Building a PWA

Building a PWA system from scratch comes with its own set of challenges, especially when it comes to managing events and accessing IndexedDB, which can be particularly cumbersome. In our case, we initially struggled with finding a way to manage events with the service worker. Existing solutions did not meet our needs, so we decided to build an events library ourselves that could handle the specific requirements of our project. We also faced challenges with accessing IndexedDB, which required careful planning and implementation.

Design Considerations

Another important consideration was ensuring that our PWA could be accessed from all open tabs in the user's browser, rather than requiring users to navigate to a specific tab. This required a thoughtful approach to design and development, as we wanted to create a seamless and intuitive user experience that did not rely on confusing or cumbersome navigation methods.

Proud Pioneers

In conclusion, our journey to build a Progressive Web App (PWA) was not without its challenges, but the benefits were well worth the effort. We were able to create a seamless and enjoyable user experience for our users, while eliminating the need for separate iOS and Android development. By building our own PWA from scratch, we were able to customize it to our specific needs, while also learning a great deal about the technology and its potential.

As PWAs become more widely adopted in the coming years, we are excited to see more companies embrace this technology and take advantage of its many benefits. We believe that the future of the web is in PWAs, and we are proud to be at the forefront of this exciting and rapidly-evolving space. Our team of programmers worked tirelessly to develop a PWA that was both efficient and cost-effective, and we are proud of what we've accomplished. We hope that our experience will inspire others to explore the potential of PWAs and to embrace this powerful technology.