Chrome 89 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:
- WebHID, WebNFC và Web Serial đã hoàn tất bản dùng thử theo nguyên gốc và hiện đã có phiên bản chính thức.
- Chúng tôi sẽ loại bỏ lỗ hổng mà một số nhà phát triển từng sử dụng để tuân thủ quy trình kiểm tra khả năng cài đặt PWA.
- Web Share và Mục tiêu chia sẻ web có trên máy tính.
- Và nhiều tính năng khác.
Tôi là Pete LePage, làm việc và chụp ả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 89!
WebHID, WebNFC và Web Serial
Tôi quan tâm đến WebHID, WebNFC và Web Serial. Các trò chơi này mở ra những tình huống mới chưa từng có trước đây, tương tác với phần cứng thực tế.
Các thiết bị này cho phép nhà sản xuất kết nối với các ứng dụng hội nghị truyền hình, phần cứng độc đáo và thú vị để sử dụng các nút điện thoại chuyên dụng trên loa chuyên dụng. Hoặc vô số trường hợp sử dụng 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.
Tại CDS 2019, Francois đã viết một trò chơi thú vị, theo phong cách bộ nhớ bằng cách sử dụng NFC của Web. Bạn phải nhấn điện thoại vào đúng thẻ, theo đúng thứ tự.
Và @bramus mà tôi yêu thích đã sử dụng WebHID để kết nối với StreamDeck, dùng để tạo giá đỡ trống 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 đoạn mã trên GitHub.
Cho dù đó là trang web tương tác với phần cứng hay phần cứng có thể tương tác với nhiều trang web, người dùng sẽ chiến thắng 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í về khả năng cài đặt PWA
Ngay từ đầu, tính năng hỗ trợ ngoại tuyến đã là một phần quan trọng trong tiêu chí của Ứng dụng web tiến bộ đối với khả năng cài đặt. Giống như với ứng dụng cần cài đặt khác, người dùng kỳ vọng ứng dụng đó hoạt động một cách đáng tin cậy. Việc này sẽ diễn ra nhanh chóng và họ sẽ không bao giờ nhìn thấy trò khủng long ngoại tuyến!
Cuối năm nay, chúng tôi dự định đóng một lỗ hổng cho phép một số trang web đáp ứng 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 thì đã đến lúc để thêm một tài khoản!
Kể từ Chrome 89, nếu PWA của bạn không cung cấp phản hồi hợp lệ khi ngoại tuyến, bạn sẽ thấy một cảnh báo trong Công cụ cho nhà phát triển trong thẻ Vấn đề và Lighthouse sẽ cho biết đã xảy ra sự cố. Đồng thời, quá trình 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à mình muốn cung cấp. Tốt nhất là bạn nên cung cấp nhiều trải nghiệm nhất có thể. Nhưng ít nhất, quy trình này có thể đơn giản như một trang dự phòng ngoại tuyến.
Bạn có thể tìm thêm thông tin chi tiết về thay đổi này, cũng như lý do chúng tôi thực hiện trong bài viết Cải thiện tính năng phát hiện hoạt động ngoại tuyến của Ứng dụng web tiến bộ.
Nếu bạn không chắc nên bắt đầu từ đâu, hãy tham khảo Workbox. Lớp này có một bộ thư viện có thể hỗ trợ trình chạy dịch vụ sẵn sàng phát hành công khai cho PWA của bạn. Hoặc, đối với trang dự phòng ngoại tuyến đơn giản, bài viết Tạo trang dự phòng ngoại tuyến 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 dành 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 các API Mục tiêu của Web Share và Web Share. Các API này đã có trên thiết bị di động được một thời gian nhưng hiện đã được hỗ trợ trên ChromeOS và Windows.
Tính năng Chia sẻ web giúp người dùng có thể gửi tệp hoặc dữ liệu đến các ứng dụng khác được cài đặt 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 mục tiêu nhằm các ứng dụng khác có thể chia sẻ tệp hoặc dữ liệu với bạn, bạn cầ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 các bài viết Tích hợp với giao diện người dùng chia sẻ hệ điều hành qua API Web Share và Nhận dữ liệu được chia sẻ bằng Web Share Target API để 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 lợi ích khác.
Chrome hiện cho phép await cấp cao nhất trong các mô-đun JavaScript.
Để giảm nhầm lẫn cho người dùng, 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 đáng tin cậy trên web để cung cấp PWA trong Cửa hàng Play cho ChromeOS, bạn có thể đăng ký bản dùng thử theo nguyên gốc API Hàng hoá.
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 89.
- Tính năng mới trong Công cụ của Chrome cho nhà phát triển (89)
- Ngừng sử dụng và xoá Chrome 89
- Thông tin cập nhật về ChromeStatus.com cho Chrome 88
- Những điểm mới về JavaScript trên Chrome 88
- Danh sách thay đổi kho lưu trữ nguồn Chromium
Đă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. Ngay sau khi Chrome 90 được phát hành, tôi sẽ sẵn sàng cho bạn biết các tính năng mới của Chrome!
Ghi công
Ảnh chụp quả mâm xôi Pis và Arduino là của Harrison Broadbent trên Unsplash