Build Progressive Web App — List
Chapter 0 — Introduction and Case Study of PWA
Chapter 1 — Strengths and Weaknesses of PWA
Chapter 2 — Components & Architectural Pattern of PWA (You’re here)
Chapter 3 — Preparation and Tools
Chapter 4 — Create a Simple SPA (Single Page Application)
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.
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
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
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
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.
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.