In our previous article Your Web Page on their home screen: The Power of Progressive Web Apps, we discussed what Progressive Web Apps (PWA) are, what features make them desirable and what components make up a PWA.
Hire the best developers in Latin America. Get a free quote today!
Contact Us Today!Now, let’s talk about what ingredients, behind the scenes, that make that magic happen and how does each of those components play their specific part in running a PWA.
Why PWA and Not an App?
By every measure, an app can take up as much as 30-200 MB of disk space and has to routinely update itself using up your precious bandwidth. A PWA, on the other hand, takes up a megabyte at most and can be automatically updated. Thanks to the Service Worker running in the background.
Imagine yourself trying to get yourself a boarding pass for a flight en route to the airport and find out you don’t have Internet available. Fortunately, your Service Worker has already downloaded your boarding pass and you’re good to get on the flight.
Essential Component of a PWA and How They Work:
As we discussed in the previous article, a PWA needs to have at least three components in it to be called a PWA. Those are:
- It must run on HTTPS.
- It must have a Web Application Manifest
- It must be kept updated with a Service Worker.
Why HTTPS?
Your PWA, while constantly updating the web page or info within that is sensitive and must be protected from any prying eyes or bad actors that might otherwise like to look at of tamper with that data, needs to be secure end-to-end. And Google, which is a major proponent of PWAs is trying to prevent unsecured communication by encouraging (or punishing) sites to get encrypted. Thus the requirement of a Service worker that would only work if it’s API is communicating over HTTPS. What could be more convincing than sites like LetsEncrypt and CloudFlare are providing no cost or low-cost SSL certificates to encourage encrypted communication?
Get A Web Application Manifest, or Else!
A Web Application Manifest is required for a website to get an ‘Add to home screen’ option available in Google Chrome. A Web app manifest is a typical JSON file will necessary information that informs your browser that you have a PWA that is interacting with a web page. It also informs the browser on how to initiate, open, look and behave just like a native app. A web app manifest includes basic information like, PWA’s name, the icon to use to show it on the home screen of your mobile device, which URL to start at when interacting with the website, some information about the splash screen and its basic visual parameters like background color, etc.
The information listed in a Web Application Manifest is essentially the metadata to let the browser know the theme of the home screen app and it is critical to set these correctly. It also allows you to control how your PWA is launched from the home screen. It also allows you to manage additional properties of the user with subscription services like Google Cloud Messaging. Understand that the purpose of adding a PWA to a home screen is to earn a more trusted relationship with the user for a more robust performing app like a native application. The icon, the splash screen and how it interacts with the user should represent your brand and what it means to the user.
A Web App Manifest is quite different from an app cache manifest. Don’t confuse the two. Unlike the Web App Manifest, an app cache manifest tells the app how to cache online resources to make them available more quickly.
Although the “Add to home screen” option becomes automatically available to you once you add a Web App Manifest to your PWA and the platform knows how to find the manifest since it is mentioned in the “HEAD” of your webpage, know that this option does not automatically available in all browsers or devices. iOS and legacy versions of the Internet Explorer are the main examples of this problem. However, there are additional libraries available on the Internet which can use Javascript to add your PWA icons to the user’s home screens.
The Indispensable Service Worker:
A Service Worker is an essential element that makes the PWA’s magical and robust interaction with the user possible. It is an asynchronous background code (thread in a process) that takes control of and manages all network requests. By basically acting as a proxy server, a Service worker sits between a web application, the browser and the network. Simply stated, a Service worker is Javascript code that runs in the background of a user’s browser to make essential features of a web application available offline using push notifications and synchronization with the PWA in the background.
How Does It Work?
- It is an API that allows developers to predict and intercept requests from the web server and provide robust (albeit limited) response to user requests from a web server. For example, a Service Worker predicts that you would demand an order confirmation or an E-ticket when no Internet access is available (offline access to files). It automatically gets those and stores them in the browser’s cache and serves them up if the Internet connection is unavailable or limited.
- Automatically caching elements of a page for next predictable user action and serving it up from the cache when no network is available. For example, if you are looking at a shirt, it is predictable that you would look at the colors and sizes available. It preloads the page portions with colors and sizes in the cache to make it available if the network fails.
- A Service Worker serves a cached version of a page when it is taking too long to load the page directly from a web server.
- And most importantly a Service Worker does background communication with the web server with things like Push Notifications, Background Sync, and Task Scheduler.
In conclusion, the necessary elements of a PWA like a Web App Manifest, a Service Worker, and HTTPS communication make an online page act robust and responsive like a native app and remove or reduce the need for a fast internet connection with the web server at all times unnecessary.
