PWA Learning and Practice series articles have been compiled into gitbook-PWA Learning Handbook, and the text has been synchronized to learning-PWA-ebook. Please indicate the author and source of reprint.

This is the second article in the PWA Learning & Practice series. All the code in this article can be found in the manifest branch of learning-pWA (after git clone, pay attention to switch to the MANIFEST branch).

PWA, as one of the hottest technology concepts at present, has great significance for improving the security, performance and experience of Web applications, and is worth our understanding and learning. If you are interested in PWA, please pay attention to the PWA Learning and Practice series.

1. The introduction

We know that in Chrome (and some modern browsers), you can add a website you’re visiting to the desktop, which generates a sort of “shortcut” icon on the desktop, and when you click on that icon, it gives you a quick access to that website (Web App). Take the example of the demo from the first article, which looks like this when it is added to the desktop and reopened:

However, there are some important features for PWA:

  • A Web App can be added to the desktop and has its own App icon;
  • Also, when launched from the desktop, it will have its own “open screen” just like the native app.
  • Furthermore, the Web App looks almost like a Native App — there is no browser address bar, toolbar, and it seems to run in a separate container like a Native App.

Like this:

Next, we will implement this effect of PWA based on a demo of a common Web App mentioned in the previous PWA Technology Learning & Practice article, 2018: Start Your PWA Learning Journey. Or directly from Github Clone Learning -pwa (github.com/alienzhou/l…

2. Web App Manifest

The Manifest is a JSON-formatted file that you can think of as a list of resources that specify a Web App desktop icon, name, open screen icon, operation mode, and so on.

Manifest is designed to install Web applications on the device’s home screen, providing faster access and a richer experience for users. – the MDN

Take a look at the contents of the manifest.json file in learning-pwa

{
    "name": Book Search."short_name": Check for "book"."start_url": "/"."display": "standalone"."background_color": "# 333"."description": "A small WebAPP for searching books (based on Douban Open interface)"."orientation": "portrait-primary"."theme_color": "#5eace0"."icons": [{
        "src": "img/icons/book-32.png"."sizes": "32x32"."type": "image/png"
    }, {
        "src": "img/icons/book-72.png"."sizes": "72x72"."type": "image/png"
    }, {
        "src": "img/icons/book-128.png"."sizes": "128x128"."type": "image/png"
    }, {
        "src": "img/icons/book-144.png"."sizes": "144x144"."type": "image/png"
    }, {
        "src": "img/icons/book-192.png"."sizes": "192x192"."type": "image/png"
    }, {
        "src": "img/icons/book-256.png"."sizes": "256x256"."type": "image/png"
    }, {
        "src": "img/icons/book-512.png"."sizes": "512x512"."type": "image/png"}}]Copy the code

As you can see, the JSON configuration file above is very intuitive, and we can transform our Web App by declaring the values of each property. Here’s a brief description of each specific value.

2.1. name, short_name

Specifies the name of the Web App. Short_name is actually a short name for this application. Generally, the system uses short_name when there is not enough space to display the name of the application. As you can see in this example, the book search application displays the name short_name book search on the desktop.

2.2. start_url

This property specifies the URL to load when the user opens the Web App. The relative URL is relative to the manifest. Here we specify start_URL as/to access the root directory.

2.3. The display

Display controls the display mode of the app and has four values to choose from: fullscreen, standalone, minimal-ui, and Browser.

  • fullscreen: Full screen display, will try to fill all display areas;
  • standalone: Standalone app mode. Apps that open in this mode have their own launch icon and do not have the browser’s address bar. So it looks more like a Native App;
  • minimal-uiAnd:standaloneIn contrast, this mode has more address bars;
  • browser: Generally speaking, it will open in the same style as normal browser use.

Let’s look at the differences between the four models:

Of course, the exact style of presentation varies from system to system. The virtual keys in the example are hidden by default in fullscreen mode.

2.4. “orientation

Controls the direction of the Web App. Setting certain values, such as portrait-primary in the example, will have a screen-like effect (no rotation). Specific values include: any, natural, landscape, landscape-primary, landscape-secondary, portrait, portrait-primary, portrait-secondary.

2.5. The ICONS, background_color

ICONS are used to specify the desktop ICONS of an application. ICONS themselves are an array, each element containing three attributes:

  • Sizes: size of the icon. By specifying the size, the system will select the most appropriate icon to display in the corresponding position.
  • SRC: indicates the file path of the icon. Note that the relative path is relative to the manifest.
  • Type: indicates the image type of the icon.

It should be noted that the “open screen” I’ve been referring to is actually a background color + icon display mode (there is no such thing as an open screen). Background_color is the default background before the applied style resource is loaded, so it is displayed in the open screen. Background_color plus the ICONS we have just defined form the “open screen” of the Web App when it opens.

2.6. theme_color

Defines the default theme color for the application. This can sometimes affect the way the operating system displays applications (for example, on Android’s task switcher, theme colors surround applications).

2.7. The description

The meaning of this field is very simple, it is a description of the application.

3. Use the Manifest

Once the manifest file is created, the next step is to figure out how to make it available to our Web App — it’s as simple as adding a link tag to the head:

<! Add the following meta tags to index.html -->
<link rel="manifest" href="/manifest.json">
Copy the code

This way, on Android you can add your application to the desktop using Chrome and have the PWA effect at the beginning of this article. You can verify the contents of manifest.json here: the Web Manifest Validator

If you see this, congratulations, you already know how to make our Web App look more like a standalone Native App. Is it very simple?

4. iOS, Windows?

All of this looks good, but is it really so?

So far, we’ve been working pretty well: create manifest.json, add meta tags, and add our Web App to the desktop. However, if we visit our site on the iPhone and “add to the home screen”, you will find – everything is broken! Yes, you read that right. Everything is back to normal.

If you’ve seen the manifest compatibility on Caniuse, it’s even more troubling. But don’t be too sad. On iOS and Windows, we have other ways

5. Processing mode in iOS (Safari)

Safari does not support Web App Manifest, but it does have its own head tags that define the appropriate resources and presentation form:

  • apple-touch-icon: desktop icon, by adding in head<link rel="apple-touch-icon" href="your_icon.png">Can. You can also add sizes to indicate the system for use on all platforms (iPhone, iPad…). Use the most appropriate icon
  • apple-mobile-web-app-title: Application title. Note that you need to use meta tags here<meta name="apple-mobile-web-app-title" content="AppTitle">
  • apple-mobile-web-app-capableSimilar to display in the manifest, the standalone mode is accessed by setting it to yes, which is also a meta tag<meta name="apple-mobile-web-app-capable" content="yes">
  • apple-mobile-web-app-status-bar-styleThis changes the style of the status bar on iOS mobile devices and only works in standalone mode.<meta name="apple-mobile-web-app-status-bar-style" content="black">On the iPhoneX, black causes the status bar to show nothing.

Here are the Settings for the Learning-PWA project

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content=Book Search>
<link rel="apple-touch-icon" href="img/icons/book-256.png">
Copy the code

6. Processing mode in IE

Like Safari, IE has its own meta tag to indicate the appropriate resource. Some of the most important ones are:

  • application-name: specifies the name of the app
  • msapplication-TileColor: specifies the background color of the tile
  • msapplication-xxxlogo: ICONS used for different sizes of tiles, including these:msapplication-square70x70logo, msapplication-square150x150logo, msapplication-wide310x150logo, msapplication-square310x310logo

Here are the Settings for the Learning-PWA project, where the icon Settings reuse existing icon files for convenience

<meta name="application-name" content=Book Search />
<meta name="msapplication-TileColor" content="# 222">
<meta name="msapplication-square70x70logo" content="img/icons/book-72.png" />
<meta name="msapplication-square150x150logo" content="img/icons/book-144.png" />
<meta name="msapplication-square310x310logo" content="img/icons/book-256.png" />
Copy the code

Write in the last

This paper mainly explores how to make the Web App added to the desktop have the use experience closer to Native App (desktop icon, open screen page, shell…). .

Therefore, we used Web App Manifest. We can use it by adding the manifest file and setting the corresponding meta tag in the HTML. In Safari and Ie, this can be done with some unique meta and link tags. Isn’t it simple and convenient? This allows us to change our Web App at a very low cost. This is one of the ideas of the PWA concept: you can incrementally improve the capabilities of your Web App, while also providing incremental enhancements in compatibility based on browser support.

Well, that’s all for this article. I hope you like it! In the meantime, if you want to learn more about the technology behind PWA, please check out the follow-up PWA Learning & Practice articles.

PWA Technology Learning and Practice series of articles

  • Start your PWA learning journey in 2018
  • Learn to use Manifest in 10 minutes to Make your WebApp more “Native”
  • Start making your WebApp available offline today
  • Article 4: TroubleShooting: TroubleShooting FireBase Login Authentication Failures
  • Keep in touch with Your Users: The Web Push feature
  • How to Debug? Debug your PWA in Chrome
  • Enhanced Interaction: Use the Notification API for reminders
  • Chapter 8: Background Data Synchronization using Service Worker
  • Chapter nine: Problems and solutions in PWA practice
  • Resource Hint – Improving page loading performance and Experience
  • Part 11: Learning offline Strategies from workbox

The resources

  • Web App Manifest (MDN)
  • Configuring Web Applications (Safari)
  • Pinned site Enhancements (Internet Explorer)
  • caniuse manifest
  • Web Manifest Validator
  • Address Bar Matches Brand Colors
  • Learning-pwa /tree/manifest