PWA Technologies

As this guidebook is not primarily for developers, the technical issues are not its primary focus. However, the basic terms play an essential role in a comprehensive understanding of PWA technologies. Thus, we decide to introduce them to give you an overview of how it works and why its functions are superb.

App Shell

An app shell (or app shell architecture) is a technology to create a PWA that loads consistently and quickly on your users’ displays, much like native apps. It can enhance the user experience by launching a static rendered page (a standard skeleton of all pages). At the same time, the browser automatically downloads and switches to the full client version after the code loads. 

It contains the minimum amount of HTML, CSS, JavaScript, and any other static resources that create the framework for your page except for any page-specific content. In other words, it only includes UI but not dynamic data.

It is a good choice for single-page apps with JavaScript-heavy architectures. This solution relies on caching the shell aggressively (through a service worker). The dynamic content for each page is then loaded using JavaScript. An app shell is beneficial for quickly displaying some initial HTML on the screen without a network.

Service Worker

When it comes to PWA technologies, one of the first things that often instantly come to our minds is Service Worker.

A Service Worker is a type of web worker that makes the web content able to run scripts in the background of your browser independently from a web page. This allows you to access services that do not require a web page or user involvement. 

With PWA technologies, your web app can precache elements to load rapidly in the next visit. This is because of the caching and storage APIs available to service workers. A Service Worker allows your web app to intercept and manage network requests.

For instance, your PWA can collect various caches, reduce data traffic, and preserve offline user-generated data until it reconnects. This caching enables developers to concentrate on performance, helping online apps have the same rapid loading and regular updates as native apps.

Service Workers offer various services, for instance:

• Intercepting HTTP/HTTPS requests so that your app can choose whether to deliver content from a cache, a local data storage, or the Internet.
• Receiving push notifications from your server.
• Allowing the user to work offline by storing data until the browser reconnects to the network (background synchronization).

Web App Manifest

The web app manifest is a JSON file (typically named manifest.json.) that tells the browser about your PWA. It helps your PWA know how it should behave on the user’s desktop or mobile device. The app’s name, author, icon, version, description, and list of all necessary resources exist in the PWA manifest. 

When a web browser first connects to a network, it scans the manifest file, downloads the resources, and caches them locally. The browser then uses those local caches to render the web app when no network connection is available.

Chrome, Edge, Firefox, UC Browser, Opera, and the Samsung browser all support manifest files, while Safari only allows partial support.

Cache

A cache is a hardware or software component in computing that saves data to serve future requests for that data more quickly. The cache data could be the product of a previous computation or a copy from elsewhere. There are two types of browser cache, namely browser-managed cache and application-managed cache (service worker).

• Browser-managed caches

They are a temporary storage space on your computer where your browser saves files it downloads to display websites. Any website’s documents, including HTML files, CSS style sheets, JavaScript scripts, graphic images, and other multimedia assets, are cached temporarily. This cache is automatically managed by the browser and is not accessible offline. 

• Application-managed caches

They are created using the Cache API outside the browser-managed caches. Applications (through window.caches) and the service worker can use this API. Application-managed caches contain the same kinds of data as a browser-managed cache; however, they are accessible offline (e.g., due to the offline support of service workers).

Splash Screen

A splash screen is a screen that appears while a program or other item is loading on a website or in software. When the load is finished, the user is usually redirected to a more functional screen.

Theoretically, the splash screen is a start screen or waiting for the screen that orients users and provides them with something to look at while waiting for the operating system to boot up.

A splash screen’s most typical components are a company’s name and logo. Sometimes, it also includes the brand’s slogan or motto. This creates an excellent first users’ perception of the app and enhances brand awareness, particularly among users with low attention spans.

Although splash screens are only visible for a few seconds, it is critical as the first step to engage customers with the business. To see splash screens in reality, you can go through the top 100 examples of PWA, add some to your mobile home screen, and launch the apps.

API

Application Programming Interface (API) is a set of programming codes that allows data transfer between software products. APIs are available for both desktop and mobile use. Also, they are often used for building graphical user interface components and allowing programs to request and receive services from each other.

For example, your mobile app connects to the Internet when in use, sends data to a server that retrieves and interprets it, takes the appropriate actions, and sends it back to your phone. The software afterward analyses the data and displays the information you requested in an understandable format. All of these happen thanks to APIs.

PWA technologies, to access hardware functionality, have to utilize Web APIs. PWA can be as fully functional as a regular mobile app when all hardware access APIs are supported in the browser except for a few features.

Dynamic Content

Dynamic content refers to all of the data, graphics, and other resources outside the app shell that your web app requires to work. Although the app shell is designed to load your site’s content quickly, customers may anticipate dynamic content. In this case, your app will need to fetch data depending on the user’s needs.

Put another way, dynamic content is unique content that adjusts to the users’ data and access time to deliver an enjoyable online experience. 

The user’s location, weather & temperature, technical feasibility (using browser and device), and so on are several examples of dynamic content. Suppose the user has previously visited the website and possibly made an account. In that case, other more particular data can be utilized to personalize the content. The user’s name, gender, watched products, and prior actions are some of the examples.

Last words

PWAs differ from both websites and native apps, as we’ve already mentioned. Digging deeper into some of the underlying technology through the above terms will aid you in gaining a better grasp of PWA technologies and their genuine potential. Although this chapter does not cover all of the PWA terms, it is sufficient for non-developers to gain a brief understanding.