Build Progressive Web Apps — Chapter 2

Components & Architectural Pattern of PWA

Jansutris Apriten Purba
Nov 20 · 6 min read

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 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.

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 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 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.

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 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 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 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.

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 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.


PWA Architectural Pattern

Image taken from Google Images

Before starting to build a PWA, we first need to determine our web application architecture. There are two architectures used in building a web in terms of how the server returns page content, namely Server-Side Rendering (SSR), and Client-Side Rendering (CSR). SSR is a pattern where each web page is rendered on the server-side and returned to the browser in the form of HTML that is ready to be displayed. While CSR is a pattern where the server only returns data (usually in JSON or XML format) for later rendered on the client-side (browser) by JavaScript.

In addition to the terms, SSR and CSR, web architecture patterns are also known in terms of how a page’s content is loaded, namely a multi-page app (MPA) and a single-page app (SPA). MPA is the architectural name used when our website consists of several HTML pages that make it up.

For example, if we have a social media website then we can have a URL page: domain.com/home.html, domain.com/profil.html, domain.com/timeline.html, or domain.com/home, domain.com/profil / username, domain.com/timeline/ and so on. Every time the browser moves from one page to another, the browser reloads the page and replaces the HTML content from the previous page to the new content.

The SPA is an architecture that only uses one HTML file. This one file is where various components that make up our website are displayed without reloading the page content. When the page URL changes, the browser only changes certain parts of the content using JavaScript. For example, for the same example as the above scenario, when a page moves from domain.com/home to domain.com/timeline, the page only changes in the main content section. The common parts appear on all pages such as headers, footers, sidebar, including the <head> tag and the scripts in the footer are not reloaded. This SPA mechanism makes data transmission lighter because the server will only send portions of content that have changed and the browser does not have to reload the entire page.

When creating web applications, especially PWA, we can use a combination of several existing architectural patterns. Some combinations of architectural patterns that can be applied are MPA + SSR like websites in general, SPA + SSR namely SPA with HTML content that is directly displayed, and finally SPA + CSR, SPA with JSON data rendered on the client-side.

The main benefit of the presence of PWA is actually to improve the functionality of existing web applications. Maybe you have an assumption that a PWA should be created using JavaScript frameworks such as React, Vue, and Angular. However, PWA can actually be built without using any framework. PWA can also be built without making SPA, which means we can still use MPA to implement PWA. If you already have a web application or website that is already online, you can implement the PWA component on the website.



Easyread

Easy read, easy understanding. A good writing is a writing that can be understood in easy ways

Jansutris Apriten Purba

Written by

Love Coding, Traveling, Watching Film & Music

Easyread

Easyread

Easy read, easy understanding. A good writing is a writing that can be understood in easy ways

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade