Trang này được dịch bởi Cloud Translation API.

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

Pete LePage

Chrome 84 hiện đang bắt đầu được triển khai phiên bản ổn định.

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

Người dùng có thể bắt đầu các tác vụ phổ biến trong ứng dụng của bạn bằng Lối tắt biểu tượng ứng dụng.
API Ảnh động trên web hỗ trợ thêm một loạt các tính năng trước đây không được hỗ trợ.
Khoá chế độ thức có thể ngăn màn hình giảm độ sáng hoặc khoá.
Content Indexing API giúp hiển thị nội dung có sẵn khi không có kết nối Internet.
Có các thử nghiệm mới về nguồn gốc cho tính năng phát hiện trạng thái rảnh và Web Assembly SIMD.
Chúng tôi bắt đầu triển khai lại các thay đổi đối với Chính sách về cookie trên cùng một trang web.
Và nhiều tính năng khác.

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 biểu tượng ứng dụng

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 tính năng này được hỗ trợ trong Chrome dành cho Android.

Bạn có thể gọi các lối tắt này bằng cách 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 bằng cách 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 Làm mọi việc nhanh hơn bằng lối tắt ứng dụng để biết toàn bộ 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 chuyển đổi thành lời hứa.
Giờ đây, trình duyệt có thể dọn dẹp và xoá ảnh động cũ, tiết kiệm bộ nhớ và cải thiện hiệu suất.
Giờ đây, bạn có thể kết hợp ảnh động bằng các chế độ kết 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 khi không có kết nối mạng. Nhưng người dùng không biết về việc này? Có thực sự có 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. Sau đó, nội dung sẽ được hiển thị cho người dùng bằng cách sử dụng siêu dữ liệu đó, giúp cải thiện khả năng 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ế, trang web Betty Crocker hiện đ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 về ý định mua hàng đã tăng 300%.

Để nhận khoá chế độ thức, hãy gọi navigator.wakeLock.request(). Phương thứ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, còn một số điều khác nữa, vì vậy, hãy xem bài viết Giữ trạng thái thức bằng API Khóa chế độ thức màn hình, nhưng ít nhất màn hình của tôi sẽ không còn bị phủ bột 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 sử 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 rời khỏi 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 và cách bắt đầu thử nghiệm API ngay hôm nay.

SIMD của Web Assembly

Và Web Assembly SIMD bắt đầu một thử nghiệm gốc. API 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 toán tử 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 có nhiều điểm mới, nhưng tôi muốn nêu ra một vài điểm cập nhật quan trọng khác.

Chúng tôi sẽ tiếp tục triển khai từng bước các thay đổi về cookie SameSite.
Những trang web có yêu cầu cấp quyền hoặc thông báo sai trái sẽ tự động được đăng ký sử dụng giao diện người dùng thông báo ít gây phiền toái hơn của chúng tôi.
Có một thử nghiệm gốc mới cho QuicTransport.

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

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

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à vẫn cần cắt tóc. Tuy nhiên, ngay khi Chrome 85 được phát hành, tôi sẽ quay lại đây để chia sẻ với bạn những tính năng mới trong Chrome!