Chrome 89 hiện đang bắt đầu được phát hành cho 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 nguồn gốc và hiện có trong phiên bản ổn định.
- Chúng tôi đang đóng một lỗ hổng mà một số nhà phát triển đã sử dụng để lách quy trình kiểm tra khả năng cài đặt PWA.
- Web Share và Web Share Target 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, tôi đang làm việc và quay video tại nhà. Hãy cùng tìm hiểu những điểm 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ới WebHID, WebNFC và Web Serial. Chúng mở ra những trường hợp 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 trong thế giới thực.
Các API này cho phép nhà sản xuất kết nối với phần cứng thú vị, độc đáo, các ứng dụng hội nghị truyền hình để 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 MicroPython REPL trên Raspberry Pi Pico. Web Serial cũng được Espruino sử dụng trong IDE dựa trên web của họ.
Tại CDS 2019, Francois đã viết một trò chơi vui nhộn theo phong cách trí nhớ bằng Web NFC. Bạn phải nhấn điện thoại vào thẻ bên phải theo đúng thứ tự.
Và tôi thích nhất là @bramus đã dùng WebHID để kết nối với StreamDeck, tạo ra một bàn trống của Daft Punk. Nếu bạn không có StreamDeck, hãy xem video minh hoạ của anh ấy 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ó 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 cho WebHID, WebNFC và Web Serial.
Các thay đổi đối với tiêu chí về khả năng cài đặt PWA
Hỗ trợ ngoại tuyến là một phần quan trọng trong tiêu chí về khả năng cài đặt của Ứng dụng web tiến bộ ngay từ đầu. Giố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 một cách đáng tin cậy. Ứng dụng phải chạy nhanh và người dùng không bao giờ được thấy 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ó trải nghiệm ngoại tuyến. Nếu PWA của bạn đã có trải nghiệm khi không có mạng, 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 bạn cần thêm một phương thức thanh toán!
Kể từ Chrome 89, nếu PWA của bạn không đưa ra phản hồi hợp lệ khi không có mạng, bạn sẽ thấy một cảnh báo trong Công cụ cho nhà phát triển ở thẻ Vấn đề và Lighthouse sẽ cho biết có vấn đề. Việc thực thi sẽ bắt đầu từ Chrome 93 vào cuối năm nay.
Bạn có thể quyết định loại trải nghiệm khi không có mạng mà bạn muốn cung cấp. Tốt nhất là bạn nên cung cấp càng nhiều thông tin về trải nghiệm của mình càng tốt. Nhưng ít nhất, bạn có thể dùng một trang dự phòng khi không có mạng.
Bạn có thể tìm 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 này trong bài viết Cải thiện khả năng phát hiện chế độ 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 trình chạy dịch vụ sẵn sàng cho hoạt động sản xuất 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.
Web Share và Web Share Target 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, thì 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 một thời gian nhưng hiện được hỗ trợ trên ChromeOS và Windows.
Web Share cho phép người dùng gửi tệp hoặc dữ liệu đến các ứng dụng đã cài đặt khác trên thiết bị của họ, chẳng hạn như chia sẻ ảnh từ Google Photos lên 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 đích đến để 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 Web Share Target API.
"share_target": {
"action": "/?share-target",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"files": [
{
"name": "file",
"accept": ["image/*"],
},
],
},
},
Hãy xem phần Tích hợp với giao diện người dùng chia sẻ của hệ điều hành bằng Web Share API và Nhận dữ liệu được chia sẻ bằng Web Share Target API để xem 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 nữa.
Chrome hiện cho phép await ở cấp cao nhất trong các mô-đun JavaScript.
Để giảm sự nhầm lẫn cho người dùng, chúng tôi đã cập nhật biểu tượng xuất hiện trong thanh địa chỉ cho các PWA có thể cài đặt.
Ngoài ra, nếu đã dùng một Hoạt động trên web đáng tin cậy để cung cấp PWA của bạn trong Cửa hàng Play cho ChromeOS, bạn có thể đăng ký bản dùng thử theo nguyên gốc Digital Goods API.
Tài liệu đọc thêm
Đây chỉ là 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 những 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 không dùng nữa và bị xoá trong Chrome 89
- Thông tin cập nhật trên ChromeStatus.com cho Chrome 88
- Tính năng mới trong JavaScript trong Chrome 88
- Danh sách thay đổi trong kho lưu trữ nguồn Chromium
Đăng ký
Nếu muốn nắm bắt thông tin mới nhất về các video của chúng tôi, hãy đăng ký theo dõi kênh YouTube của Chrome Developers. Bạn sẽ nhận được thông báo qua email mỗi khi chúng tôi ra mắt một video mới.
Tôi là Pete LePage. Ngay khi Chrome 90 được phát hành, tôi sẽ có mặt ở đây để giới thiệu các 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