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
Chapter 3 — Preparation and Tools (You’re here)
Chapter 4 — Create a Simple SPA (Single Page Application)
To make PWA we need:
- Chrome browser version 52 or above.
- Web server for Chrome, or the webserver of your choice
- A text editor (Sublime Text, Visual Studio Code, Atom, Notepad ++, etc.)
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.
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?
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:
- Experience like a native application. By applying the shell app technique, we can provide web applications with interfaces, navigation systems to offline support that are very similar to native applications.
- More efficient. Although in general, the price of internet packages is quite affordable, there are still areas where internet packages are still expensive at a slow pace. By using the shell app we can help users save data usage because not all data must be downloaded repeatedly.
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.
Terms of Using the Shell App
Some things that must be met to use the App Shell technique include:
- Use Service Worker to bypass the request path. In a standard web application, every asset request will be directed to the internet network directly by the browser. By using Service Worker, we can sort out which requests need to be directed to the network and which requests are sufficiently accommodated using assets that have been stored in the browser cache. You can find more about Service Worker in module 3.
- Keep the main asset for the shell app in the cache. So that applications no longer need to send requests for the same assets, especially for use in the shell application, we need to store them in the browser cache using the Cache API. You can find more about the Cache API in module 4.