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

Pete LePage

Chrome 80 hiện đang ra mắt và có rất nhiều nội dung mới trong đó dành cho các nhà phát triển!

Dịch vụ này hỗ trợ:

Tôi là Pete LePage, 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 80!

Trình chạy mô-đun

Trình chạy mô-đun, một chế độ mới dành cho trình thực thi web – với tính công thái học và các lợi ích về hiệu suất của mô-đun JavaScript hiện đã ra mắt. Hàm khởi tạo Worker chấp nhận tuỳ chọn {type: "module"} mới. Tuỳ chọn này 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 các mô-đun JavaScript cũng cho phép sử dụng tính năng nhập động cho mã tải từng phần 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 web bằng trình thực thi mô-đun trên web.dev để biết thêm chi tiết.

Tạo chuỗi không bắt buộc

Việc cố gắng đọc các thuộc tính lồng 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 tính năng nào đó có thể không đánh giá được.

// 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 sẽ dễ dàng chuyển thành câu lệnh if lồng sâu hoặc yêu cầu 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 hỗ trợ thêm một tính năng JavaScript mới có tên là chuỗi tuỳ chọn. Với quy trình tạo chuỗi không bắt buộc, 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ì báo lỗi, thì toàn bộ sẽ 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ề Tùy chọn tạo chuỗi trên blog phiên bản 8 để biết toàn bộ thông tin chi tiết!

Tốt nghiệp thử nghiệm theo nguyên gốc

Có 3 chức năng mới đã chuyển từ Bản dùng thử theo nguyên gốc sang trạng thái ổn định, cho phép bất kỳ trang web nào sử dụng các chức năng này mà không cần có mã thông báo.

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

Đầu tiên là 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 ở chế độ nền theo định kỳ để khi người dùng mở PWA đã cài đặt, họ sẽ luôn có dữ liệu mới nhất.

Bộ chọn người liên hệ

Tiếp theo là API Bộ chọn liên hệ, 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 giới hạn về các mục đã chọn với trang web.

Nền tảng này cho phép người dùng chỉ chia sẻ những gì họ muốn vào thời điểm họ muốn, đồng thời giúp người dùng dễ dàng tiếp cận cũng như kết nối với bạn bè và gia đình.

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

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á hoạt động cài đặt PWA hay không, nếu ứng dụng gốc 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 ứng dụng kia cung cấp chức năng đó.

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

API Lập chỉ mục nội dung là một bản dùng thử theo nguyên gốc mới, cho phép bạn thêm URL và siêu dữ liệu của nội dung có thể sử dụng ngoại tuyến, 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 nhìn thấy.

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 nào đó vào chỉ mục, tôi cần đăng ký trình chạy 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, chỉ mục sẽ xuất hiện trong một khu vực riêng của Chrome 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 hỗ trợ ngoại tuyến bằng API Lập chỉ mục nội dung trên web.dev để biết đầy đủ chi tiết.

Kích hoạt thông báo

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

Tính năng 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 gử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 trong phần đăng ký trình chạy dịch vụ. Trong các tuỳ chọn thông báo, hãy thêm thuộc tính showTrigger có TimestampTrigger. Sau đó, khi thời gian đến, 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 thông qua Chrome 83. Vì vậy, hãy xem bài đăng Kích hoạt thông báo của Tom trên web.dev để biết đầy đủ thông tin.

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

Có một số bản dùng thử theo nguyên gốc khác bắt đầu trong Chrome 80:

  • Số sê-ri web
  • Cho phép PWA đăng ký làm trình xử lý tệp
  • Thuộc tính mới cho bộ chọn địa chỉ liên hệ

Hãy kiểm tra để 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 rất nhiều tính năng khác!

  • 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à đánh dấu phiên bản đầu tiên của mảnh văn bản đó. Ví dụ: https://en.wikipedia.org/wiki/Rickrolling#:~:text=New%20York
  • Khi bạn đặt display: minimal-ui trên PWA máy tính, nút quay lại và tải lại sẽ được thêm vào thanh tiêu đề của PWA đã cài đặt.
  • Chrome hiện đã hỗ trợ việc sử dụng hình ảnh SVG dưới dạng biểu tượng trang web.

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 dưới đây để biết thêm những thay đổi khác trong Chrome 80.

Đă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à ngay sau khi Chrome 81 đượ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!