Great Chrome browser: Chrome 89 opens the era of Internet of things for web applications

Time:2021-8-1

What interesting new features did chrome 89 just released in early March bring?

background

For more than a decade, web technology has advanced by leaps and bounds, among which Chrome has contributed the most, it can be said that there is no one. I have discussed this in my previous blog:

Now, chrome is not just a simple browser, but a platform product that determines the development direction of web technology. Its position is second only to Linux, IOS, andirod and windows.

Importantly, chrome has not stopped the pace of innovation and has been promoting the development of web technology.

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

In the field of big front-end, understanding the development of chrome can help us understand the development trend of the whole industry.

Chrome’s most noteworthy new features have two directions:

  • New capabilities and APIs, such as web NFC, can be used in practical application scenarios to bring business innovation;
  • Modification of security and privacy rules, such as disabling third-party cookies, will affect the stability of the business;

Starting from this article, I will take the great Chrome browser as the title, interpret each version of chrome in detail, and share some thoughts that I may not be mature. Welcome to pay attentionCold goose talkofficial account

TL;TR

In order to avoid taking up too much public resources, let me briefly summarize:)

Here, you must like itChrome Platform StatusThis site arranges every feature of each version of chrome very clearly. What I do is just to be an industrious porter~

Great Chrome browser: Chrome 89 opens the era of Internet of things for web applications

Detailed interpretation

I can’t introduce the 30 new features one by one, so I’ll pick five interesting features to talk about. If you are interested in other special features, you can have a lookChrome Platform Status

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 awaitIt’s also wonderful.

The following HTML will report an error on chrome 88: “unexpected syntax error: unexpected reserved word”, which can be executed correctly on chrome 89. This is because the V8 engine of chrome 89 has been upgraded to V8.9 and supports top level await.

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

Previously, await could only be used in async functions. Now it can be used without async functions. It can be used in database connection initialization and other scenarios, which is more convenient:

const connection = await dbConnector();

It is worth noting that top level awaitCan only be used in ES module. In addition, if top level await is used, the execution sequence of ES module will be affected, blocking the execution of the module using top level await and its parent module.

The proposal of top level await has aroused great concern in the communitydisputeLater, after the proposal was modified, the execution of sibling modules was no longer blocked. Now it is not easy to enter stage 3 smoothly.

Web NFC

NFC is the abbreviation of near field communication, and its Chinese name is “near field communication”, which can be used in mobile payment, access control and other scenarios.

The Android version of chrome 89 opens Web NFC by default, which expands another application scenario for web applications.

The demo in the figure below is still very interesting. The color of the card can be recognized by NFC when the mobile phone is close to the card.
Great Chrome browser: Chrome 89 opens the era of Internet of things for web applications

It is said that it is impossible to realize the demand: modify the UI color according to the color of the mobile phone case, which is realized. Ha ha.

Chrome’s efforts to promote web technology to various application scenarios will go to the next city. Most of the usage scenarios of NFC are quite simple. It seems that developing native applications for this purpose is a bit of a chicken killing knife. Web technology may be a better choice. In payment, access control, ticketing, subway bus and other scenarios that require card swiping, web applications have a place to play.

WebHID

The full name of HID is human interface devices, which is not easy to translate. It seems that Google students have great word making ability. HID is actually a variety of output devices. Many devices are too new, too old, too rare or lack of standards, so the system is difficult to use. Webhid API makes it easier for these devices to interact with web applications.

In fact, hid mainly refers to the joystick, because the standardization of the joystick is not good enough.

There is some practical value in the demoPlayStationandSwitchAs expected, it is still good for the game house

You can feel how to play Chrome’s Dinosaur game with the joy con handle of switch. It can be said that it is very magical… When the network is disconnected, you have a new posture for exercise
Great Chrome browser: Chrome 89 opens the era of Internet of things for web applications

At present, the game interface in the offline game hall is very old and still stays in the last century. There is an intergenerational gap with online games and needs to be upgraded. If web technology is used for development, the R & D cost is lower and the compatibility is better. Now it can also interact with the game console conveniently, which should be a field worth trying.

Web Serial API

**
Serial port is mainly used for serial bit by bit data transmission. Printers, MCU and other equipment are connected with computers through serial port.

A serial device can be connected to a computer through a serial interface, a USB interface simulating a serial interface, or Bluetooth. Web applications canWeb Serial APICommunicate with serial devices.

The following figure isBBC micro:bit, is a single chip microcomputer for educational scenes. It has a microusb interface, which can be connected to the computer. One from Google developer codelabcase, that is, using the web serial APImicro:bitShow a heart-shaped image on the.

Great Chrome browser: Chrome 89 opens the era of Internet of things for web applications

In recent years, children’s programming has been very popular. It’s actually boring for children to simply write code. If you can combine it with something similar toBBC micro:bitSuch hardware equipment can let children see the real effect. Even simple LED light control should better stimulate children’s interest. The natural low threshold and cross platform characteristics of web technology are quite suitable for the scene of education.

performance.measureUserAgentSpecificMemory()

Chrome 89 addedperformance.measureUserAgentSpecificMemory()Interface to measure the memory usage of a page.

If we directly execute performance. Measureuseragentspecificmemory() on the console, we may report an error:

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

This is because performance. Measureuseragentspecificmemory() can only be executed in pages with cross origin isolated enabled for security reasons.

The API with such a long name is the first time I’ve seen it. It’s not used. It doesn’t speak of martial virtue

To test, I wrote a simple egg application:

'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;

The following values can be returned in the header:
Great Chrome browser: Chrome 89 opens the era of Internet of things for web applications

At this point, you can execute performance. Measureuseragentspecificmemory () on the console

await performance.measureUserAgentSpecificMemory();

Performance. Measureuseragentspecificmemory() measures the memory usage of the page when the browser performs garbage collection,

{
    "breakdown": [
        {
            "attribution": [],
            "bytes": 0,
            "types": []
        },
        {
            "attribution": [
                {
                    "scope": "Window",
                    "url": "http://127.0.0.1:7001/"
                }
            ],
            "bytes": 191222,
            "types": []
        },
        {
            "attribution": [],
            "bytes": 786305,
            "types": [
                "Shared"
            ]
        }
    ],
    "bytes": 977527
}

A hello world page uses 900kb of memory. Bill Gates cries out in the toilet

summary

Chrome 89’s biggest highlightWeb NFCWebHIDas well asWeb Serial APIThese three features are actually doing the same thing to make web applications break through the page itself and interact with hardware more conveniently. JavaScript is expected to become a first-class citizen in the era of the Internet of things.

The demo cases of Web NFC, webhid and web serial API introduced in this article are still interesting, but they are slightly immature, but it also means that this application has just begun, and there is a lot of imagination in the future. In the article, I talked about their application scenarios in payment, access control, ticketing, transportation, games and education. There should be more scenes worth exploring. It’s still interesting to think about them.

What is the difference between webhid and web serial API? I haven’t studied this point clearly. Interested students can pay attention to the issue I mentioned in GitHub:What are the differences between WebHID and Web Serial API?

Web NFC, webhid, and web serial APIs all belong to chromecapabilities project, its goal is to eliminate the gap between web applications and native applications, so that web applications can do anything IOS, Android and desktop applications can do. This goal seems challenging, but there is nothing impossible. 10 years ago, can you imagine that web applications can develop to this extent? What will happen in 10 years? Let’s wait and see!

Welcome to pay attentionCold goose talkOfficial account, concernGreat Chrome browserSeries blog, witness the big front-end star sea with me!

reference resources

recruit

Alibaba business platform Division has long recruited P6 and above front-end leaders to participate in the construction of the most cutting-edge Alibaba front-end ecosystem and promote the development of industry technology. Internal push address: Hanyan [email protected] -inc.com

Welcome to my WeChat official account.Cold goose talk

Recommended Today

Swift advanced (XV) extension

The extension in swift is somewhat similar to the category in OC Extension can beenumeration、structural morphology、class、agreementAdd new features□ you can add methods, calculation attributes, subscripts, (convenient) initializers, nested types, protocols, etc What extensions can’t do:□ original functions cannot be overwritten□ you cannot add storage attributes or add attribute observers to existing attributes□ cannot add parent […]