First of all, it is good to know that a Progressive Web App is only a PWA when the following guidelines have been complied. This is because a PWA is not a specific technology or technique. Progressive Web Apps are web applications that adhere to a specific set of guidelines. Those guidelines are:
With the guidelines above you can make a PWA because, without them, the PWA is not a PWA. But what is also good to know is that when building a PWA you are optimizing your site, maybe make it more app-like, but you are not only building an app. So, a PWA is always something you build on top of your current site or you will need to create a new website that follows the PWA guidelines.
The most important factors of building a PWA are:
You get the most benefits when you create a site that fills all the requirements for a PWA, or more correct, you only have a PWA if you fill all the requirements and follow the guidelines. Not every guideline of a PWA costs the same amount of effort. Below the guidelines are mentioned one more time, but now you will see what you need to do to complete the guideline.
The first and most easy one is to use HTTPS to make your site secure. If your site does not use HTTPS yet, make this the first thing you do. Is it not because you process customer information, you should do it as it is an important SEO factor. Shortly, the user will see a warning message in their browser if your site doesn’t use HTTPS. In most cases, it’s very easy to do so.
All the points thus so far can be done as an improvement to your current site. Some easy, some hard. The last optimization is larger, and that is to go headless. This means that you create a separate frontend from the rest of the application. When you separate the frontend the correct way it can be installed on the browser of the user. This is not something the user sees or must do anything for. This installed frontend then allows the site to take control of loading all the required information and makes interaction possible when the user is offline or has a bad network connection. When the user has your site on the home screen this will also make sure the site is instantly visible giving the user the real app experience.
Going headless is the biggest step both in reward as an investment. When your backend application has all the required API’s it is sometimes possible to build the new frontend upon the existing backend, strongly reducing complexity and risk. After this, your PWA is built!
Still not sure what the difference is between a PWA and a native app? See here the difference between the two.