Build Progressive Web Apps — Chapter 2
By: Jansutris Apriten Purba
Tags: Architecture, Pwa, Components, Web Development, Pwa Series Jansutris

In building PWA, there are several components that must be used. The following is a brief explanation of some of the PWA components that we will learn. There are some mandatory components and there are also optional components. Mandatory components are components that will always be used every time they create PWA, while optional components are components that do not affect PWA performance but can be used to enrich PWA features.

Service Worker

Service Worker is a script that is run by the browser in the background, which is separate from other scripts on the web page of the browser. Service workers are written using the JavaScript programming language but are called in a different way from JavaScript code in general. By using a service worker, we can utilize resources that have been stored in the cache to display even in offline network mode.

Shell App

Application shell or commonly abbreviated as app shell is an application interface framework built by several page components and other assets. They are stored in the cache first so they can appear instantly when the application is opened. Generally, the page components that are part of the shell app are the components that are always there for all pages such as the header, sidebar, and footer. The components of the page content will be loaded dynamically and asynchronously.

Cache

Cache is a local repository used by browsers to store resources to be used again for future calls without sending more requests to the network. There are 2 types of cache in the browser, namely Browser-managed cache and Application-managed cache. The browser-managed cache is a temporary cache for storing browser download files automatically. This type of cache is set by the browser and is not available in offline network mode. The application-managed cache is a cache created by the application using the Cache API and separate from the cache that is managed by the browser. This type of cache that we can use to store resources and can be displayed in offline network mode through the service worker.

Web App Manifest

Web app manifest is a simple JSON file that controls how applications are displayed and run on the user’s side. Generally, this file is named manifest.json. When the application is first opened in the browser, the browser will read the manifest file, download the resource and display the content.

Fetch API

The Fetch API is one of the web APIs that can be used to retrieve resources from servers inside and across networks asynchronously. If you are familiar with AJAX techniques, then you will be very familiar with the fetch API. The Fetch API is the same as using the XMLHttpRequest API but has some better features.

Progressive Enhancement

Progressive enhancement is an approach in web development where we start the development of features that are common in all browsers. Then we gradually increase functionality in accordance with the capabilities of the type of browser used by each user. Every time we use a web API we need to pay attention to whether the API is already supported by the default browser of our application users. We also need to take care when the browser used by users does not yet support the web API features that we use. For example, do a fallback to similar features that have been supported or display a message to update the browser version or urge to always use a modern browser.

PWA Architecture Styles

PWA Architecture Styles means the approach used in building PWA in terms of the back-end technology used and application performance requirements. Some terms related to this include the shell app, server-side rendering, client-side rendering, and so on.

IndexedDB

IndexedDB is a NoSQL-based local storage system in the browser. We can store any data in the user’s browser for application purposes. You can perform a search, update and delete data actions.

Push Notification

Notification is a popup message that appears on the user’s device. Our PWA application supports notification appearing to notify users about certain updates in the application. The PWA application can also accept push events sent by the server and display popup messages even if the user is not opening the application.

Workbox

Workbox is a collection of libraries and tools that we can use to generate worker service files, pre-caching, routing, and runtime-caching. Workbox makes it easy for us to write PWA code with a simpler and easier to manage syntax.