The text/cold wild goose

What interesting new features did Chrome 89 bring with it when it was released in early March?

background

In the past decade or so, Web technology has advanced by leaps and bounds, and Chrome has done more than any other. I’ve talked about this in a previous blog post:

  • Lesson 5: How Chrome works

  • Third party cookie will not be allowed to use immediately, Internet advertising how to play?

Chrome is now more than just a browser. It’s a platform that sets the direction of Web technology, behind Linux, iOS, Andirod, and Windows.

Importantly, Chrome hasn’t stopped innovating and is pushing the Web forward.

Chrome has been releasing a new version every six weeks. Recently, Chrome announced that it will speed up the release process by releasing a new version every four weeks.

Being on the big front end, understanding Chrome’s evolution can help us understand trends in the industry as a whole.

Chrome’s most noteworthy new features go in two directions:

  • New capabilities, new apis, such as Web NFC, can be used in real application scenarios to bring business innovation;

  • Changes in security and privacy rules, such as disabling third-party cookies, may affect service stability.

Starting from this article, I will give a detailed interpretation of each version of Chrome under the title of “The Great Chrome Browser” and share some of my immature thoughts. Welcome to follow the official account of Hanyan Talk.

TL; TR

To avoid taking up too much public resources, let me summarize this briefly 🙂

Here, you must like Chrome Platform Status, a site that catalogs every feature in every version of Chrome. And WHAT I do is nothing more than to be a hard-working porter

Detailed interpretation

I won’t be able to cover all 30 new features, so I’ll just pick five that are interesting, and check out Chrome Platform Status for the rest.

Top-level await

As a JavaScript programmer, Async/Await is one of my favorite features, freeing me from the hell of promise.then. “Love me, love my dog,” “top-level await” is very nice.

The following HTML, which will return an error on Chrome 88: “Uncaught SyntaxError: Unexpected Reserved Word “, will execute correctly on Chrome 89. This is because Chrome 89’s V8 engine has been upgraded to V8.9 with top-level await support.

<! DOCTYPE html> <head> <title>Top-level await</title> </head> <body> <script type="module"> await Promise.resolve(alert('hello, world! ')); </script> </body>Copy the code

In the past, await can only be used in async functions, but now it can be used without async functions and can be used in database connection initialization scenarios, which is more convenient:

const connection = await dbConnector();
Copy the code

Note that top-level await can only be used in ES Module. In addition, using top-level await will affect the execution order of ES Modules and block the execution of modules with top-level await and their parent modules.

This proposal caused a lot of controversy in the community. After the proposal was modified, it no longer blocked the execution of sibling module. Now it has successfully entered Stage 3.

Web NFC

NFC is the abbreviation of Near Field Communication and its Chinese name is “Near Field Communication”. It can be used in mobile payment and access control.

The Android version of Chrome 89 has Web NFC enabled by default, which opens up a wide range of applications for Web applications.

The Demo below is very interesting, the phone close to the card can recognize the color of the card through NFC.

Impossible requirement: Change the UI color according to the color of the phone case.

Chrome’s efforts to push Web technology to the next level in every application scenario. NFC usage scenarios are mostly simple, and developing native applications for this seems a bit of a dead end. Web technologies may be a better choice. In the payment, access control, ticketing, subway and bus need to swipe the card, the Web application has been used.

WebHID

HID stands for Human Interface Devices. It is not easy to translate. HID is actually a variety of output output devices. The WebHID API makes it easier to interact with Web applications on devices that are too new, too old, too rare, or too lacking in standards to use.

In fact, HID mainly refers to the game controller, because the standardization of the game controller is not good enough.

Demo has some practical value on the PlayStation and Switch case, as expected or good game enthusiasts…

You can feel, with Switch joy-Con handle how to play Chrome dinosaur game, can be said to be very demonic…. There’s a new way to exercise when you’re off the Grid…

At present, the offline game hall inside the game interface is quite old, still stays in the last century, with the generation gap between online game to be upgraded, if using Web technology to develop, research and development costs are lower, better compatibility, can now easily interact with the game handle, should be a worthwhile areas.

Web Serial API

Serial port is mainly used for Serial bit-by-bit data transmission. Printers, microcontrollers and other devices are connected to computers through Serial ports.

Serial devices can connect to a computer through a Serial port, a USB port that emulates a Serial port, or bluetooth. Web applications can communicate with Serial devices through the Web Serial API.

Below is the BBC Micro: Bit, a single chip microcomputer for educational scenarios that has a micro USB port to connect to a computer. An example given by Google Developer Codelab is to display a heart image on micro: Bit using the Web Serial API.

In recent years, children’s programming is very popular. It is quite boring for children to simply write code. If we can combine hardware devices like BBC Micro: Bit to let children see the real effect, even simple LED lamp control, it should be better to stimulate children’s interest. The natural low barrier and cross-platform nature of Web technology also suits the education scene.

performance.measureUserAgentSpecificMemory()

The Chrome 89 new performance. MeasureUserAgentSpecificMemory () interface, used to measure the memory usage of the page.

If we directly in the console execution performance. MeasureUserAgentSpecificMemory (), it is likely to be an error:

Uncaught (in promise) DOMException: Failed to execute 'measureUserAgentSpecificMemory' on 'Performance': performance.measureUserAgentSpecificMemory requires cross-origin isolation.
Copy the code

. This is because the performance measureUserAgentSpecificMemory () can only be enabled cross – origin of isolated page, this is done to safety.

The name of such a long API is the first time to see, but also do not let people use, do not talk about martial virtue ah…

To test this, I wrote a simple Egg app:

'use strict';

const Controller = require('egg').Controller;

class HomeController extends Controller {
  async index() {
    const { ctx } = this;
    ctx.set('Cross-Origin-Embedder-Policy', 'require-corp');
    ctx.set('Cross-Origin-Opener-Policy', 'same-origin');
    ctx.body = 'hi, egg';
  }
}

module.exports = HomeController;
Copy the code

Return the following value from Header:

At this time in the console can perform the performance. MeasureUserAgentSpecificMemory ()

await performance.measureUserAgentSpecificMemory();
Copy the code

Performance. MeasureUserAgentSpecificMemory () is in the browser to perform garbage collection when measuring page memory usage,

{ "breakdown": [ { "attribution": [], "bytes": 0, "types": [] }, { "attribution": [ { "scope": "Window", "url": "Http://127.0.0.1:7001/"}], "bytes:" 191222, "types" : []}, {" appears ": []," bytes: "786305," types ": [ "Shared" ] } ], "bytes": 977527 }Copy the code

A Hello World page uses 900KB of ram, Bill Gates cries in the bathroom…

conclusion

The biggest highlight of Chrome 89 is the three features of Web NFC, WebHID and Web Serial API. They are actually doing the same thing, so that Web applications can go beyond the page itself and interact with hardware more easily. JavaScript is expected to become the first-class citizen of the Internet of Things era.

The Web NFC, WebHID, and Web Serial API demos presented in this article are all interesting, but a bit young, which means that applications in this area are just beginning to be imagined. In the article, I talked about their application scenarios for payment, access control, ticketing, transportation, gaming, and education, and it’s interesting to think that there are many more scenarios to explore.

What is the difference between WebHID and the Web Serial API? I haven’t made a clear research on this point. Interested students can pay attention to the issue I mentioned on GitHub: What are the differences between WebHID and Web Serial API?

Web NFC, WebHID, and The Web Serial API are all part of Chrome’s Capabilities Project, which aims to bridge the gap between Web apps and native apps and enable Web apps to do everything iOS, Android, and desktop apps can do. This goal may seem challenging, but it’s not impossible. Ten years ago, could you have imagined that Web applications could be where they are today? So what happens in 10 years? Let’s wait and see!

Welcome to follow the official account of Hanyan Talk, follow the blog series of “Great Chrome browser”, and witness the sea of stars in front of the big front with me!

reference

  • Top-level await
  • Top-level await is a footgun
  • Lesson 5: How Chrome works
  • Third party cookie will not be allowed to use immediately, Internet advertising how to play?
  • Chrome 89 Beta: Advanced Hardware Interactions, Web Sharing on Desktop, and More
  • New in Chrome 89: Web Serial, HID, NFC, PWA installability changes, and more!
  • Getting started with the Web Serial API
  • What are the differences between WebHID and Web Serial apis?
  • 2020 Front-end Technology development Review
  • Why you need “cross-origin isolated” for powerful features