PWA — Combining the Bests of Mobile and Web Worlds
I heard about Progressive Web Applications a few years ago. I didn’t do too much research on this topic back then. I remember that I have come across an article that started describing Progressive Web Applications with a sentence similar to this: “The websites developed using special coding techniques which can work as mobile applications”. Frankly, this sentence, “special coding techniques” words specifically put me off that topic. I remember that I thought this probably needs different coding languages for different mobile devices. It will be a structure that would bring too much workload and that is going to be hard to implement.
Last month(November 2021) I had the chance to attend some learning lounges and workshops of Chrome Dev Summit organized by Google. One of the workshops was called “Your first Progressive Web Application”. As far as I understand from its title, within the 3-hours timeline of this workshop, We were expected to learn and develop a web application that can work as a mobile application which means it can be installed on mobile devices and operating systems. I didn’t see it very likely, but I signed up anyway. Then I received a registration confirmation email that says only basic knowledge of CSS, HTML and javascript is sufficient. But, how come? This email was saying that you don’t need to know anything extra except the most basic web technologies. I was a little more interested, but deep down I was still thinking they would teach how to bundle a web project by using some kind of tool or a third party and turn it into a native application by packaging it. But I couldn’t be more wrong!
The gravity center of technology is the web. The best way to seamlessly combine the mobile world with the web is the Progressive Web Apps. At least it is the best until something better comes out. 🙂
Note: Progressive Web Application will be mentioned with the acronym PWA.
PWA doesn’t have a concrete technical definition. A PWA is just a web app that uses several web browser APIs and abilities in the web platform using some progressive extensions. It’s more like a set of best practices and techniques that allows your users to enjoy your website with an excellent app-like experience on every platform with the same code base. So it’s not like you have a PWA or not; it’s more like your website is more or less PWA.
Progressive Web Application was introduced by Google as a name, adopted by other companies like Firefox, Opera, Microsoft, Samsung, etc., and continued to be used. But of course not Apple. Even though Apple does not openly promote, PWAs work on Apple devices. Actually, the idea was born with the standalone apps that Apple come up with. Later this idea was enhanced and become more popular with the name progressive web apps.
The bests of mobile and web world
I liked the idea to use the example; “intersect of two sets” of math. PWAs are exactly what come from the intersection of Web and Mobile sets and contain some of the best features of each set.
-From the web world-
Links and discoverability: Since this is a web application you can use links to create posts on social media platforms and share direct links to your application, also your application will be available online which means discoverable by search engines.
Easy to deploy & update: On mobile applications deployment and update process is a big workload and it's a thorny process. And yet on web applications deployment is way too much easier than mobile apps. Since web applications mean that there are some files on the webserver and the only thing that needs to be done in the name of deployment is to update those files. To be able to deploy a mobile app, you need to follow the steps and restrictions of the applications store that you want to publish or update your app, create a change request on the app store and wait for them to approve that change request(approval might take hours/days), even if your deployment is published on app store smoothly, your users needs to go to the store and get the updates that you share.
Standards and tools: Different than the regular mobile applications, PWAs are served over HTTPS. So we can say that PWAs get web standards and tools the advantages from the web world and ensure secure communication with the power of web standards.
-From the mobile world-
Offline access: In mobile native applications, even though there is no internet connection or available server, users are able to launch and use some parts(sometimes all) of the applications. Offline access is exactly why product owners decide to make mobile apps in addition to web applications. PWAs offer a non-interrupted user experience to the user with limited internet access.
Installed icon and standalone: Just like a mobile app, PWAs have an icon on the home page of the mobile devices or on the application list on desktops and works independently when they are installed.
Push notification: Push notifications are also a very powerful feature of the mobile world. Even though the application is not launched and working, PWAs can manage and send notifications to the native device.
Performance and UX: Performance is always better at mobile applications. Because mobile applications store extremely large data on the device during the installation. Also when we take a look at the results of surveys made, it's obvious that the users like mobile applications UX designs over web applications designs.
If you are using Google Chrome, you must have come across this page when you do not have an internet connection. This cute but annoying dinosaur is called Downasour. The most groundbreaking thing that comes with PWA is offline access. So we bid farewell to this Downasour.
How would a website work without internet access?
The native applications can open without an internet connection because, during the process of downloading and installation of the application, crucial resources of the application are stored in the device. Those resources can be managed based on how much offline access your mobile application will have. That is exactly what happens in a PWA as well.
Before we go deep into the details and how it works part. It would be better to explain what's in the dough of a PWA.
PWAs don’t depend on a single API. There are many web technologies that are used to create progressive web apps.
The minimum requirements to meet for an application to be a PWA:
- web manifest
- service worker
These two make sure that browsers will interpret that this is a PWA, and serve users with the ability to install and provide other PWA enhancements.
Manifest file
The web app manifest is a JSON text file (usually named manifest.json or webmanifest.json). This file contains all the necessary information to download and run PWA just like a native application. The manifest can contain many variables all serving many different pieces of information about the native behavior of the PWA.
Service worker
A service worker is a script that allows managing the assets in cache and intercepting/controlling network requests from the web browser. Service Workers are written in JavaScript. It is a browser feature, its role is different than regular JS scripts in websites, ie. it doesn’t have access to the DOM.
As it is visualized in the picture, standard web apps make direct requests to the web server, with the progressive enhancements of the web, the service worker acts as a network proxy for the web application. Since the service workers can intercept network requests and modify responses, in a certain way it is mandatory for service workers only to run over HTTPS so that it can be secured.
The service workers can synchronize data in the background, manage cache, handle push notifications and intercept network requests. In fact, they are also able to check the availability of the server, store content on the cache, and serve that content to the UI part of the PWA. Just like any other web worker, service workers work independently from the UI context.
How to install?
Since PWAs are multiplatform applications, there are many ways to install them based on the device and browser that you are using. In Chrome, if the application that you are visiting is a PWA, you will see the little install icon on the right side of the address bar. In iPhones, you can only use Safari to install PWA, open the toolbar menu and click add to Home Screen button.
In addition, you can use some third parties to turn your PWA into a package that can be published on application stores.
There are many great PWAs on the internet. And the count will only be growing in the upcoming years. Make sure that this great technology is on your radar!
