Build Progressive Web Apps— Chapter 0
Introduction and Case Study of PWA
Build Progressive Web App — List
Chapter 0 — Introduction and Case Study of PWA (You’re here)
Chapter 1— Strengths and Weaknesses of PWA
Chapter 2— Components & Architectural Pattern of PWA
Chapter 3— Preparation and Tools
Chapter 4— Create a Simple SPA (Single Page Application)
All of this started from my interest in Progressive Web Apps that were introduced by Dicoding to me. However, at first I was hesitant to learn PWA because I did not have enough budget to buy courses at Dicoding.com, because the price of the course is worth 550 thousand rupiah (not intending to promote). Finally, I saw a full scholarship that would be given by Indosat Ooredo under the name IDCAMP. After following the selection quite rigorously and fulfilling the scholarship requirements by working on a beginner web development course on coding I finally managed to get the scholarship announced on an email on “Membangun Progressive Web Apps”.
This training will guide developers to develop Web applications using cross-platform, efficient and attractive Progressive Web Apps.
Material: Promises and fetch, Service worker, Application shell, Cache API, Indexed DB, Web Push and Workbox.
Thank you Indosat & Dicoding!
And without lingering, at this meeting I will share my experience of what I already know about what PWA really is and how it is implemented. I will share the following tutorial in several series.
Smartphones are No Longer a Luxury Item
Nearly every person, both upper and lower middle class, can afford it. Today’s smartphones are dominated by Android and iOS. They not only offer telephone and sms services. But doing almost all activities that we can do on the computer. Examples generally, on our computers can browse, then the smartphone too. Today more young digital generations are first acquainted with the internet via smartphones than via computers.
To facilitate smartphone users in interacting with their services, many companies develop a separate application that can be installed via the Play Store/App Store. Native mobile applications have many advantages including:
Centralized — any application can be found on Play Store / App Store.
Work without the internet — native mobile applications work well without the need to be connected to the internet.
Having hardware access — mobile applications can natively maximize all hardware features possessed by smartphones.
Fast — because the mobile application is natively integrated perfectly with the smartphone system. It is able to maximize all of the hardware features it has so that native mobile application performance becomes fast.
Interact with other applications — native mobile applications on smartphones have special mechanisms that are prepared by operating system developers so that they can interact directly with other applications that are currently installed.
When we compare it with web-based applications, native mobile applications have different development environments and techniques. Therefore, even if a company already has a web-based application that supports its business, when they want to create mobile-based applications, they will need additional programmers. This new programmer will create and manage native mobile applications. This will certainly increase company spending.
Alex Russel & Frances Berriman
The term Progressive Web App was introduced by Alex Russel, a Google Chrome engineer, and Frances Berriman, a designer who worked for Google in 2015. Google defines PWA as follows:
Progressive Web Apps use modern web capabilities to deliver an app-like user experience. They evolve from pages in browser tabs to immersive, top-level apps, maintaining the web’s low friction at every moment.
Main Purpose of PWA
Main purpose of PWA is to enable web developers to change existing websites so that they can behave like native mobile applications without making many changes or adding special programmers. This goal can be achieved thanks to a collection of web technologies. He can take advantage of the advantages of web and mobile applications natively at the same time. This collection of technologies allows traditional web applications to be accessed without an internet connection (offline), can be installed on the homescreen like a native mobile application, can synchronize data to the server, can send push notifications, and others. Characteristics of a PWA are:
Progressive — Works for every user. No matter what the browser, no problem. The reason is, PWAs are built with progressive improvement as the core concept.
Responsive — Matches every form factor: desktop, mobile, tablet or whatever comes next.
Independent connectivity — Enhanced with service workers to work offline or on low-quality networks.
Application-Like — Feels like an application for users with application-style interaction and navigation because they are built on a shell application model.
Fresh — Always up-to-date thanks to the service worker update process.
Safe — Provided via HTTPS to prevent snooping and ensure the material has not been tampered with.
Can be found — Can be identified as an “application” thanks to the W3C manifest and service worker registration coverage. This allows search engines to find it.
Can be reengaged — PWAs can be reengaged with features like push notifications.
Installable — Allows users to “save” the applications they find most useful on the home screen without the hassle of application stores.
Linkable — Can be easily shared via URL. The installation is easy.
PWA Case Study
Although it is still classified as a new technology, many world class websites have implemented PWA. You can see a list of those sites that have implemented PWA on PWA.rocks and Google Web Case Studies.
Here are some names that you may already know:
Twitter Lite — One of the world’s largest social media sites.
Pokedex — an example of PWA application containing a mini encyclopedia of Pokemon species characters.
BookMyShow — Ticket booking site (cinema, concerts and other events) from India.
Telegram Web — One of the world’s largest messaging applications.
Wego — Travel service provider site.
Alibaba — Alibaba is the world’s largest online business-to-business (B2B) sales site.
BaBe — Indonesian article curation site.
You can try some of the applications above by opening it in the Chrome browser on the smartphone so that it is drawn in the head how it forms into a PWA application.