Technology

Apptension Blog

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.

What is PWA?

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. 

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! 

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.

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! 

Read more

HealthPort - a Designer’s Take on Digital Health Passports
8 Tips for a Successful IT Project Startup Founders Should Follow
Mateusz Skwierczyński
Mateusz Skwierczyński
Senior Frontend Developer
Does it sound like we speak the same language?
Get in touch

PWA Studio, a new way to create PWA applications

April 4, 2022
8
minutes read
audio description available
TL;DR

Trying to take a deep look at the PWA development? Here's everything you need to know: What is PWA exactly, and what is better for creating - PWA Builder or PWA Studio. See the pros and cons of each in the sections below.

0:00
0:00
PWA Studio, a new way to create PWA applications
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.

What is PWA?

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. 

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! 

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.

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! 

Mateusz Skwierczyński
Mateusz Skwierczyński
Senior Frontend Developer
Download our free e-book and learn how to create DesignOps MVP for your organization 🚀
This field is required.
Thank you! You should receive the email with the e-book shortly!
Oops! Something went wrong while submitting the form.