Already in 2014, the audience of mobile devices users exceeded desktop users. Now there are people who have only mobile devices.
Of course, as developers, we can’t ignore this tendency. So we are interested in finding new technologies that can deliver better performance and user experience for ordinary users. Because we care!
As stats say, there is a certain tendency among mobile device users. People spend 87 percent of their time using mobile apps compared with just 13 percent of their time using a mobile browser.
So people prefer apps to a browser?
Yet you shouldn’t jump to conclusions. Despite the high percentage, 80 percent of the time users spend in approximately 3 applications and download on average 0 applications per month. Even so, they manage to visit more than 100 sites per month.
How do you like this news?
From the above, it follows that in spite of functionality of the mobile applications, they have a very small amount of new users coverage. This means that if you create your app, it will be extremely difficult to attract new users.
With web applications, the situation is reversed. Web apps have extensive coverage of new users, but less functionality.
What is the way out of this dilemma?
Thus, the best solution is to expand the functionality of websites and make them similar to the native ones but retain user coverage. So that’s where you got the concept of Progressive Web Application (PWA).
Finally, we’ve reached the point we wanted to share our discoveries!
PWA is not a framework or a library. It is a set of technologies and practices allowing you to create web applications similar to the native ones.
The main features of PWA:
- Reliable: fast loading, offline and working with bad connection
- Fast: quick animations, scrolling, and navigation
- Engaging: home screen icon, no browser window, splash support, push-notifications.
Isn’t it beautiful? Moreover, here is how it looks like:
There is a list of requirements for PWA in details. Let’s look at it!
PWA should be:
- Progressive — Work with each user regardless of the environment using the method of gradual improvement as the basic principle of operation;
- Adaptive — Look nice on any device: desktop, smartphones, tablets or anything else;
- Irrespective of the connection — The application should work in offline mode when interrupted or no connection;
- Look native — The application must conform to the usual methods for user interaction and navigation;
- Self-updating — The application must have an automatic update;
- Secure — To prevent spoofing and interception of data with HTTPS;
- Discoverable — The app is identified as “application” by search engines thanks to W3C manifest and service worker registration scope;
- Re-engageable — To remind the user to return to the application, for example by means of push notifications;
- Easy to install — Allows you to “save” without using the app store;
- Easy to use — To start using the app just open the URL. Installing the application is not obligatory.
Standard work process
Now you may be interested in the way it works.
The user enters the PWA via a device. Then either the application offers to add the app icon to the home screen via the web app install banner or a user himself adds it through the «Add to home screen» option item in the browser. Subsequently, the user receives a complete application that he can open and use via the home screen.
The key technologies and APIs that allow the app to be PWA
Of course, there are some special technologies that help PWA to actually be progressive. Let’s get to know them!
Accelerated Mobile Pages (AMP) — Accelerated pages for mobile devices. Standard web pages contain a lot of JS-scripts that slow the loading down. The AM-pages use only AMP library that makes the page much lighter. There is a full list of requirements for the page purification from the JS-scripts on GitHub. That is, either in the CMS or in the development stage publishers will clean the page from certain elements, and Google will cache the lightweight pages. This will give the advantage in download speeds.
Cache interface provides a mechanism for storing cached pairs of Request/Response objects.
Push API enables web applications to receive messages sent from the server, regardless of whether the web app runs in the background, or even if it is loaded by the user at all. This allows developers to send asynchronous messages and updates to the subscribed users. As a result, users are better informed about new content.
Also among those that I’ve met are Credential API, Web Payments API, Bluetooth API.
But Service worker is considered to be the heart of PWA.
Why? We are not gonna keep it a secret!
Service worker API is an event-driven worker, recorded at the source and path. It takes the form of a JavaScript-file that can monitor the web page/site it is associated with, intercept and modify the navigation and resource requests, cache resources in great detail, as well as provide full control over how the application behaves in a particular situation (most obvious when the network is unavailable).
Being a very important part of PWA Service, the worker has some features itself.
Service worker runs in the context of a worker. So it does not have access to the DOM and runs in a separate thread from the main JavaScript that controls your application, so it does not block it. It is designed to be completely asynchronous. As a result, such APIs as synchronous XHR and localStorage cannot be used in the service worker.
The service worker will catch requests from the clients under scope only.
Service workers only run over HTTPS for security reasons. Being open to the general public modifiable network requests can be extremely dangerous and fraught with attacks.
It runs only when an event occurs and works as much as necessary for processing the events.
Thus, we’ve made an overview of the technology that is believed to be the future!
Conclusion
We expect that in future Service Worker will be even more functional than it is now. Today it has enough functionality which is already possible to put to good use.
Summarizing the above, it is obvious that people tend to have a problem with installing new mobile apps. Thus, PWA solves it by making web applications similar to the native ones and expanding their functionality.
On the downside, PWA has such minuses:
- it is new, so it’s raw;
- lack of implementation examples;
- problem with browser support: Safari doesn’t support it at all, Firefox and Microsoft made a commitment to support it, and Chrome and Opera already support PWA.
But there is no need to despair, as these issues can be easily solved in the near future.
More and more companies begin to master Progressive Web Apps. As the pluses are obvious:
- Zero-install, as PWAs are just web pages;
- Update-on-use;
- Portability;
- Quick loading;
- Push notifications as an engaging tool;
- Appear as native app interfaces, etc.
It’s worth mentioning that we got inspired by the amazing presentation of Jake Archibald.
The future is knocking on our doors!
