WEB Application Checklist

Original

The original Book of Jane: Https://www.jianshu.com/p/5c96242188e8

Outline

1. What is a Web application checklist
2. "Manifest file": Application of Web App Manifest specification
3. Content of Web application manifest file

1. What is a Web application checklist

The Web app manifest file is a simple JSON file that provides useful information about the app (such as the name, author, icon, and description of the app) in a text file. But more specifically, the Web App manifest allows users to install web apps on the device's home screen, and allows developers to customize the splash screen, template colors, and even open URLs.

2. "Manifest file": Application of Web App Manifest specification

If you take a closer look at the HTML of a PWA Web App home page, you might notice the following line of code:

<link rel= "manifest" href= "/manifest.json" >

This link points to a file that is called a "manifest file." This file is just a simple JSON file that follows the Web app Manifest specification and enables developers to control the look and feel of the different elements in the app. It provides information about the Web app, such as name, author, icon, and description.
It brings a number of benefits. First, it enables the browser to install a WEB app to the device's home screen to provide users with faster access and a richer experience. Second, by setting the branding color in the manifest file, you can customize the splash screen that the browser automatically displays. It also allows you to customize your browser's address bar to match your brand color.
Using a manifest file really makes the Web app look more perfect and provides a richer experience for your users.

3. Content of Web application manifest file 3.1, startup file path

"Start_url": "/index.html"

The Start_url is used to specify the URL to load when the user launches the app from the device. If a relative path is given, then the underlying path is the path to the manifest. If you want to track how many people are accessing the site through the Home screen icon, you might want to append the tracking code to the query string, such as a URL such as/index.html?homescreen=1. In this way, your WEB analytics package can tell which users are arriving through the home screen icon.

3.2, the display mode of the device

"Display": "Standalone"

There are several different options for how a Web app appears on a user's device. For example, you can choose the display mode that best fits your needs. Display mode represents how Web apps are presented in an operating system environment: fullscreen, standalone, minimal-ui, or browser.
The impact of each display mode on Web apps is as follows:
Fullscreen-Opens the Web app and occupies the entire available display area.
Standalone-Open the Web app to look like a standalone native app. In this mode, the user agent excludes standard browser UI elements such as the URL bar, but can include other system UI elements such as the status bar and the System return button.
Minimal-ui-This pattern is similar to fullscreen, but provides an accessible set of minimal UI elements for end users, such as back buttons, forward buttons, overloaded buttons, and some ways to view Web page addresses.
Browser-Open the Web app using the standard browser built into the operating system.
In the Web app manifest, the display property is optional and by default it is displayed in browser mode. These different display modes open up a world of possibilities for developers, and it's important how you want Web apps to appear. For example, if your Web app is a game, it's better to use standalone display mode to make sure your Web app is more immersive. If your Web app is an online publication, you might choose Minimal-ui or fullscreen display mode to ensure that you focus on text and eliminate distractions. It's all about your control, but remember that whatever style you choose will affect the way your Web app feels, so make an informed choice!

WEB Application Checklist