Tính năng mới trong Chrome 84

Pete LePage

Chrome 84 hiện đang bắt đầu ra mắt bản ổn định.

Dưới đây là những gì bạn cần phải biết:

Tôi là Pete LePage, làm việc và quay video tại nhà. Hãy cùng tìm hiểu những tính năng mới dành cho nhà phát triển trong Chrome 84!

Lối tắt cho biểu tượng ứng dụng

Lối tắt biểu tượng ứng dụng cho PWA của Twitter

Lối tắt biểu tượng ứng dụng giúp người dùng dễ dàng bắt đầu nhanh các thao tác phổ biến trong ứng dụng. Ví dụ: soạn một tweet mới, gửi tin nhắn hoặc xem thông báo. Các định dạng này được hỗ trợ trong Chrome dành cho Android.

Các phím tắt này được gọi khi nhấn và giữ biểu tượng ứng dụng trên Android. Bạn có thể dễ dàng thêm lối tắt vào PWA, tạo một thuộc tính shortcuts mới trong tệp kê khai ứng dụng web, mô tả lối tắt và thêm biểu tượng.


"shortcuts": [
  {
    "name": "Open Play Later",
    "short_name": "Play Later",
    "description": "View the list you saved for later",
    "url": "/play-later",
    "icons": [
      { "src": "//play-later.png", "sizes": "192x192" }
    ]
  },
]

Hãy xem bài viết Hoàn thành công việc nhanh chóng bằng lối tắt ứng dụng để biết đầy đủ thông tin chi tiết.

API ảnh động trên web

Chrome 84 bổ sung một loạt tính năng trước đây không được hỗ trợ vào API Ảnh động trên web.

  • animation.ready và animation.finished đã được sử dụng.
  • Giờ đây, trình duyệt có thể dọn dẹp và xoá các ảnh động cũ, giúp tiết kiệm bộ nhớ và cải thiện hiệu suất.
  • Và giờ đây, bạn có thể kết hợp ảnh động bằng chế độ tổng hợp – với các tuỳ chọn add và accumulate.

Tôi không thể trình bày đầy đủ tất cả các điểm cải tiến hoặc đưa ra ví dụ phù hợp tại đây. Vì vậy, hãy xem bài viết Các điểm cải tiến của API Ảnh động trên web trong Chromium 84 để biết thông tin chi tiết đầy đủ.

API lập chỉ mục nội dung

Nếu nội dung của bạn có thể xem được mà không cần kết nối mạng. Nhưng người dùng không biết về điều đó? Sản phẩm này có thực sự có sẵn không? Đã xảy ra vấn đề khi khám phá!

Với Content Indexing API (API Lập chỉ mục nội dung) vừa kết thúc giai đoạn thử nghiệm ban đầu, bạn có thể thêm URL và siêu dữ liệu cho nội dung có sẵn khi không có mạng. Bằng cách sử dụng siêu dữ liệu đó, nội dung sẽ được hiển thị cho người dùng, cải thiện tiềm năng được khám phá.

Để thêm nội dung vào chỉ mục, hãy gọi index.add() trên hoạt động đăng ký worker dịch vụ và cung cấp siêu dữ liệu bắt buộc về nội dung.


const registration = await navigator.serviceWorker.ready;
await registration.index.add({
  id: 'article-123',
  url: '/articles/123',
  launchUrl: '/articles/123',
  title: 'Article title',
  description: 'Amazing article about things!',
  icons: [{
    src: '/img/article-123.png',
    sizes: '64x64',
    type: 'image/png',
  }],
});

Bạn muốn xem nội dung đã có trong chỉ mục của mình? Gọi index.getAll() trên quy trình đăng ký worker dịch vụ.

const registration = await navigator.serviceWorker.ready;
const entries = await registration.index.getAll();
for (const entry of entries) {
  // entry.id, entry.launchUrl, etc. are all exposed.
}

Hãy xem phần Lập chỉ mục các trang có thể hoạt động khi không có mạng bằng Content Indexing API để biết thông tin đầy đủ.

API khoá chế độ thức

Triển khai khoá chế độ thức trên trang web của Betty Crocker.

Tôi thích nấu ăn, nhưng tôi thấy rất khó chịu khi đang làm theo một công thức nấu ăn thì trình bảo vệ màn hình lại bật lên! Với API khoá chế độ thức (cũng đã chuyển sang giai đoạn thử nghiệm theo nguyên gốc trong Chrome 84), các trang web có thể yêu cầu khoá chế độ thức để ngăn màn hình làm mờ và khoá.

Trên thực tế, hiện nay trang web Betty Crocker đang sử dụng tính năng này và đã xuất bản một nghiên cứu điển hình trên web.dev cho thấy các chỉ báo ý định mua hàng tăng 300%.

Để có khoá chế độ thức, hãy gọi navigator.wakeLock.request(). Thao tác này sẽ trả về một đối tượng WakeLockSentinel dùng để "giải phóng" khoá chế độ thức.


// Request the wake lock
const wl = await navigator.wakeLock.request('screen');

// Release the wake lock
wl.release();

Tất nhiên, chúng tôi còn cung cấp thêm một số tính năng, vì vậy hãy xem phần Sử dụng màn hình khoá chế độ thức hoạt động để luôn thức dậy API, nhưng ít nhất màn hình của tôi sẽ không bị bột mì bao phủ nữa!

Bản dùng thử theo nguyên gốc

Tôi muốn giới thiệu hai thử nghiệm mới về nguồn gốc. Nếu bạn mới sử dụng bản dùng thử theo nguyên gốc, hãy xem bài viết Bắt đầu dùng bản dùng thử theo nguyên gốc của Chrome.

Phát hiện trạng thái rảnh

API Phát hiện trạng thái rảnh sẽ thông báo cho bạn khi người dùng ở trạng thái rảnh, cho biết họ có thể đang không ở gần máy tính. Điều này rất hữu ích cho các ứng dụng trò chuyện hoặc trang web mạng xã hội để cho người dùng biết liệu người liên hệ của họ có rảnh hay không.

// Create the idle detector
const idleDetector = new IdleDetector();

// Set up an event listener that fires when idle state changes.
idleDetector.addEventListener('change', () => {
  const uState = idleDetector.userState;
  const sState = idleDetector.screenState;
  console.log(`Idle change: ${uState}, ${sState}.`);
});

// Start the idle detector.
await idleDetector.start({
  threshold: 60000,
  signal,
});

Hãy xem bài viết Phát hiện người dùng không hoạt động bằng API Phát hiện trạng thái rảnh để tìm hiểu thêm về API này cũng như cách bạn có thể bắt đầu thử nghiệm API này ngay hôm nay.

SIMD của Web Assembly

Đồng thời, SIMD của Lắp ráp web bắt đầu bản dùng thử theo nguyên gốc. Tài liệu này giới thiệu các thao tác liên kết với các lệnh SIMD thường có trong phần cứng. Các thao tác SIMD được dùng để cải thiện hiệu suất, đặc biệt là trong các ứng dụng đa phương tiện.

Để tìm hiểu thêm về WebAssembly SIMD, hãy xem bài viết Các ứng dụng nhanh, song song với WebAssembly SIMD.

Và các dữ liệu khác

Chrome 84 là phiên bản lớn, nhưng có một vài cập nhật quan trọng khác mà tôi muốn chỉ ra.

Tài liệu đọc thêm

Nội dung này chỉ đề cập đến một số điểm nổi bật chính. Hãy truy cập các đường liên kết bên dưới để biết các thay đổi khác trong Chrome 84.

Đăng ký

Nếu muốn cập nhật video của chúng tôi, hãy đăng ký kênh YouTube dành cho nhà phát triển Chrome. Bạn sẽ nhận được thông báo qua email mỗi khi chúng tôi ra mắt video mới.

Tôi là Pete LePage và tôi vẫn cần cắt tóc, nhưng ngay khi Chrome 85 được phát hành, tôi sẽ ở đây để cho bạn biết -- tính năng mới trong Chrome!