What Are Progressive Web Apps (PWA) and How Do They Work?

Innvonix technologies
Nov 4 · 6 min read

The Progressive Web Application is a relatively new concept in the mobile and Internet world. PWAs are developed using certain technologies and approaches to create apps that take advantage of both native and web application features. Essentially, it is a mixture of mobile app development and web applications.

Thanks to the concept of Progressive Enhancement they work no matter what browser you use. PWAs give users a great experience on every modern smart device — phone, tablet, PC, you name it. Even though they are ‘just’ web applications, PWAs act like a regular native app.

The main thing about Progressive Web Apps is that they are not like other regular web apps you’d find on the Internet. They have access to internals of your device, so for example, they can utilize sensors such GPS to find your location, accelerators or camera etc.

PWA concept as a whole allows for easier user engagement with your content. Since the semi-native app can be saved to your app drawer and send notifications to your device, more people can come back to it. It’s much more convenient to just tap on an icon instead of typing the whole URL.

How does a Progressive Web App (PWA) work?

PWAs can range in functionality from barebones to advanced features like geo location and Bluetooth. The baseline technical requirements Google has defined for PWAs include:

1. Service worker:

A service worker is JavaScript code that runs in the background of the PWA. Their primary use is to precache resources, so the web app loads fast and can even have offline functionality. After the website has been visited once, the service worker saves — or caches — critical assets like HTML files and images so that it doesn’t need to make API calls to the backend as frequently next time the user visits. Service workers can be used for other tasks, however, such as push notifications and background data syncs.

2. Web manifest:

The web manifest is a JSON file that defines the look and feel of the PWA when it’s installed. It’s used to customize things like the home screen icons and how the web app is launched. In general, the web manifest includes metadata like the app name, version, description, theme colors, and screen orientation. A web manifest is essential for creating a native-like app experience.

3. Transport Layer Security (TLS):

PWAs are required to communicate over HTTPS by having an SSL certificate installed on its web server. The SSL certificate creates a secure, encrypted connection between the frontend app and backend server. These requirements leverage the TLS protocol to ensure secure data transfers when the web app communicates with the backend ecommerce and CMS systems. This is crucial for keeping user information safe and is critical for eCommerce stores that handle customer credit card information.

The benefits of a Progressive Web Apps:

1. NO NEED FOR APP STORES:

When you go to a PWA in the browser of a mobile device, you will have the ability to “install” it on your smartphone or desktop PC just like a native app. This means you do not need to search in app stores and there is no need to download the app. This is a good and bad thing for app builders and app users.

App developers have less pressure because the release process of the app is in their own hands now. They no longer have to experience the hassle of submitting apps, waiting for review and possible rejections because the app is not app store rules compliant. This also means that services that were not allowed before on the app stores (e.g. gambling) can now reach their audience. Oh, and if you are selling products or offer subscriptions, you do not have to pay Apple 30% on the revenue.

For the end users it is great not having to search for and install apps you only need once. A PWA does not use up precious storage space on your smartphone, it spares your mobile data volume and it does not require constant updates. On the other hand, not having a validation service opens the door for less tested functionalities, malware and possible security risks.

2. SAME LOOK AND FEEL AS NATIVE APPS:

When you go to a PWA in your browser you can install it as a stand-alone app. Once it is installed the PWA app has almost the same look and feel as native apps. For example, it has an icon with title and a splash screen when loading. A PWA furthermore runs in an immersive full screen modus meaning you do not see any browser controls. This data is defined in the Web App Manifest file.

3. SERVICE WORKERS:

In addition to the manifest file, PWA’s could use service workers also. They enable applications to control network requests, cache those requests to improve performance, and provide offline access to cached content.

Thanks to this, PWA’s can offer the following features:

  • Always the latest content

When a PWA is installed, the content can be updated in the background from the moment there is an internet connection. So, each time you launch it, you have the latest version of the content. The state is also kept, meaning when you leave the PWA at a certain point you will return to that specific screen.

  • Offline usage

You can run PWA’s offline. Moreover, depending on the Operating System, they can store a certain amount of data for a certain period on the device. When a network glitch occurs, you can still access the content.

  • Push notifications

Thanks to the service workers you have the ability to receive push notifications on smartphones as well as on desktop PC’s if your OS and browser supports it.

4. BETTER USER EXPERIENCE:

PWA’s can offer all HTML5 features such as camera access, geolocation, 3D visualization, audio and video playback etc. as well as most mobile gestures. This gives the user the impression that he or she is using a native app that is optimized for his/hers devices. Because of the caching and preloading the interfaces feel much snappier while scrolling. PWA’s have overall a better user experience than responsive desktop websites.

5. BETTER FOR SEO:

Because PWA’s are completely web based and they can perfectly be made findable in search engines, there is no need for App Store Optimization (ASO) anymore. The time-consuming effort of creating different screenshots and descriptions in all resolutions and languages lie behind us.

It is also important to know that, if you choose for a PWA, your Google page speed score will improve, which will result in a better ranking in the Google search index.

Since the beginning of this year, you can publish PWA’s in the Google Play Store too.

Drawbacks of Progressive Web Apps:

There are significant benefits for eCommerce companies to move to PWAs, but there are still some drawbacks.

1. You lose app store traffic:

While there may be SEO benefits of a PWA, you’re still losing out on the traffic from users searching within the Google Play Store or iOS App Store. These are generally massive audiences, and users may wonder why you don’t have an app or may demand that you provide a native app.

2. Devices have access restrictions:

PWAs may be able to use features like GPS or Bluetooth, but it depends. For one, users may need to allow you to access certain features to protect them from security risks. In other cases, mobile vendors limit web apps from accessing device capabilities because the developers aren’t paying to make the app available on their platform. Apple is particularly limiting in this respect.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade