How To

How to Develop PWA: All You Need To Know Before Creating a Progressive Web App

07 Aug 2018
103
12 min

PWA is a hot topic in software development for a couple years. The reasons for such PWA popularity is easily explained. If we go back a couple of years ago, it must have been a dream to combine together the power of native mobile applications and websites. But times have changed and all dreams come true. PWA brings together the best sides of native and web applications.

If you finally decided to jump on a bandwagon and create a progressive web app, we will provide you with the most essential information you should definitely know to build PWA.

What is PWA

It is a quite new application type introduced by Google in 2015. Being somewhere between web and native apps, PWA is a mix of the best sides of both approaches. PWA was first available only for Android users. In March 2018, PWAs finally became available on iOS 11.3.

On its official website, Google listed the following progressive apps features:

  • Responsive. These applications must provide an excellent user experience for all screens and platforms.
  • Progressive. Such a tautology, but progressive web apps must be progressive. It means that every user can work with these apps no matter what browser they use. Progressive enhancement strategy stands at the core of this approach. According to this strategy, the most essential content comes first. 
  • Works regardless of connection. Service workers provide people with an ability to use progressive web applications regardless of Internet connection. Application of this type can work offline or with a bad internet connection. 
  • Fresh. Again, thanks to service workers the latest updates are downloaded simultaneously when the PWA is opened. 
  • Secure. PWA must be served only via HTTPS in order to protect the security and privacy of its users.
  • Discoverable. PWA is not only indexed in search engines but also gets higher ranks there.
  • Installable and linkable. Users have no need to install PWA via app stores. That is a great news for mobile developers - you have no need to wait for approval on Play Market or App Store. Users can easily add it to a home screen and share it with friends by simply sending a link to the web app. 
  • Re-engageable. In contrast with web applications, PWA is able to send push notifications. We will talk about it later. 

So, what PWA has in common with its predecessors? Begin with web apps. Developers use HTML, CSS, and JS to create a PWA. It also works via a browser and can be easily displayed on desktops and laptops. As for native apps, PWA inherited the possibility to send push notifications, get access to some device features and an ability to work offline.

!

We scrutinized what do native apps and progressive web apps have in contrast. Discover why PWA is the best solution and what limitation it has

But in contrast with them, PWA takes much less time to load and fast in use. Comparing with a native app, it doesn't require downloading from app stores, hence is easier to launch and share. It is much faster and easier to build, so it is cheaper than building a native app. If we compare it with a website, it provides better UX, can work offline and is much more secure. What's more, PWA is lightweight. Take Pinterest as an example. You see, the results speak for themselves.

PWA size vs Native app size

Size of Pinterest native app vs. PWA

We are done with basic features of progressive web apps, now let's discover the best examples of PWAs and the effects of their implementation.

Best PWA examples

Large players in the tech industry have already tried out the power of creating progressive web apps. Among them there are such tech giants:

Twitter

In 2017 the company launched PWA Twitter Lite. Developers used React, Redux, Webpack, Babel, Yarn to write a client-side part of PWA and Node.js for server-side development. The results of PWA implementation were impressive - Twitter has reduced an average load time by 30%. Bounce rate was decreased by 20%, while pages per session metric have grown by 65%.

Forbes

The global media giant decided to create their own PWA in March 2017. The main aim of building the PWA was to increase user engagement and provide readers with personalized and fast web experience. And they nailed it - Forbes PWA loads in 0.8 seconds, and hence the company has increased session per user metric by 43% and user engagement by 100%.

Pinterest

It is a bright progressive web app example. The company analyzed the behavior of mobile web users and came to the conclusion that only 1% of users log in or register via their mobile web app. They wanted to increase this number. And the solution was found - they made a PWA within 3 months. With this step they increased user engagement by 60%, engaged time by 40% and revenue from a user-generated ad by 44%.

PWA in different browsers

As you can see, PWA looks similar in different browsers

AliExpress

It is one of the most popular e-commerce websites. Before creating a PWA, AliExpress used its mobile website to invite web users to install the native app. But this strategy worked not as well as Alibaba company thought. The company decided to invest into PWA. Soon it increased user conversion by 104% and doubled the page per session metric.

Flipkart

Flipkart is another large e-commerce site. In 2015 the company ceased supporting Flipkart's mobile site and focused on a native app. Then the company decided to change the strategy and rolled out Flipkart Lite. As a result, it increased conversion by 70%, re-engagement by 40% and tripled the time users spend on the web app.

Tinder

The PWA of this dating service was built using React and Redux. It is 90% smaller than its native app. As a result, the PWA loads in 4.69 seconds, while the native app loads in 11.91 seconds.

Progressive web app development: what is under the hood

Previous examples have shown us the benefits of developing PWA, so let's move directly to building progressive web apps. First, we check the core elements that are used to create a PWA site.

!

Responsive web design is an important part of creating a powerful PWA. Find out the main steps of creating a responsive design 

App Shell

Application shell is a core element of PWA which provides the fast performance. Simply put, it is a container where the content is put. App shell requires minimum lines of code and consists of only the most essential elements like header and navigation bar. This part of PWA is not loaded every time a user launches the app. Instead, it is cached once and then displayed to a user regardless of internet connection.

PWA app shell

PWA app shell and content

An app shell is crucial for those web apps that regularly update content but leave navigation unchanging. Google set the list of requirements for a good app shell. It should utilize as little data as possible, load fast, separate navigation and content, and be stored in a local cache.

Service worker

The main concept of PWA is that it works equally fast with good, bad or no internet connection. And here service worker comes on stage. It is an entirely separate network script that works on the background and decides if the content should be downloaded from cache or server. SW is the main reason why progressive web apps work offline and synchronize data. HTTPS server is the main requirement for installing SW.

PWA service worker

This is how it works

It stops executing when not in use. It will restart when it is next needed. In case you have any information that needs to be reused, service workers use IndexedDB API.

Manifest file

This JSON file is used to describe progressive web app features. Here you can add such properties as app description, icon, short name, etc. Manifest file also enables creating a beautiful splash screen.

Assume users added you PWA to their Home screen. They see a simple white screen until the PWA is ready. Sounds boring, huh? Make your PWA appealing from the first launch. To create a good-looking splash screen, you should add a background property to the Manifest file. And don't forget about an icon, it must be at least 512*512 px and in PNG file format.

PWA components

3 main components of PWA

PWA Push Notifications

It is a powerful tool for re-engaging users. Push notifications work thanks to service workers and Push API. It has a fixed working algorithm. With the help of the service worker's Push Manager, the user gets a pop up that suggests subscribing to push notifications. If the user agrees, the information about their subscription ID is stored in the database. Now, the SW is responsible for handling the user's data. After that, the server pushes new messages and service worker sends the push notification to user's device.

PWA Push notifications

PWA push notifications are pretty similar to those in native apps

Install banner

Install banner (web app install prompt) is a great way to retrain and engage PWA users. Assume you've created a PWA. A user goes to it and engages with it within a certain period of time. After it, on the screen appears a button that suggests user adding the PWA to a home screen. This suggestion appears when a user interacts with PWA for more than 30 seconds. Install prompt is supported by multiple browsers:

  • Opera v. 32+ 
  •  Chrome v. 31+ 
  •  Firefox v. 589+.
PWA install banner

Add to Home Screen button

Caching strategies

To make PWA able to work smoothly offline, you should think through caching. There is a couple of ways how data is cached on user's device.

Cache first

Service worker loads cached data even without trying to access the network. It sends requests to the network only when cached data is unavailable. It is a great strategy for storing App Shell resources and static information. The information will be updated only when the app version is updated.

Network first

According to this strategy, PWA primarily sends requests to the network. If the network responds, the app returns the received data. Otherwise, the service worker displays cached information. This approach is good for applications with dynamic content.

Cache vs network

With this strategy, PWA sends requests to both network and cache at the same time. Usually, cached data loads first. At the same time, the network sends updated data and it is saved to cache. The data is updated on the background, so it doesn't interrupt rendering data in a cache. It is a good solution for gadgets with slow disk access.

Cache only

If you want to build a PWA with fully static data, this approach is ideal. The data is cached during installation. Service worker doesn't send requests to the server.

Network only

Service worker only sends a request to the network and doesn't use a cache. In case network doesn't respond, the request fails.

Learn how to convert a website into an app!

Progressive web app frameworks

We've discovered what stands under the PWA, now it's high time to choose the best frameworks for building a progressive web app.

Angular JS

Angular is a robust tool for creating client-side part of web apps. The arrival of Angular 5 has brought developers an easy way to create PWA. Particularly, Angular 5 now is equipped with a powerful service worker for built-in PWA support. The next version of this framework, released in May 2018, has several new features for creating responsive and reliable PWA.

This tool provides scalability for a project, so your app will be able to manage a big scope of data. New CLI commands enable developers to easily turn projects into a PWAs.

!

Angular vs React: who will win? Find the answer in our detailed comparison!

Polymer

Polymer is a lightweight Javascript framework created by Google. It helps mobile developers to create reusable elements that facilitate synchronizing data with devices. Polymer App Toolbox was created in order to facilitate the process of PWA development. Tools called App layout components allow creating a responsive design and automatically enables the service worker.

But you should bear in mind, that using framework increases the size of your PWA and hence the load time.

Progressive web app tools

Here is the list of other useful tools that will help you easily create a robust progressive web app.

React
You can also build PWA with React. We've already mentioned this library when talked about Twitter Lite. React is backed by Facebook and provides developers with an ability to share and reuse code. Its Create-react-app generator automatically generates all needed data for your PWA and all you need to do is only customize it.
Lighthouse

This tool was created by Google in order to improve the quality of web apps. This tool will show you if your web app is ready to become a PWA. When you added your website to this application, Lighthouse measures it on the four criteria and shows problems you should solve to increase the rate of your web app.

Lighthouse

Google's Lighthouse is PWA analysis tool

Dev Tools

Every browser provides programmers with an ability to find and debug web apps on the fly. Chrome Dev Tools panel allows modifying and inspecting service worker, manifest and cache files. The same capabilities are available in Firefox Dev Tools.

Workbox

It is another tool developed by Google. Workbox includes several Node modules and libraries that improve web app performance and facilitate creating progressive web apps. In case the PWA is ready, don't forget to make sure that all requirements in Google's PWA checklist are met.

As you can see, creating PWA both useful for application users and lucrative for its owners. If you want to have your own robust PWA, write our tech-savvy managers. We will do our best to create progressive web application tailored to your business needs. And don't forget to subscribe to our newsletter and receive the most interesting information from the tech world!

Rate this article:
( ) ( ) ( ) ( ) ( )
(266 ratings, average: 4.96 out of 5)
Back to top
As s part of our team, be ready for:
Competitive Base Salary
Comprehensive Benefits
Great Work Environment
Drug Free Workplace
Tell us more about yourself