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

Pete LePage

Chrome 84 hiện đang bắt đầu ra mắt bản chính thức.

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à ghi hình tại nhà, hãy cùng tìm hiểu sâu hơn và xem có gì 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 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 của bạn. Ví dụ: soạn một bài đăng mới, gửi tin nhắn hoặc xem thông báo của họ. Các cookie này được hỗ trợ trong Chrome dành cho Android.

Các phím tắt này được gọi 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 của mình, hãy 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 các 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 số tính năng không được hỗ trợ trước đây vào Web Animations API.

  • animation.ready và animation.finished đã được ra mắt.
  • 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.
  • Giờ đây, bạn có thể kết hợp ảnh động bằng chế độ kết hợp – với các tuỳ chọn add và accumulate.

Đơn giản là tôi không thể xem xét toàn bộ các điểm cải tiến hoặc đưa ra ví dụ điển hình tại đây. Vì vậy, hãy tham khảo bài viết Các điểm cải tiến về API Ảnh động trên web trong Chromium 84 để biết toàn bộ thông tin chi tiết.

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ề các tính năng này? Sản phẩm này có thực sự có sẵn không? Đã xảy ra sự cố phát hiện!

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

Để thêm nội dung vào chỉ mục, hãy gọi index.add() khi đăng ký trình chạy 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() khi đăng ký trình chạy 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ó chức năng ngoại tuyến bằng API Lập chỉ mục nội dung để biết đầy đủ thông tin chi tiết.

API khoá chế độ thức

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

Tôi thích nấu ăn, nhưng tôi thấy cực kỳ khó chịu khi làm theo một công thức và trình bảo vệ màn hình lại kích hoạt! Với API khoá chế độ thức (cũng hoàn thiện từ bản dùng thử 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 bị giảm độ sáng và khoá.

Trên thực tế, trang web của Betty Crocker hiện đang sử dụng phương pháp 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 tăng 300%.

Để có 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 để "phát hành" 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, vẫn còn một số vấn đề khác, vì vậy hãy xem bài viết Không khoá màn hình bằng API 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ị bột bao phủ nữa!

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

Có hai bản dùng thử theo nguyên gốc mới mà tôi muốn thông báo. 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 rằng có thể họ đang không ở gần máy tính của mình. Đây là lựa chọn tuyệt vời cho những tính năng như ứng dụng trò chuyện hoặc trang web mạng xã hội, cho phép người dùng biết danh bạ của họ có sẵn 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ạn có thể bắt đầu thử nghiệm API này ngay hôm nay.

Cài đặt web SIMD

Web Co.opmart bắt đầu bản dùng thử theo nguyên gốc. Trình bổ trợ này giới thiệu các thao tác ánh xạ đến các lệnh SIMD thường thấy 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 Ứng dụng nhanh, song song với WebAssembly SIMD.

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

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

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

Bài viết này chỉ bao gồm một số điểm nổi bật chính. Hãy truy cập vào các đường liên kết bên dưới để biết thêm các thay đổi khác trong Chrome 84.

Đăng ký

Nếu bạn muốn nắm bắt thông tin mới nhất về video, hãy đăng ký kênh YouTube dành cho Nhà phát triển Chrome của chúng tôi. 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ẽ có mặt ngay để cho bạn biết -- Chrome có tính năng gì mới!