Progressive Web Apps: Fills the gap between Web and Mobile

In this article, we will explore basic progressive web app (PWA), review some practical cases, and explore how to use and situations that can be effectively applied to PWA.

Today, most of us connect to the internet when we go anywhere. However, there are still a large number of users who still have quite a disconnected connection (especially those who use mobile networks as main users, use a common internet connection, …). And to serve these users, ask us to have a different stream of information.

We can attract and mount users with internet interruptions by allowing them to continue surfing offline with the sites they have and often access.

We can also use cached data and program functions for this purpose, to produce the same interaction as a mobile application, but we do not need users to download applications through the app store, and as such, we do not need to summit always.

What is Progressive Web App?

To understand the PWA, we should compare relative to both website and mobile application to better understand. In the table below, some (but not all) of the attention features are expressed in relation to the middle PWA (which partly represents the PWA's ability to pull web and applications together).

Basically, there are four requirements (explained below) that define a PWA, currently supported by Google Chrome, Opera and Samsung Internet.

When these four conditions are satisfied, the developer can freely customize the features at will, from which we can see both the offline error page, and complete offline browsing on the project and site we are visiting.

Becoming Progressive

In order for an online site to be recognized as having progressive web app settings on the server (and this will require a " Add To Home Screen" request for users), the following four requirements are required according to Google :

• A site must be visited twice with a 5-minute break to meet requirements
• Standard secure HTTPS connection
• Have installed JSON Manifest
• Have Service Worker installed

A site must be visited twice with a 5-minute break to meet requirements

In Google Chrome, users need to access the site host PWA twice before the browser shows the request to install the PWA.

This is not the most accurate verification form, but it still seems to work quite well, because the first visit users will not be scolded right away with the box claiming up to 25% of the mobile screen, and more , it ensures users have to like that page, because they have already visited it twice.

However, this is still a simple method to determine the relevance and interest of users. Currently Google is still quite satisfied with this "rudimentary" method of resolution, but may be improved in the near future.

Standard HTTPS connection standard

With secure connection to PWA, users can feel safer when granting them permissions.

Since the network request is destined to the service worket script, adding https to the server can help with certain deficiencies such as snooping.

Secure connections also help build trust in users. And because PWA can be search engine indexed, we can serve on TLS to take advantage of a bit of SEO advantage.

Have installed JSON Manifest

By providing data extract in JSON format, it is possible to cached this information with the help of service workers, and then use the app shell to load CSS rute to deliver the offline version with full UI functionality.

Every time a visitor loads a new page, the service worker will cache the JSON extract, and store it (physically) in the app shell. This App shell is a self-contained wrapper that has all the necessary style sheets, scripts, images, fonts and HTML output for users to render the whole page without having to load anything else.

Compared to the website, PWA is capable of displaying data even when the user is no longer connected to the internet.

Have Service Worker installed

This is the core of any modern PWA. Service worker is responsible for cache all files, serve push notifications, content update, data manipulation, …

Remember that this script works independently of any application or website already on the web server, working with the event listener and commands like "fetch" (similar to the "Get / Post / Set" command).

By listening to any network request on the server, but being placed as a .js file on a user's device, service workers then manipulate these events with appropriate responses (depending on availability). internet or not), create conditions for offline custom page.

Moreover, we can display customized content even when users are offline, based on their existing data cache. This data set is still dominant, meaning that we can code functions using cache data as variables and parameters – of course, if applicable to the corresponding projects.

This means, although the first load may take a few seconds, the next load taking advantage of the service worker will be much faster.

Once these four requests are properly combined, users on Android phones and other supported devices will be asked to add that PWA to their home screen, where it will have an icon similar to the application. normally and will open in the browser.

Developer is responsible for ensuring that the UI is familiar with the website and the application already exists, or can develop a completely new UI for PWA users. Freedom of choice is also a point of interest to developers who are interested in this new trend.

Progressive Web Apps: Okay and Lost

Progressive web apps bring with them strengths:

• Speed ​​and performance are better than websites
• Security
• Offline capability
• Add to Home Screen
• Push notifications
• Bounce rates are better
• Fills the gap between mobile application and website
• Feel like application
• No submissions / rejections from the App Store

However, there are still some shortcomings:

• Limited browser support
• Native API access is limited
• Don't go to the App Store
• Not all PWAs currently use links for their page structure, build PWA with unconnected tabs, and thus cannot be searched by search engines.

Use cases

With some types of websites and mobile applications, the PWA is typically developed when both users are not satisfied.

One thing to keep in mind, although users can still read, add items to the basket, … in offline mode, they will still need to connect to the internet to get new data, update profile information or add orders.

PWAs can help store data while the user is connected again, but in some specific cases, such as paywall news sites. This site will often not intend to display this data when the user has no way to click ads, or register, …

Currently there are many types of PWA on the web. Some types work like completely independent applications that are no different from the native app, such as the Guardian's RioRun .

Other types integrate service workers into their existing websites, adding the ability to work offline through existing website classes (like The Washington Post ), where if you surf their web and lose connectivity, you still can read a few posts, and be taken to an offline page with special code, you will play some crossword game temporarily while waiting for online to come back.

FlipKart reports an increase in conversions of over 70% , AliExpress increased by 104% with new users compared to websites.

Konga (Nigerian retail site) also said it reduced the amount of data used by 92%, which means a significant improvement in the page load time. With their userbase (with a large number still using 2G networks), PWA has the ability to revolutionize the web in countries with expensive and slow data.

Summary

So far, PWA shows impressive results, with great success in conversion rate, bounce rate, and impressive performance increase. Combined with the wishes of website owners and businesses before the same-application experience Using without native development, PWA's future is quite optimistic.

Almost any type of business benefits from service workers because it helps reduce load times strongly. Not all websites need offline features, and not every website pays attention to conversion or bounce rate. However, with benefits only from a simple system, technologies like these are not horizontal and vertical.

ITZone via sitepoint