PWA Studio - a new way to create PWA applications

Following the news and trends in the IDE extensions can often save a lot of time and allow optimizing important developmental processes. Such an approach can significantly affect the speed of our work and also its quality. Read this article to refresh your knowledge base with a trendy development approach - a new way of creating PWA applications using PWA Studio.

What is PWA (Progressive Web App)?

Let’s start with the basics. The work of applications can, in a sense, be divided into two main groups - native and web apps (fine, there are also hybrid, but seriously, does anyone still make it?). 

Native applications are usually targeted at a specific platform such as Android, iOS, Windows, macOS, etc. Web applications „live” in the environment of a web browser. This means that they can be run on any system or device (as long as it has access to the browser). 

PWA, in its turn, is a mix of benefits of those two approaches. They are easy to produce, publish and update, we can use them offline and install them as separate, standalone applications. To be more precise, PWA can be saved on the user's device and also viewed offline. 

You may also like: Constate Library - alternative to global state of the app management

Why is it so important? While creating an application, we, as developers, should aim to provide the best possible user experience and availability. In addition, we need to remember situations when there's no great internet connection (for whatever reason). So, it’s always nice to provide access to the app without restrictions that are so closely related to the web browser environment. 

Thanks to PWA, users can download the app to their phone or computer and simply use it any time they want. Isn’t that great? And when it comes to keeping the app up-to-date, thanks to Service Workers (just small JS scripts running in the background), the PWA apps can be continuously updated.

Over the years, more and more companies have supported the development of this approach. For example, Microsoft has been one of the biggest proponents of PWA for many years. The company also constantly supports the development of PWA Builder, a tool that effectively makes working with PWA much easier. But more about this tool in the next section. 

What is PWA Builder?

PWA Builder, as mentioned above, is a tool made to facilitate the process of developing and testing PWA. It’s basically an open-source project available at https://www.pwabuilder.com and made to move PWA adoption forward. Thanks to it, it's possible to conduct a thorough audit of PWA to check if everything works as it should. 

How does it work? The tool checks if the Web Manifest is properly configured, if the Service Worker is working correctly, and if the application is safe (in other words, if it works under the HTTPS protocol). Finally, it provides the opportunity to generate packages that can be uploaded directly to one of the selected stores: Microsoft Store, Google Play Store, and iOS App Store, for even better availability! 

Worth checking: How to use TypeScript Record Utility Type? Detailed guide

I can't help but notice that the last feature is especially interesting because it can save us time, and it’s much easier to use than employing IDEs (such as Android Studio or Xcode) for native development. All we need to do is to grab this package and send it directly to the store! PWA Builder works by analyzing existing websites based on their URLs. But what if we want to use it during development?

How does PWA Studio work?

Now, when we already know what PWA and its builder are, let's move to the topic of what the PWA Studio is? PWA Studio is a simple extension to our beloved VS Code that allows generating a Web Manifest using a nice GUI and quickly producing the Service Worker script. 

It's also possible to set up a startup PWA project with a boilerplate provided by the PWA Builder team. This boilerplate is based on the Lit library, which has great performance and an intuitive, React-like programming style. PWA Studio also audits applications and informs about any missing elements that may improve the performance or accessibility of the application. 

So, in conclusion, it pretty much has most of the functionalities of PWA Builder in the form of an IDE extension. Thanks to this, we are able to prepare PWA faster, and can be more confident about things like the security or accessibility of our application.

Read also: Dive into Javascript deeper with an explanation of Object.Prototype and classes

PWA Studio - the bottom line 

If you’re looking for a solution for quick and quality development of your future applications, I strongly recommend trying PWA Studio. Saving time and money on development without sacrificing quality is never odd. So, don’t hesitate to try the tools and share your experience with us!