Build Progressive Web Apps — Chapter 3

Preparation and Tools

Jansutris Apriten Purba
Nov 24 · 5 min read
Photo by Fleur on Unsplash

To make PWA we need:

We will focus more on discussing technologies in PWA. For other things outside of it such as interface design will only be discussed as needed and the reader simply copies and paste.


When using a traditional web interface, each page will have its own HTML file. Thus, when going from one page to another, there is a time lag in which the user must wait for the page to load and display something. This is different from the original application in general. For example, when using the Twitter application on a mobile device without a connection, we cannot see the timeline content because there is no internet connection to download the data, but we can still see some of the UI components. This shows that the original application only installs its data from the server, while other UI components have been installed since the beginning and will appear immediately when the application is opened.

Twitter application on mobile devices without connection

In the introductory module, we have learned that one of the goals of PWA is to provide as similar an experience as possible using native applications. If our PWA still has to load each page before displaying it to the user, that means we haven’t yet provided an experience similar to a native application. By using the PWA technique, we can store the application UI components on the device, so the application can directly display the interface before displaying data from the server. This technique is called Application Shell.

What is Application Shell?

Application shell or abbreviated app shell is one of the techniques in the Progressive Web App to create an interface that will be loaded instantly without having to wait for a response from the server. The shell app only consists of minimalist HTML, CSS and JavaScript files that are stored in the cache so the application can work offline. Because it is stored in the cache, users do not need to ask the shell app to the server repeatedly every time they open the application.

single-page app (SPA)

The shell app is just a technique, not a library or framework. If the reader has built a single-page app (SPA), the reader has actually implemented something very similar to the shell app. We can create a shell app with or without a framework (framework agnostic).

Benefits of Using the Shell App

There are many advantages to using a shell app in building a website. Some of them are as follows:

When to Use the Shell App

The app shell is suitable to be applied in almost all scenarios for making websites or web-based applications. Generally, a website must have the same components on every page, such as the header, footer, or sidebar. These repetitive components can be stored in the browser cache so that when a user accesses another page, the browser only needs to respond to the content associated with that page.

It’s just to implement App Shell, you need to change the paradigm of web application development a little. From what we usually make in the form of pages per page or multi-page app (MPA), it is the basis of a single page or single page app (SPA). The page content data request is done asynchronously or known as AJAX (Asynchronous JavaScript and XMLHTTP). By using the AJAX technique, changing page content no longer needs to reload the entire page.

Terms of Using the Shell App

Some things that must be met to use the App Shell technique include:



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