What are the costs of a PWA?

Guidelines of a PWA

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: 

• Use HTTPS so that information is securely transferred.
• Be Responsive so that they adapt themself to the increasing diversity of devices. This also because fewer and fewer users use desktop computers or laptops.
• All content in the app should be linkable. This makes sharing of information or content easier. The fact that you can create links between content is what makes the internet what it is today.
• Progressively enhanced based on the capabilities of the device. It is not uncommon to see sites or applications limit themselves due to the fact some devices don’t support a feature. Make sure all basic functionality work on all devices and improve where possible.
• Are Discoverable by a manifest. This manifest contains extra information on your site or application. It indicates how it should be displayed, a user-friendly name and branding. This allows customers to add your site to their devices.
• It should work offline or with bad networks. Not everybody has the great internet connection we are used to. And even when we are used to fast and good internet, it’s not always great. Sites should make sure that as much information is made available offline. You should still be able to view your purchased ticket offline, or instantly show the clothing you viewed recently. 
• A site should try to keep the user engaged. For example, by using push notifications to update users for new information or by allowing the user to add their site to the home screen for easier access. This last one is a great addition, for example, Trivago users that added the site to their home screen used the site a whopping 150% more.
• It should have app-like interactions. This term is a little bit general. What it means is that the site should be in control of loading content just like a normal app. When you load a more traditional site the browser loads all content where an application shows itself instantly and can control which information is loaded when and how.

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. 

Most important factors

The most important factors of building a PWA are:

• Customization of the frontend is the most important factor for PWA development. Almost all techniques used for PWA development are frontend based. Where for regular sites there are a lot of default designs available this is not the case for PWA’s. So, if you strive for a very basic or standard design, developing a PWA can cost more. If you want a frontend that is optimized for your branding this difference is far smaller or even cheaper if your wishes are not very common.
• With a PWA the frontend is decoupled from the backend application, this means that your backend application should have the right APIs. Systems like Magento, Drupal, Pimcore all have APIs to do this, but if there is no API available in your CMS this can take additional time and cost you more money. 
• If you use a lot of default modules or extensions for your application then this can take more time when developing a PWA. This is specifically applicable for modules or extensions that interact trough your frontend with the user. Just as your backend, in general, the module and extension should have the correct API’s available to do so. Also, some extra design and or frontend work may be required to create the default functionality. This is not the case for modules that only work in the background like ERP connectors, fraud protection, etc.

What will it cost you?

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.

• Create a manifest for your site. It’s a specific text file. This enables the functionality to add your site to your home screen and allows you to determine the way the browser shows your site. For iOS, it can take a little more work, but in most cases, this is easy to do. To give an optimal user experience for the home screen icon we should make the site offline accessible but that’s more work.
• Make sure your content is properly linkable. Most regular websites should already have this correctly implemented. Go through your site and see if all individual content has its own URL. This is easily testable by opening the same URL in a private browsing session. After an optional login, you should see the same content. Common problems are redirects after login or different languages sharing the same URL. With a properly linkable site, users can share information; this is often free publicity!
• Making your site responsive will improve overall usage. Where desktop traffic is declining year by year, traffic from mobile phones is increasing fast. Mobile phone traffic is already larger in general, and this will only increase even more. When implementing a responsive design, you must make sure all information and functionality are available on mobile. Maybe the screen is smaller on mobile, but on average the mobile user has also more time available.
• Make your site progressively enhance. It’s true, not all devices have the newest browser, or all capabilities but don’t limit your user experience due to this. Allow the user to directly take a picture on your site? No camera? allow regular uploads. Same for GPS, doesn’t the user have this functionality or doesn’t allow this? Show a regular address input. More and more functionalities get available through web APIs, it’s up to you to make use of them.
• Keep the user engaged. If you followed the steps above, you already have a manifest so the user has your site on the home screen. Take the next step and keep the user informed by notifications. The techniques for this are simple but it’s important to invest time in optimizing the interactions for signup and notifications themself, just like you would do for e-mails. When optimizing this process, you can get impressive results, like Trivago which saw a 97% increase in clicks in comparison with their e-mail messages.  
   

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.