Chrome 89 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:
- WebHID, WebNFC và Web Serial đã hoàn tất các thử nghiệm gốc và hiện đã có phiên bản ổn định.
- Chúng tôi sẽ đóng một lỗ hổng mà một số nhà phát triển từng dùng để lách quy trình kiểm tra khả năng cài đặt PWA.
- Chia sẻ trên web và Mục tiêu chia sẻ trên web xuất hiện trên máy tính.
- Và còn nhiều tính năng khác.
Tôi là Pete LePage, đang 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 89!
WebHID, WebNFC và Web Serial
Tôi rất hào hứng về WebHID, WebNFC và Web Serial. Các công nghệ này mở ra các tình huống mới cho người dùng mà trước đây chưa từng có, tương tác với phần cứng thực tế.
API này cho phép nhà sáng tạo kết nối với các ứng dụng hội nghị truyền hình, thiết bị thú vị, kỳ quặc để sử dụng các nút điện thoại chuyên dụng trên loa chuyên dụng. Hoặc bất kỳ trường hợp sử dụng nào khác.
Bằng cách sử dụng Web Serial và khoảng 60 dòng mã, @AndreBan đã tạo một trang có thể tương tác với REPL MicroPython trên Raspberry Pi Pico. Espruino cũng sử dụng Web Serial trong IDE dựa trên web.
Tại CDS 2019, Francois đã viết một trò chơi thú vị, mang phong cách trí nhớ bằng Web NFC. Bạn phải đưa điện thoại lại gần thẻ đúng cách, theo đúng thứ tự.
Và điều tôi thích nhất là @bramus đã sử dụng WebHID để kết nối với StreamDeck, tạo một bàn trống Daft Punk. Nếu bạn không có StreamDeck, hãy xem video minh hoạ của anh trên YouTube và xem mã trên GitHub.
Cho dù trang web của bạn tương tác với phần cứng hay phần cứng của bạn có thể tương tác với nhiều trang web, người dùng đều được hưởng lợi vì họ không cần cài đặt trình điều khiển hoặc phần mềm đặc biệt.
Bạn có thể tìm hiểu thêm về một số thiết bị mà bạn có thể kết nối tại web.dev/devices hoặc xem hướng dẫn bắt đầu sử dụng cho WebHID, WebNFC và Web Serial.
Thay đổi về tiêu chí cài đặt PWA
Khả năng hỗ trợ ngoại tuyến là một phần quan trọng trong các tiêu chí của Ứng dụng web tiến bộ về khả năng cài đặt ngay từ đầu. Cũng như các ứng dụng đã cài đặt khác, người dùng mong đợi ứng dụng này hoạt động ổn định. Quá trình này phải diễn ra nhanh chóng và trẻ không bao giờ được thấy chú khủng long ngoại tuyến!
Vào cuối năm nay, chúng tôi dự định sẽ đóng một lỗ hổng cho phép một số trang web vượt qua tiêu chí về khả năng cài đặt mà không cần trải nghiệm ngoại tuyến. Nếu PWA của bạn đã có trải nghiệm ngoại tuyến, thì bạn đã hoàn tất. Bạn không cần làm gì cả, nhưng nếu chưa có, thì đã đến lúc thêm một!
Kể từ Chrome 89, nếu PWA không cung cấp phản hồi hợp lệ khi ngoại tuyến, bạn sẽ thấy cảnh báo trong DevTools trong thẻ Vấn đề và Lighthouse sẽ cho biết có vấn đề. Việc thực thi sẽ bắt đầu trong Chrome 93 vào cuối năm nay.
Bạn có thể quyết định loại trải nghiệm ngoại tuyến mà bạn muốn cung cấp. Tốt nhất là bạn nên cung cấp càng nhiều trải nghiệm càng tốt. Nhưng ít nhất, trang này có thể đơn giản như một trang dự phòng khi không có mạng.
Bạn có thể tìm hiểu thêm thông tin chi tiết về thay đổi này và lý do chúng tôi thực hiện thay đổi đó trong bài viết Cải thiện tính năng phát hiện khả năng hỗ trợ ngoại tuyến của Ứng dụng web tiến bộ.
Nếu bạn không biết nên bắt đầu từ đâu, hãy xem Workbox. Thư viện này có một bộ thư viện có thể hỗ trợ một worker dịch vụ sẵn sàng phát hành cho PWA của bạn. Hoặc đối với một trang dự phòng đơn giản khi không có mạng, bài viết Tạo trang dự phòng khi không có mạng có tất cả mã bạn cần và bạn có thể sao chép và dán trực tiếp vào trang web của mình.
Mục tiêu Chia sẻ trên web và Chia sẻ trên web cho máy tính
Nếu trang web của bạn cho phép người dùng tạo, chỉnh sửa hoặc tương tác với các tệp, bạn nên sử dụng API Chia sẻ trên web và API Mục tiêu chia sẻ trên web. Các API này đã có trên thiết bị di động trong một thời gian, nhưng hiện được hỗ trợ trên ChromeOS và Windows.
Tính năng Chia sẻ trên web cho phép người dùng gửi tệp hoặc dữ liệu đến các ứng dụng khác đã cài đặt trên thiết bị, chẳng hạn như chia sẻ ảnh từ Google Photos sang Twitter.
async function share(title, text, url) {
try {
await navigator.share({title, text, url});
return true;
} catch (ex) {
console.error('Share failed', ex);
return false;
}
}
Để đăng ký làm mục tiêu để các ứng dụng khác có thể chia sẻ tệp hoặc dữ liệu với bạn, bạn nên sử dụng API Mục tiêu chia sẻ trên web.
"share_target": {
"action": "/?share-target",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"files": [
{
"name": "file",
"accept": ["image/*"],
},
],
},
},
Hãy xem bài viết Tích hợp với giao diện người dùng chia sẻ của hệ điều hành bằng API chia sẻ trên web và Nhận dữ liệu được chia sẻ bằng API mục tiêu chia sẻ trên web để biết hướng dẫn bắt đầu.
Và các dữ liệu khác
Và tất nhiên còn nhiều tính năng khác.
Chrome hiện cho phép await cấp cao nhất trong các mô-đun JavaScript.
Để người dùng đỡ nhầm lẫn, chúng tôi đã cập nhật biểu tượng hiển thị trong thanh địa chỉ cho các PWA có thể cài đặt.
Ngoài ra, nếu đã sử dụng Hoạt động web đáng tin cậy để cung cấp PWA trong Cửa hàng Play cho ChromeOS, bạn có thể đăng ký tham gia bản dùng thử theo nguyên gốc Digital Goods API.
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 89.
- Tính năng mới trong Công cụ dành cho nhà phát triển của Chrome (89)
- Các tính năng ngừng hoạt động và bị xoá trong Chrome 89
- Các bản cập nhật của ChromeStatus.com cho Chrome 88
- Tính năng mới trong JavaScript trong Chrome 88
- Danh sách thay đổi về kho lưu trữ nguồn Chromium
Đă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 90 đượ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!
Ghi công
Ảnh chụp Raspberry Pi và Arduino là của Harrison Broadbent trên Unsplash