Speaking about modern technologies we often use the word revolution – something completely new and innovative. Something, thought wasn’t possible previously.
But in case of progressive web apps, the word evolution is much more applicable. PWAs bring the traditional web to a completely new level engaging users through a first-class experience and leaving the native mobile apps far behind.
So, what are progressive web apps?
Actually, the PWA doesn’t reinvent the wheel. The simplest possible definition may sound like this: a progressive web app is a website that feels like a native mobile app.
It feels like, but it isn’t a mobile app. The PWA aims to bring native-like experience to users of all platforms and all devices. At the same time, it allows users to skip app store browsing and installation. Technically this is just another tab in your browser, but it has quick access right from the home screen and smooth app-like interactions. And it can work without an internet connection!
What aren’t progressive web apps?
A progressive web app should seamlessly work on any type of device, regardless of the operating system. That’s why it is often confused with hybrid mobile apps based on Cordova, React Native, NativeScript, Electron, NW.js etc.
In fact, these are two completely different things. Hybrid apps are executable files, that should be downloaded from the app store and installed locally on a particular smartphone. PWAs aren’t available neither in iTunes nor in Google Play Market or any other app store. They are accessible as a tab in your browser until you save them as a shortcut to your home screen.
Progressive web app structure
The progressive web app has a simple structure. It consists of the app shell and the changing content.
The app shell is the HTML, CSS and JavaScript code which build the interface of the app. The interface is the static part of the app, it can dynamically display the content. The app shell is cached on the device of the user and can be loaded immediately.
The content is the dynamic part, it changes and is refreshed every time connection with the internet is established.
There is one more technology, that allows us to define a PWA as a PWA. Its name is the service worker.
The service worker is a JavaScript file that operates in the background. It is responsible for the offline functionality of the progressive web app through timely content caching.
Also, important is the app manifest, a simple JSON file. It helps the device to recognize the PWA and defines how it will be displayed on the screen.
Distinctive features of a PWA
According to Google Developers, a progressive web application needs to fulfill 10 key concepts in order to be recognized as a PWA. So, the app should be:
- Progressive
The initial idea of a PWA is the possibility of using it on every device regardless of the browser. So, even if the browser doesn’t support any of the technologies that are essential for PWA, the information should be accessible as a simple website.
- Responsive
In addition to the ability to work with all browsers, the progressive web app should be compatible with any device, any form factor: mobile, tablet, laptop, desktop. The size of the screen should not be an issue.
- Connectivity independent
The PWA should be able to work with a low-quality internet connection or without any connection at all. To achieve this you should use service workers, which cache the information and display it afterwards.
- Fresh
The app shell is cached once and is instantly loaded. The service workers take care of the dynamic content, which is automatically downloaded when the device is connected to the network, so that the PWA displays the latest content available.
- App-like
Similar to a mobile app, the PWA has a static shell. To make the PWA feel like a native app the shell should include app-style interactions, navigation etc. The progressive web app’s appearance and operation should not remind the user he is currently in a browser.
- Safe
Progressive web apps that use online banking, online shopping order forms or other type of sensitive data should take care of their safety. To protect the information that is processes in the app, the connection should be served via the secure protocol HTTPS. This means, that all connections between the browser and the website are encrypted and therefore safe.
- Discoverable
The web app manifest provides information about the progressive web application making it visible to the search engines and discoverable for users. The properties of the manifest define how the app will be saved on the home screen and how it will be opened in the browser.
- Re-engageable
The web app push-notifications make the customers return to the website. Every time the content changes the user is notified, which encourages him to check the changes. The service workers and the push API allow the PWAs to send messages to the Android notification bar.
- Installable
If the user visits a website several times, he is offered to save it as a shortcut to the home screen of the smartphone or browser. No need to browse the app store, no installation required. The PWA is saved immediately.
- Linkable
This really cool feature enables sharing the link to the PWA with anyone, which is much quicker and more convenient than recommending to download an app.
Benefits
Progressive web apps are often compared with native mobile apps. Even though they are not direct competitors, you may find the advantages of a PWA quite valuable:
- Not available in the app store
Looks more like a disadvantage, doesn’t it? Actually, publishing an app to Google Play or iTunes doesn’t guarantee hundreds of downloads. Even worse, the application tends to get lost among hundreds of similar apps without ever being found by users.
The progressive web app has a simpler algorithm of being discovered. When the user visits your website, he is already using your PWA and can save it as a shortcut to his home screen with one single tap.
- Works offline
Sounds insane, but a PWA is a website that can work without an internet connection. Service workers are here to ensure this. They cache the information when the device is online and are ready to display it at any time when the connection is poor or absent.
- Always the latest version
Mobile apps updates can be annoying for the users. But this never happens to PWA users. Progressive web applications are actually websites, so you always access the latest version of them without any downloads.
- Loads instantly
You probably know that users tend to leave the website if it doesn’t load quickly. Progressive web applications solve this problem easily. For the first time, the PWA is loaded with an average speed. But all the next app loads are almost instant.
Due to the app shell, which is saved on the device and the cached content the information is displayed without any delay. PWAs load faster than native apps and faster than mobile websites.
Look how it works on washingtonpost.com on a 2G network:
- Improves user engagement
Even when not running, the progressive web app can send notifications about the content change, helping to re-engage the user even if he has already closed the PWA. But it is important to make sure that the notification is up-to-date and requires immediate reaction. Otherwise, the user might be annoyed with unnecessary web app notifications and turn off this nice re-engagement tool.
- Direct URLs
This web app feature allows the user to share the PWA with everyone around. And it is much easier and faster than sending links to a native app download page. The progressive web application is accessible in one click.
Disadvantages
We have discovered only one major disadvantage so far. But if you dig deeper into the question, you may find out that this is actually not a big issue.
- Service workers are not supported by Safari
Yes, service workers are the key technology of a PWA. Without it, the app won’t be accessible when the iPhone or iPad is offline. But this doesn’t mean that when launching a progressive web application you are going to lose such a big part of the market.
The website can be viewed in Safari or any other browser, both on the desktop and mobile devices. So, the users of the Apple devices will still have access to your progressively built website and can enjoy the improved experience.
Also, remember that we are talking about a rapidly changing environment. Something, that is not supported now, may become ? standard in a very short time.
Progressive web app examples
Progressive web apps have already been successfully implemented by some of world’s leading companies. Let us inspire you with some impressive outcomes.
Flipkart Lite
Flipkart Lite is one of the progressive web app examples to mention. The biggest e-commerce website in India Flipkart shut down their mobile website in 2015 and focused on delivering value through native mobile apps. But later it found the solution for a better user experience and presented its progressive web application. Surprisingly, Flipkart reported about a 70% increase in conversions.
Why did this work? Well, there are several reasons. Firstly, 63% of users access the website via a 2G network, which means slow connection and long load times. The PWA minimized this problem because the website became available offline as well. Users now can browse their previous searches and recently visited categories as they are stored in the cache.
According to Flipkart reports, around 60% of all users come to the PWA via the home screen icon. The user engagement is now 40% higher than before.
AliExpress
The worldwide known e-commerce giant AliExpress also decided to experiment with progressive web app technology and the results were quite impressive.
Combining the best features of the native mobile apps and the website the company launched the PWA and noticed, that the duration of sessions increased by an average of 74%. The conversion rates were doubled and conversion on Safari browsers also increased by 82%. An inspiring progressive web app example, isn’t it?
The Washington Post
The Washington Post turned the progressive web app into a default mobile experience for their users.
After launching the beta version of the website they noticed a nearly fivefold increase in engagement. The differences between iOS and Android metrics were minimal. From this we can deduce that even though Apple doesn’t support some of the core features of the progressive web apps, the improved experience they deliver matters a lot.
The examples of The Washington Post and AliExpress prove that by developing the PWA the business doesn’t give up the big market of iOS users. Just the opposite, it allows to deliver a progressive mobile web experience which dramatically increases conversion rates.
Conclusion
Native mobile apps once seemed to be the breakthrough in the tech world. But nowadays it is clear: it’s too early for the mobile websites to give up. Progressive web applications combine the best features of the website and the mobile app delivering a unique user experience. They are fast, they work without an internet connection and they are great in re-engaging users.
Is it worth investing in PWAs? Definitely, yes. This is the evolution of the mobile experience.
Looking for someone to answer your questions concerning PWAs? We are here to help.
We at Clockwise are happy to share our knowledge and experience concerning progressive web app development, so don’t hesitate to contact us!
Source: https://clockwise.software/blog/progressive-web-apps-the-new-word-in-user-engagement/
