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

15.08.2018

How to Build a Progressive Web App: Best Tools And Examples

HOW TO DEVELOP PWA: ALL YOU NEED TO KNOW BEFORE CREATING A PROGRESSIVE WEB APP 7 august 2018

Latest

Client Guides

Tech

Design

 103

 12 min

Cleveroad

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

Contents What is PWA

ecided to jump on a bandwagon and create a progressive web app, we will provide you essential information you should deﬁnitely know to build PWA.

Best PWA examples Progressive web app tech Progressive web app fram

PWA w application type introduced by Google in 2015. Being somewhere between web and WA is a mix of the best sides of both approaches. PWA was ﬁrst available only for . In March 2018, PWAs ﬁnally became available on iOS 11.3.

Progressive web app tool

website, Google listed the following progressive apps features: . These applications must provide an excellent user experience for all screens and e. Such a tautology, but progressive web apps must be progressive. It means that every ork with these apps no matter what browser they use. Progressive enhancement strategy e core of this approach. According to this strategy, the most essential content comes



PA: 25

DA: 45

Spam 0/17 Score:

https://www.cleveroad.com/blog/how-to-build-a-progressive-web-app-best-tools-and-examples

FREE QUOTE 1/12

15.08.2018

How to Build a Progressive Web App: Best Tools And Examples

rdless of connection. Service workers provide people with an ability to use progressive ations regardless of Internet connection. Application of this type can work offline or with a t connection. n, thanks to service workers the latest updates are downloaded simultaneously when the ned. A must be served only via HTTPS in order to protect the security and privacy of its users. le. PWA is not only indexed in search engines but also gets higher ranks there. and linkable. Users have no need to install PWA via app stores. That is a great news for elopers - you have no need to wait for approval on Play Market or App Store. Users can t to a home screen and share it with friends by simply sending a link to the web app. able. In contrast with web applications, PWA is able to send push notifications. We will talk er. has in common with its predecessors? Begin with web apps. Developers use HTML, o create a PWA. It also works via a browser and can be easily displayed on desktops and r native apps, PWA inherited the possibility to send push notifications, get access to some es and an ability to work offline.

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

t with them, PWA takes much less time to load and fast in use. Comparing with a native require downloading from app stores, hence is easier to launch and share. It is much ier to build, so it is cheaper than building a native app. If we compare it with a website, it er UX, can work oﬄine and is much more secure. What's more, PWA is lightweight. Take n example. You see, the results speak for themselves.

native app vs. PWA https://www.cleveroad.com/blog/how-to-build-a-progressive-web-app-best-tools-and-examples

FREE QUOTE 2/12

15.08.2018

How to Build a Progressive Web App: Best Tools And Examples

with basic features of progressive web apps, now let's discover the best examples of eďŹ&#x20AC;ects of their implementation.

A examples in the tech industry have already tried out the power of creating progressive web apps. here are such tech giants:

Progressive web app vs. nativ

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%. 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%. 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%.

FREE QUOTE https://www.cleveroad.com/blog/how-to-build-a-progressive-web-app-best-tools-and-examples

3/12

15.08.2018

How to Build a Progressive Web App: Best Tools And Examples

PWA looks similar in different browsers

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 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. 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.

sive web app development: what is under the hood mples have shown us the beneďŹ ts of developing PWA, so let's move directly to building eb apps. First, we check the core elements that are used to create a PWA site.

esponsive web design is an important part of creating a powerful PWA. Find out the ain steps of creating a responsive designÂ

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

Learn how to create responsi

FREE QUOTE https://www.cleveroad.com/blog/how-to-build-a-progressive-web-app-best-tools-and-examples

4/12

15.08.2018

How to Build a Progressive Web App: Best Tools And Examples

nd content

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

ker cept of PWA is that it works equally fast with good, bad or no internet connection. And worker comes on stage. It is an entirely separate network script that works on the nd decides if the content should be downloaded from cache or server. SW is the main rogressive web apps work oďŹ&#x201E;ine and synchronize data. HTTPS server is the main or installing SW.

FREE QUOTE https://www.cleveroad.com/blog/how-to-build-a-progressive-web-app-best-tools-and-examples

5/12

15.08.2018

How to Build a Progressive Web App: Best Tools And Examples

orks

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

is used to describe progressive web app features. Here you can add such properties as on, icon, short name, etc. Manifest file also enables creating a beautiful splash screen. added you PWA to their Home screen. They see a simple white screen until the PWA is s boring, huh? Make your PWA appealing from the first launch. To create a good-looking , you should add a background property to the Manifest file. And don't forget about an e at least 512*512 px and in PNG file format.

FREE QUOTE https://www.cleveroad.com/blog/how-to-build-a-progressive-web-app-best-tools-and-examples

6/12

15.08.2018

How to Build a Progressive Web App: Best Tools And Examples

nts of PWA

otifications l tool for re-engaging users. Push notifications work thanks to service workers and Push xed working algorithm. With the help of the service worker's Push Manager, the user gets suggests subscribing to push notifications. If the user agrees, the information about their D is stored in the database. Now, the SW is responsible for handling the user's data. After r pushes new messages and service worker sends the push notification to user's device.

ations are pretty similar to those in native apps FREE QUOTE

er https://www.cleveroad.com/blog/how-to-build-a-progressive-web-app-best-tools-and-examples

7/12

15.08.2018

How to Build a Progressive Web App: Best Tools And Examples

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

reen button

ategies able to work smoothly oﬄine, you should think through caching. There is a couple of a is cached on user's device. 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.

twork

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. With this strategy, PWA sends requests to both network and cache at the same time. Usually, cached data loads

https://www.cleveroad.com/blog/how-to-build-a-progressive-web-app-best-tools-and-examples

FREE QUOTE 8/12

15.08.2018

How to Build a Progressive Web App: Best Tools And Examples

ďŹ rst. 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. 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.

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

Angular vs. React

nvert a website into an app!

sive web app frameworks ered what stands under the PWA, now it's high time to choose the best frameworks for gressive web app.

obust tool for creating client-side part of web apps. The arrival of Angular 5 has brought n easy way to create PWA. Particularly, Angular 5 now is equipped with a powerful service lt-in PWA support. The next version of this framework, released in May 2018, has several for creating responsive and reliable PWA. des scalability for a project, so your app will be able to manage a big scope of data. New s enable developers to easily turn projects into a PWAs.

ngular vs React: who will win? Find the answer in our detailed comparison! https://www.cleveroad.com/blog/how-to-build-a-progressive-web-app-best-tools-and-examples

FREE QUOTE 9/12

15.08.2018

How to Build a Progressive Web App: Best Tools And Examples

ghtweight Javascript framework created by Google. It helps mobile developers to create ents that facilitate synchronizing data with devices. Polymer App Toolbox was created in ate the process of PWA development. Tools called App layout components allow creating design and automatically enables the service worker. d bear in mind, that using framework increases the size of your PWA and hence the load

web app tools t of other useful tools that will help you easily create a robust progressive web app. 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.

Subscribe Enter Your e-mail SUBSCRIBE NO

•

Join 1200 other sub

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.

use is PWA analysis tool

Every browser provides programmers with an ability to ﬁnd and debug web apps on the ﬂy. Chrome Dev Tools panel https://www.cleveroad.com/blog/how-to-build-a-progressive-web-app-best-tools-and-examples

FREE QUOTE 10/12

15.08.2018

How to Build a Progressive Web App: Best Tools And Examples

allows modifying and inspecting service worker, manifest and cache ﬁles. The same capabilities are available in Firefox Dev Tools. 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. e, creating PWA both useful for application users and lucrative for its owners. If you want own robust PWA, write our tech-savvy managers. We will do our best to create eb application tailored to your business needs. And don't forget to subscribe to our d receive the most interesting information from the tech world!

e:       (31 ratings, average: 4.94 out of 5) m > Blog > Client Guides > Build PWA

articles

te Guide to Hire iOS in 2018: Salaries, Skills,

3 Efficient Ways to Supply Your App with a Virtual Assistant

a platform to build an app for you options: iOS or Android. These two

We are an experienced software development team, oﬀering our professional web and mobile development services. Our skills and knowledge, gained through the previous and current projects, let us add value to our client’s business

Talking to artiﬁcial intelligence is no longer science ﬁction. Living in your phone, watch, or TV,...