Ứng dụng web tiến bộ (PWA) dành cho máy tính là một cách tuyệt vời để xây dựng ứng dụng trên nhiều nền tảng và nhiều trình duyệt với mô hình bảo mật tập trung vào sự an toàn và quyền riêng tư của người dùng, đồng thời có tính năng chia sẻ tích hợp sẵn với khả năng liên kết vốn có của web. Xây dựng ứng dụng web mới hoặc cải thiện ứng dụng web hiện có bằng các API hiện đại để cung cấp cho chúng các chức năng, độ tin cậy và khả năng cài đặt như ứng dụng dành cho máy tính. PWA là cách tốt nhất để phân phối ứng dụng web của bạn cho ChromeOS.
Trên ChromeOS, sức mạnh của nền tảng web là yếu tố quan trọng nhất; ứng dụng web là một tính năng cốt lõi của nền tảng. Các PWA đã cài đặt sẽ xuất hiện trong trình chạy ChromeOS, có thể được ghim vào kệ và tích hợp sâu với phần còn lại của hệ điều hành.
Bắt đầu bằng cách xem Danh sách kiểm tra PWA và đảm bảo ứng dụng web của bạn đáp ứng danh sách kiểm tra PWA cốt lõi. Bạn có thể sử dụng PWABuilder để cung cấp một trang ngoại tuyến tuỳ chỉnh và giúp người dùng cài đặt ứng dụng của bạn. Sau đó, hãy sử dụng những đề xuất này để giúp PWA của bạn nổi bật trên ChromeOS.
Đảm bảo có thể cài đặt
Một trong những lợi thế lớn của PWA so với các ứng dụng web thông thường là khả năng cài đặt, giống như các ứng dụng truyền thống trên máy tính. Đường dẫn Ứng dụng web tiến bộ trên web.dev có một phần dành riêng cho việc giúp người dùng cài đặt PWA; hãy sử dụng phần đó để bắt đầu. Để một PWA được xác định là có thể cài đặt trên ChromeOS, bạn phải đáp ứng các tiêu chí sau. Bạn có thể kiểm tra bằng quy trình kiểm tra có thể cài đặt của Lighthouse:
- Tệp này phải có một tệp kê khai ứng dụng web hợp lệ
-
Ứng dụng đó phải đáp ứng các tiêu chí cài đặt của Chrome
- Đối với PWA trên ChromeOS, lời nhắc cài đặt sẽ xuất hiện trong thanh địa chỉ mà không cần đáp ứng ngưỡng phỏng đoán mức độ tương tác của người dùng.
Biểu tượng là một phần quan trọng trong danh tính của PWA, vì vậy, hãy đảm bảo rằng biểu tượng của bạn thú vị và độc đáo; thậm chí, bạn có thể thêm độ trong suốt! Vì PWA có một cơ sở mã được chia sẻ trên tất cả các nền tảng, nên bạn phải đảm bảo có sẵn một biểu tượng có thể che phủ. Đảm bảo bạn cũng thêm các biểu tượng thông thường cho những hệ điều hành không hỗ trợ biểu tượng có thể chỉnh sửa.
Sau khi bạn cài đặt PWA, ứng dụng này sẽ xuất hiện trên ChromeOS, từ trình chạy đến kệ. Việc cài đặt PWA cũng mở ra một số khả năng bổ sung để ứng dụng của bạn thực sự nổi bật.
Lưu ý về việc làm việc khi không có mạng
Chỉ cần cho phép cài đặt ứng dụng, bạn sẽ có nhiều lợi thế về khả năng khám phá, khả năng hữu dụng và chức năng. Việc cho phép cài đặt PWA không có nghĩa là toàn bộ trải nghiệm của bạn phải hoạt động khi không có mạng. Tuy nhiên, để một ứng dụng web đã cài đặt có cảm giác như một ứng dụng truyền thống, ứng dụng đó phải có một số chức năng hoạt động khi không có mạng. Một trang tuỳ chỉnh cơ bản ở chế độ ngoại tuyến là đủ để bắt đầu; người dùng mong đợi các ứng dụng đã cài đặt không gặp sự cố khi trạng thái kết nối thay đổi. Giống như một ứng dụng truyền thống không bao giờ hiển thị trang trống khi không có mạng, PWA cũng không bao giờ được hiển thị trang ngoại tuyến mặc định của trình duyệt. Các trang tuỳ chỉnh khi không có mạng có thể là một thông báo cho người dùng biết rằng họ cần có kết nối mạng để chơi trò chơi, hoặc là một trang giúp họ giết thời gian cho đến khi kết nối lại được. Việc cung cấp trải nghiệm tuỳ chỉnh khi không có mạng cho các trang hoặc tính năng chưa được lưu vào bộ nhớ đệm và cần có kết nối sẽ giúp thu hẹp khoảng cách về trải nghiệm người dùng giữa ứng dụng và web.
Bạn có thể tạo một trang đơn giản ở chế độ ngoại tuyến trong sự kiện install của worker dịch vụ bằng cách lưu trước vào bộ nhớ đệm trang mong muốn để sử dụng sau và phản hồi bằng trang đó nếu người dùng đang ở chế độ ngoại tuyến. Bạn có thể xem mẫu trang tuỳ chỉnh khi không có mạng của chúng tôi để xem ví dụ về cách hoạt động của tính năng này và tìm hiểu cách tự triển khai.
Nếu muốn mang đến trải nghiệm mạnh mẽ hơn, ngoài Cache Storage API, bạn có thể sử dụng các tính năng như IndexedDB để lưu trữ NoSQL trong trình duyệt và đồng bộ hoá trong nền để cho phép người dùng thực hiện các hành động khi không có mạng và hoãn giao tiếp với máy chủ cho đến khi người dùng có kết nối ổn định trở lại. Bạn cũng có thể triển khai các mẫu như phiên an toàn, tồn tại lâu dài để duy trì trạng thái xác thực của người dùng và màn hình khung để nhanh chóng cho người dùng biết rằng bạn đang tải nội dung có thể quay lại nội dung được lưu vào bộ nhớ đệm hoặc chỉ báo ngoại tuyến nếu cần.
Giúp người dùng có thể tương tác
Hầu hết các thiết bị ChromeOS đều hỗ trợ thao tác chạm và nhiều thiết bị cũng hỗ trợ bút cảm ứng. Vì vậy, bạn cần đảm bảo ứng dụng của mình hoạt động trơn tru với cả hai phương thức nhập này, ngoài bàn phím và chuột thông thường. API sự kiện con trỏ được thiết kế riêng để xử lý việc này! Một số sự kiện cơ bản liên quan đến con trỏ mà bạn có thể không cần phải thay đổi, chẳng hạn như các sự kiện click. Các sự kiện khác, chẳng hạn như mouseup hoặc touchstart, cần được di chuyển sang các sự kiện con trỏ tương ứng để hoạt động liền mạch trên mọi loại con trỏ. Bạn thậm chí có thể quản lý riêng các loại dữ liệu đầu vào khác nhau nếu muốn. Đối với những ứng dụng và trò chơi phụ thuộc nhiều vào thao tác nhập của người dùng bằng xúc giác, việc chuyển sang API sự kiện con trỏ sẽ tạo ra sự khác biệt lớn trên các thiết bị ChromeOS.
Vẽ mượt mà trên web
Nếu bạn đang tạo một ứng dụng cho phép người dùng vẽ bằng ngón tay hoặc bút cảm ứng, thì việc duy trì độ trễ giữa dữ liệu đầu vào của họ và dữ liệu đầu ra của bạn đủ nhanh để tạo cảm giác mượt mà là điều khó thực hiện từ trước đến nay. Khi tạo các loại ứng dụng dựa trên Canvas API này cho ChromeOS, bạn nên dùng gợi ý desynchronized cho canvas.getContext() để cung cấp khả năng kết xuất có độ trễ thấp. Để sử dụng gợi ý desynchronized cho một canvas, hãy làm như sau:
const canvas = document.createElement('canvas'); // or select one from the DOM const ctx = canvas.getContext('2d', { desynchronized: true, // Other options here… }); if (ctx.getContextAttributes().desynchronized) { // Low-latency supported! Do something awesome with it. } else { // Low-latency not supported! Fall back to less awesome stuff }
Những điều cần cân nhắc khi thiết kế cho thao tác chạm
Bạn cần cân nhắc khả năng hỗ trợ cảm ứng và bút cảm ứng khi thiết kế ứng dụng web. Những lượt tương tác mà bạn có thể coi là hiển nhiên, chẳng hạn như di chuột, sẽ không hoạt động hiệu quả (nếu có) đối với các phương thức nhập khác. Dưới đây là một số phương pháp hay nhất mà bạn nên lưu ý khi thiết kế giao diện thân thiện với thao tác chạm và bút cảm ứng:
- Đừng đưa ra giả định về dữ liệu đầu vào dựa trên kích thước màn hình. Thay vào đó, hãy sử dụng tính năng phát hiện, tốt nhất là vào thời gian nhập, để xác định cách phản hồi. Xin lưu ý rằng trên ChromeOS, người dùng có thể dễ dàng chuyển đổi giữa chuột, thao tác chạm và bút cảm ứng trong cùng một phiên.
- Đảm bảo rằng các phần tử mà bạn muốn người dùng chạm vào có kích thước mục tiêu tối thiểu đủ lớn để người dùng không vô tình nhấn vào các phần tử xung quanh.
- Coi hiệu ứng di chuột là nâng cao dần và đảm bảo người dùng có thể thực hiện thao tác tương tác bằng các phương tiện khác cho thao tác chạm và bút cảm ứng (ví dụ: nhấn và giữ hoặc nhấn).
- Người dùng cảm ứng mong muốn có thể tương tác trực tiếp với các phần tử trên màn hình, chẳng hạn như thao tác chụm để thu phóng trên bản đồ thay vì dùng các nút phóng to/thu nhỏ. Việc thêm các cử chỉ chạm phổ biến (nếu phù hợp) có thể giúp ứng dụng của bạn trông tự nhiên hơn.
Đảm bảo có khả năng
Mặc dù một số chức năng của PWA thường được biết đến, chẳng hạn như Notifications API cho phép một ứng dụng web nhận và xuất bản thông báo trên nền tảng, nhưng có một số tính năng mới và sắp ra mắt sẽ xuất hiện trên web để tăng cường sức mạnh cho các ứng dụng của bạn. Dự án Web Capabilities của Chromium (còn gọi là Dự án Fugu 🐡) là một nỗ lực nhằm hỗ trợ các tiêu chuẩn web mới, mạnh mẽ, đồng thời duy trì những điểm độc đáo của web: tính bảo mật lấy người dùng làm trung tâm, độ ma sát thấp và khả năng tương thích trên nhiều nền tảng.
Lưu ý: Các chức năng này đang ở nhiều giai đoạn hoàn thiện, từ đang được cân nhắc đến đã được triển khai và có thể chỉ nhắm đến máy tính hoặc thiết bị di động chứ không nhắm đến cả hai. Mặc dù người dùng ChromeOS có thể nhận được các tính năng nhắm đến máy tính khi các tính năng này ra mắt, nhưng việc hỗ trợ đa nền tảng (ngay cả khi hỗ trợ ổn định trong ChromeOS) đôi khi có thể là một quá trình kéo dài nhiều năm.