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

Pete LePage

Chrome 80 hiện đang được triển khai và có rất nhiều tính năng mới dành cho nhà phát triển!

Hỗ trợ cho:

Tôi là Pete LePage. Hãy cùng tìm hiểu những điểm mới dành cho nhà phát triển trong Chrome 80!

Worker mô-đun

Module Worker, một chế độ mới cho worker web – với các lợi ích về hiệu suất và tính công thái học của các mô-đun JavaScript hiện đã có. Hàm khởi tạo Worker chấp nhận tuỳ chọn {type: "module"} mới, thay đổi cách tải và thực thi tập lệnh để khớp với <script type="module">

const worker = new Worker('worker.js', {
  type: 'module'
});

Việc chuyển sang mô-đun JavaScript cũng cho phép sử dụng tính năng nhập động cho mã tải lười mà không chặn quá trình thực thi của worker. Hãy xem bài đăng của Jason Tạo luồng trên web bằng trình chạy mô-đun trên web.dev để biết thêm thông tin chi tiết.

Chuỗi tuỳ chọn

Việc cố gắng đọc các thuộc tính lồng nhau sâu trong một đối tượng có thể dễ xảy ra lỗi, đặc biệt là nếu có khả năng một số thuộc tính không được đánh giá.

// Error prone-version, could throw.
const nameLength = db.user.name.length;

Việc kiểm tra từng giá trị trước khi tiếp tục dễ dàng biến thành câu lệnh if lồng sâu hoặc yêu cầu một khối try / catch.

// Less error-prone, but harder to read.
let nameLength;
if (db && db.user && db.user.name)
  nameLength = db.user.name.length;

Chrome 80 bổ sung tính năng hỗ trợ cho một tính năng JavaScript mới có tên là chuỗi tuỳ chọn. Với tính năng tạo chuỗi tuỳ chọn, nếu một trong các thuộc tính trả về giá trị rỗng hoặc không xác định, thay vì gửi lỗi, toàn bộ chuỗi sẽ chỉ trả về giá trị không xác định.

// Still checks for errors and is much more readable.
const nameLength = db?.user?.name?.length;

Hãy xem bài đăng trên blog về Chuỗi tuỳ chọn trên blog v8 để biết tất cả thông tin chi tiết!

Chuyển đổi từ bản dùng thử Origin

Có 3 tính năng mới đã chuyển từ giai đoạn thử nghiệm Origin sang phiên bản ổn định, cho phép mọi trang web sử dụng mà không cần mã thông báo.

Đồng bộ hoá định kỳ ở chế độ nền

Trước tiên, hãy nói về tính năng đồng bộ hoá định kỳ ở chế độ nền. Tính năng này sẽ đồng bộ hoá dữ liệu định kỳ ở chế độ nền để khi người dùng mở PWA đã cài đặt, họ luôn có dữ liệu mới nhất.

Bộ chọn địa chỉ liên hệ

Tiếp theo là Contact Picker API (API bộ chọn danh bạ), một API theo yêu cầu cho phép người dùng chọn các mục trong danh bạ và chia sẻ thông tin chi tiết hạn chế của các mục đã chọn với một trang web.

Tính năng này cho phép người dùng chỉ chia sẻ những nội dung họ muốn, khi họ muốn, đồng thời giúp người dùng dễ dàng tiếp cận và kết nối với bạn bè và gia đình.

Cuối cùng, phương thức Tải các ứng dụng có liên quan đã cài đặt cho phép ứng dụng web của bạn kiểm tra xem ứng dụng gốc có được cài đặt trên thiết bị của người dùng hay không.

Một trong những trường hợp sử dụng phổ biến nhất là để quyết định xem có nên quảng bá việc cài đặt PWA hay không, nếu ứng dụng gốc của bạn chưa được cài đặt. Hoặc bạn có thể muốn tắt một số chức năng của một ứng dụng nếu chức năng đó do ứng dụng khác cung cấp.

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

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

Làm cách nào để bạn cho người dùng biết về nội dung mà bạn đã lưu vào bộ nhớ đệm trong PWA? Có vấn đề về việc khám phá ở đây. Họ có biết cách mở ứng dụng của bạn không? Hoặc nội dung nào có sẵn?

Content Indexing API là một thử nghiệm mới về nguồn gốc, cho phép bạn thêm URL và siêu dữ liệu của nội dung có thể dùng khi không có mạng vào một chỉ mục cục bộ do trình duyệt duy trì và người dùng có thể dễ dàng xem.

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

Để thêm nội dung vào chỉ mục, tôi cần đăng ký worker dịch vụ, sau đó gọi index.add và cung cấp siêu dữ liệu về nội dung.

Sau khi được điền sẵn, chỉ mục sẽ xuất hiện trong một khu vực chuyên dụng của Chrome dành cho trang Tệp đã tải xuống của Android. Hãy xem bài đăng của Jeff Lập chỉ mục các trang có thể hoạt động ngoại tuyến bằng Content Indexing API trên web.dev để biết toàn bộ thông tin chi tiết.

Trình kích hoạt thông báo

Thông báo là một phần quan trọng của nhiều ứng dụng. Tuy nhiên, thông báo đẩy chỉ đáng tin cậy như mạng mà bạn đang kết nối. Mặc dù cách này hoạt động trong hầu hết các trường hợp, nhưng đôi khi lại không. Ví dụ: nếu lời nhắc trên lịch không thông báo cho bạn về một sự kiện quan trọng vì bạn đang ở chế độ máy bay, thì bạn có thể bỏ lỡ sự kiện đó.

Trình kích hoạt thông báo cho phép bạn lên lịch thông báo trước để hệ điều hành sẽ phân phối thông báo vào đúng thời điểm – ngay cả khi không có kết nối mạng hoặc thiết bị đang ở chế độ tiết kiệm pin.

const swReg = await navigator.serviceWorker.getRegistration();
swReg.showNotification(title, {
  tag: tag,
  body: "This notification was scheduled 30 seconds ago",
  showTrigger: new TimestampTrigger(timestamp + 30 * 1000)
});

Để lên lịch thông báo, hãy gọi showNotification trên quy trình đăng ký worker dịch vụ. Trong các tuỳ chọn thông báo, hãy thêm thuộc tính showTrigger bằng TimestampTrigger. Sau đó, khi đến thời điểm, trình duyệt sẽ hiển thị thông báo.

Bản dùng thử theo nguyên gốc dự kiến sẽ chạy qua Chrome 83, vì vậy, hãy xem bài đăng của Tom về Trình kích hoạt thông báo trên web.dev để biết thông tin chi tiết đầy đủ.

Các bản dùng thử theo nguyên gốc khác

Có một số thử nghiệm gốc khác bắt đầu từ Chrome 80:

  • Chuỗi web
  • Khả năng PWA đăng ký làm trình xử lý tệp
  • Các thuộc tính mới cho bộ chọn người liên hệ

Hãy xem danh sách đầy đủ các tính năng trong bản dùng thử theo nguyên gốc.

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

Tất nhiên, còn nhiều tính năng khác nữa!

  • Giờ đây, bạn có thể liên kết trực tiếp đến các mảnh văn bản trên một trang bằng cách sử dụng #:~:text=something. Chrome sẽ cuộn đến và làm nổi bật thực thể đầu tiên của mảnh văn bản đó. Ví dụ: https://en.wikipedia.org/wiki/Rickrolling#:~:text=New%20York
  • Việc đặt display: minimal-ui trên PWA cho máy tính sẽ thêm một nút quay lại và tải lại vào thanh tiêu đề của PWA đã cài đặt.
  • Ngoài ra, Chrome hiện hỗ trợ việc sử dụng hình ảnh SVG làm biểu tượng trang chủ.

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 về các thay đổi khác trong Chrome 80.

Đă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. Ngay khi Chrome 81 được phát hành, tôi sẽ quay lại đây để giới thiệu cho bạn những tính năng mới trong Chrome!