Ứng dụng web tiến bộ (PWA) được xây dựng và cải tiến bằng các API hiện đại để mang lại các chức năng nâng cao, độ tin cậy và khả năng cài đặt trong khi tiếp cận mọi người, mọi nơi, trên mọi thiết bị bằng một cơ sở mã duy nhất. Để giúp bạn tạo ra trải nghiệm tốt nhất có thể, hãy sử dụng danh sách kiểm tra và đề xuất cốt lõi và tối ưu để hướng dẫn bạn.
Danh sách kiểm tra cốt lõi về Ứng dụng web tiến bộ
Danh sách kiểm tra của ứng dụng web tiến bộ mô tả những yếu tố giúp tất cả người dùng có thể cài đặt và sử dụng một ứng dụng, bất kể kích thước hoặc loại dữ liệu đầu vào.
Hiệu suất đóng vai trò quan trọng trong sự thành công của mọi trải nghiệm trực tuyến, vì các trang web có hiệu suất cao tương tác và giữ chân người dùng hiệu quả hơn so với những trang web có hiệu suất kém. Tập trung vào việc tối ưu hoá các chỉ số hiệu suất lấy người dùng làm trung tâm.
Lý do
Tốc độ rất quan trọng để thu hút người dùng sử dụng ứng dụng của bạn. Trên thực tế, khi thời gian tải trang tăng từ 1 giây lên 10 giây, xác suất người dùng thoát trang sẽ tăng 123%. Hiệu suất cũng không dừng lại ở sự kiện load. Người dùng không bao giờ nên thắc mắc liệu hoạt động tương tác của họ (ví dụ: nhấp vào một nút) có được đăng ký hay không. Thao tác cuộn và ảnh động sẽ tạo cảm giác mượt mà.
Hiệu suất ảnh hưởng đến toàn bộ trải nghiệm của bạn, về cả hành vi của ứng dụng lẫn cách người dùng cảm nhận về ứng dụng đó.
Mặc dù tất cả ứng dụng đều có những nhu cầu khác nhau, nhưng các bài kiểm tra hiệu suất trong Lighthouse đều dựa trên Các chỉ số quan trọng chính của trang web. Việc đạt điểm cao trong các lượt kiểm tra đó sẽ giúp người dùng có trải nghiệm thú vị hơn. Bạn cũng có thể dùng PageSpeed Insights hoặc Báo cáo trải nghiệm người dùng trên Chrome để nhận dữ liệu thực tế về hiệu suất của ứng dụng web.
Cách thức
Làm theo hướng dẫn của chúng tôi về thời gian tải nhanh để tìm hiểu cách giúp PWA khởi động nhanh và duy trì tốc độ nhanh.
Người dùng có thể sử dụng bất kỳ trình duyệt nào họ chọn để truy cập vào ứng dụng web của bạn trước khi ứng dụng được cài đặt.
Lý do
Ứng dụng web tiến bộ trước tiên là ứng dụng web, do vậy, cần hoạt động trên nhiều trình duyệt.
Theo Jeremy Keith trong bài viết Thiết kế web khôi phục, cách hiệu quả để làm việc này là xác định các tính năng cốt lõi, cung cấp các tính năng đó bằng công nghệ đơn giản nhất có thể, sau đó nâng cao trải nghiệm nếu có thể. Trong nhiều trường hợp, điều này có nghĩa là bạn chỉ cần bắt đầu với HTML để tạo các tính năng cốt lõi và nâng cao trải nghiệm người dùng bằng CSS và JavaScript nhằm tạo ra trải nghiệm hấp dẫn hơn.
Ví dụ: gửi biểu mẫu. Cách đơn giản nhất để triển khai đó là biểu mẫu HTML gửi yêu cầu POST. Sau khi tạo biểu mẫu đó, bạn có thể nâng cao trải nghiệm với JavaScript để xác thực biểu mẫu và gửi biểu mẫu qua AJAX, nhờ đó cải thiện trải nghiệm cho những người dùng có thể hỗ trợ biểu mẫu đó.
Người dùng trải nghiệm trang web của bạn trên nhiều loại thiết bị và trình duyệt. Bạn không thể chỉ nhắm đến điểm cao nhất của phạm vi đó. Hãy sử dụng tính năng phát hiện tính năng để mang lại trải nghiệm hữu ích cho nhiều người dùng tiềm năng nhất có thể, bao gồm cả những người sử dụng trình duyệt và thiết bị chưa được hỗ trợ.
Cách thức
Thiết kế web bền bỉ của Jeremy Keith là một tài nguyên tuyệt vời mô tả cách suy nghĩ về thiết kế web trong phương pháp tiến bộ và đa trình duyệt này.
Đọc thêm
- Tìm hiểu về cải tiến tiến bộ của List Apart là một phần giới thiệu hay về chủ đề này.
- Tạp chí đột phá Cải tiến tiến bộ: Đó là gì và cách sử dụng? cung cấp phần giới thiệu thực tế và đường liên kết đến những chủ đề nâng cao hơn.
- Bài viết Triển khai tính năng phát hiện tính năng của MDN thảo luận cách phát hiện một tính năng bằng cách truy vấn trực tiếp tính năng đó.
Người dùng có thể sử dụng PWA của bạn trên mọi kích thước màn hình và tất cả nội dung của PWA đều có sẵn ở mọi kích thước khung nhìn.
Lý do
Thiết bị có nhiều kích thước và người dùng có thể dùng ứng dụng của bạn ở nhiều kích thước, thậm chí trên cùng một thiết bị. Do đó, điều quan trọng là phải đảm bảo không chỉ nội dung vừa với khung nhìn, mà còn sử dụng được tất cả tính năng và nội dung trên trang web của bạn ở mọi kích thước khung nhìn.
Những việc cần làm mà người dùng muốn hoàn thành và nội dung họ muốn truy cập không thay đổi theo kích thước khung nhìn. Bạn có thể sắp xếp lại nội dung cho phù hợp với các kích thước khung nhìn khác nhau và toàn bộ nội dung sẽ vẫn xuất hiện theo cách này hay cách khác. Trên thực tế, như Luke Wroblewski đã nói trong cuốn sách Ưu tiên thiết bị di động của mình, việc bắt đầu từ quy mô nhỏ và điều chỉnh thiết kế cho màn hình lớn hơn có thể cải thiện thiết kế của trang web:
Thiết bị di động yêu cầu các nhóm phát triển phần mềm chỉ tập trung vào những dữ liệu và hành động quan trọng nhất trong một ứng dụng. Đơn giản là màn hình 320 x 480 pixel không có chỗ cho các phần tử không liên quan và không cần thiết. Bạn phải ưu tiên.
Cách thức
Có nhiều tài nguyên về thiết kế thích ứng, trong đó có bài viết gốc của Ethan Marcotte, một bộ sưu tập các khái niệm quan trọng liên quan đến thiết kế này, cũng như nhiều cuốn sách và bài nói chuyện. Để thu hẹp cuộc thảo luận này trong phạm vi các khía cạnh nội dung của thiết kế thích ứng, hãy tham khảo thiết kế ưu tiên nội dung và bố cục thích ứng ưu tiên nội dung. Cuối cùng, mặc dù tập trung vào thiết bị di động, nhưng các bài học trong 7 điều huyền thoại chết người trên thiết bị di động của Josh Clark cũng liên quan đến chế độ xem trang web thích ứng quy mô nhỏ cũng như trên thiết bị di động nói chung.
Khi người dùng không kết nối mạng, việc giữ họ ở lại PWA của bạn sẽ mang lại trải nghiệm liền mạch hơn so với việc quay lại trang ngoại tuyến của trình duyệt mặc định.
Lý do
Người dùng mong muốn các ứng dụng đã cài đặt hoạt động bất kể trạng thái kết nối của họ. Ứng dụng dành riêng cho nền tảng không bao giờ hiện trang trống khi không có kết nối mạng và PWA không được hiển thị trang ngoại tuyến mặc định của trình duyệt. Cung cấp trải nghiệm ngoại tuyến tuỳ chỉnh, cả khi người dùng chuyển đến một URL chưa được lưu vào bộ nhớ đệm lẫn khi người dùng cố gắng sử dụng một tính năng cần có kết nối, sẽ giúp trải nghiệm web như một phần của thiết bị đang chạy.
Cách thức
Trong sự kiện install của một trình chạy dịch vụ, bạn có thể lưu trước một trang ngoại tuyến tuỳ chỉnh vào bộ nhớ đệm để sử dụng sau này. Nếu người dùng không có kết nối mạng, bạn có thể phản hồi bằng trang ngoại tuyến tuỳ chỉnh đã được lưu trước vào bộ nhớ đệm. Bạn có thể làm theo mẫu trang ngoại tuyến tuỳ chỉnh của chúng tôi để xem ví dụ thực tế về phương pháp này và tìm hiểu cách tự triển khai.
Những người dùng cài đặt hoặc thêm ứng dụng vào thiết bị có xu hướng tương tác với các ứng dụng đó nhiều hơn.
Lý do
Việc cài đặt Ứng dụng web tiến bộ sẽ giúp ứng dụng có giao diện và hoạt động giống như mọi ứng dụng đã cài đặt khác. Cửa sổ này được khởi chạy từ cùng một nơi mà người dùng chạy các ứng dụng khác của họ. Ứng dụng này chạy trong cửa sổ ứng dụng riêng, tách biệt với trình duyệt và xuất hiện trong danh sách tác vụ, giống như các ứng dụng khác.
Tương tự như với các ứng dụng dành riêng cho thiết bị, người dùng cài đặt ứng dụng của bạn là đối tượng tương tác nhiều nhất và thường có chỉ số tương tác ngang bằng với người dùng ứng dụng trên thiết bị di động. Những chỉ số này bao gồm nhiều lượt truy cập lặp lại hơn, thời gian ở trên trang web của bạn lâu hơn và tỷ lệ chuyển đổi cao hơn so với khách truy cập thông thường.
Cách thức
Làm theo hướng dẫn cài đặt của chúng tôi để tìm hiểu cách thiết lập PWA có thể cài đặt.
Danh sách kiểm tra tối ưu cho Ứng dụng web tiến bộ
Để tạo một ứng dụng web tiến bộ (PWA) thực sự tuyệt vời, một ứng dụng mang lại cảm giác như một ứng dụng tốt nhất trong ngành, bạn cần nhiều hơn so với danh sách kiểm tra cốt lõi. Danh sách kiểm tra PWA tối ưu là cách giúp PWA của bạn cảm thấy như một phần của thiết bị mà nó đang chạy, đồng thời tận dụng những yếu tố làm cho web trở nên mạnh mẽ.
Khi không bắt buộc phải có kết nối Internet, ứng dụng của bạn vẫn hoạt động ngoại tuyến giống như khi hoạt động trực tuyến.
Lý do
Ngoài việc cung cấp một trang ngoại tuyến tuỳ chỉnh, người dùng còn kỳ vọng rằng PWA có thể sử dụng được khi không có mạng. Ví dụ: ứng dụng du lịch và hãng hàng không phải có sẵn thông tin chi tiết về chuyến đi và thẻ lên máy bay khi không có mạng. Ứng dụng nhạc, video và podcast phải cho phép phát khi không có mạng. Các ứng dụng xã hội và ứng dụng tin tức phải lưu nội dung gần đây vào bộ nhớ đệm để người dùng có thể đọc khi không có mạng. Người dùng cũng mong muốn duy trì được xác thực khi không có mạng. Vì vậy, hãy thiết kế để xác thực ngoại tuyến. PWA ngoại tuyến mang lại trải nghiệm thực sự giống như ứng dụng cho người dùng.
Cách thức
Sau khi xác định những tính năng mà người dùng muốn hoạt động khi không có mạng, bạn sẽ cần cung cấp nội dung của mình và thích ứng với bối cảnh ngoại tuyến. Bạn có thể sử dụng IndexedDB, một hệ thống lưu trữ NoSQL trong trình duyệt, để lưu trữ và truy xuất dữ liệu, đồng thời đồng bộ hoá trong nền để cho phép người dùng thực hiện thao tác khi không có mạng và trì hoãn quá trình giao tiếp của 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ể sử dụng trình chạy dịch vụ (service worker) để lưu trữ các loại nội dung khác (chẳng hạn như hình ảnh, tệp video và tệp âm thanh) để sử dụng khi không có mạng và để triển khai các phiên an toàn, dài hạn để đảm bảo tính xác thực của người dùng. Từ góc độ trải nghiệm người dùng, bạn có thể sử dụng màn hình khung giúp người dùng cảm nhận về tốc độ và nội dung trong khi tải. Sau đó, chúng 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 khi cần.
Mọi hoạt động tương tác của người dùng đều đáp ứng các yêu cầu về hỗ trợ tiếp cận WCAG 2.0.
Lý do
Tại một số thời điểm trong cuộc sống, hầu hết người dùng đều muốn sử dụng PWA của bạn theo cách tuân theo các yêu cầu về hỗ trợ tiếp cận WCAG 2.0. Khả năng tương tác của con người và hiểu được PWA của bạn tồn tại ở nhiều khía cạnh và nhu cầu có thể là tạm thời hoặc vĩnh viễn. Bằng cách làm cho PWA dễ truy cập, bạn sẽ giúp mọi người sử dụng được ứng dụng đó.
Cách thức
Giới thiệu về Hỗ trợ tiếp cận trên web của W3C là một nơi lý tưởng để bắt đầu. Phần lớn hoạt động kiểm thử khả năng hỗ trợ tiếp cận đều phải được thực hiện theo cách thủ công. Các công cụ như kiểm tra Hỗ trợ tiếp cận trong Lighthouse, rìu và Thông tin chi tiết về tính năng hỗ trợ tiếp cận có thể giúp bạn tự động hoá một số hoạt động kiểm thử khả năng hỗ trợ tiếp cận. Bạn cũng phải sử dụng các phần tử chính xác về mặt ngữ nghĩa thay vì tự tạo lại các phần tử đó, chẳng hạn như các phần tử a và button. Điều này đảm bảo rằng khi bạn cần xây dựng thêm tính năng nâng cao, hệ thống sẽ đáp ứng các kỳ vọng về khả năng hỗ trợ tiếp cận (chẳng hạn như thời điểm sử dụng mũi tên và thẻ).
Thẻ dinh dưỡng A11Y có lời khuyên tuyệt vời về vấn đề này cho một số thành phần thường gặp.
Người dùng có thể dễ dàng phát hiện thấy PWA của bạn thông qua tính năng tìm kiếm.
Lý do
Một trong những lợi thế lớn nhất của web là khả năng khám phá các trang web và ứng dụng thông qua công cụ tìm kiếm. Trên thực tế, hơn một nửa tổng lưu lượng truy cập vào trang web đến từ kết quả tìm kiếm tự nhiên. Việc đảm bảo rằng bạn có URL chính tắc cho nội dung và công cụ tìm kiếm có thể lập chỉ mục trang web của bạn là điều rất quan trọng để người dùng tiềm năng có thể tìm thấy PWA của bạn. Điều này đặc biệt đúng khi áp dụng tính năng kết xuất phía máy khách.
Cách thức
Hãy bắt đầu bằng cách đảm bảo rằng mỗi URL đều có một tiêu đề và phần mô tả meta riêng biệt và có tính mô tả. Sau đó, bạn có thể sử dụng Google Search Console và công cụ kiểm tra tính năng Tối ưu hoá cho công cụ tìm kiếm trong Lighthouse để gỡ lỗi và khắc phục các vấn đề về khả năng được phát hiện của PWA. Bạn cũng có thể dùng các công cụ dành cho chủ sở hữu trang web của Bing hoặc Yandex, đồng thời cân nhắc việc thêm dữ liệu có cấu trúc bằng giản đồ trên Schema.org vào PWA của mình.
PWA của bạn cũng có thể sử dụng được như nhau khi dùng chuột, bàn phím, bút cảm ứng hoặc thao tác chạm.
Lý do
Các thiết bị cung cấp nhiều phương thức nhập và người dùng phải có thể chuyển đổi liền mạch giữa các phương thức đó trong khi dùng ứng dụng của bạn. Điều quan trọng không kém là phương thức nhập không nên phụ thuộc vào kích thước màn hình, nghĩa là khung nhìn lớn phải hỗ trợ bàn phím và chuột. Hãy đảm bảo rằng ứng dụng và tất cả các tính năng của ứng dụng đều hỗ trợ việc sử dụng bất kỳ phương thức nhập nào mà người dùng có thể chọn. Khi thích hợp, hãy nâng cao trải nghiệm để cho phép cả các chế độ điều khiển dành riêng cho đầu vào (chẳng hạn như kéo để làm mới).
Cách thức
Pointer Events API (API Sự kiện con trỏ) cung cấp một giao diện hợp nhất để làm việc với nhiều tuỳ chọn nhập dữ liệu và đặc biệt hữu ích trong việc thêm tính năng hỗ trợ bút cảm ứng. Để hỗ trợ cả cảm ứng và bàn phím, hãy đảm bảo rằng bạn đang sử dụng đúng phần tử ngữ nghĩa (neo, nút, thành phần điều khiển biểu mẫu, v.v.) và không tạo lại các phần tử đó bằng HTML phi ngữ nghĩa. Khi bao gồm các lượt tương tác kích hoạt khi di chuột, hãy đảm bảo chúng cũng có thể kích hoạt khi bạn nhấp hoặc nhấn.
Khi yêu cầu quyền sử dụng các API mạnh mẽ, hãy cung cấp ngữ cảnh và chỉ hỏi khi cần API đó.
Lý do
Các API kích hoạt lời nhắc cấp quyền (chẳng hạn như thông báo, thông tin định vị vị trí và thông tin đăng nhập) được thiết kế có chủ ý để gây phiền toái cho người dùng vì chúng thường liên quan đến các tính năng mạnh mẽ cần phải chọn sử dụng. Việc kích hoạt những lời nhắc như vậy mà không kèm theo ngữ cảnh bổ sung, chẳng hạn như khi tải trang, sẽ khiến người dùng ít có khả năng chấp nhận những quyền đó và có nhiều khả năng không tin tưởng chúng trong tương lai. Thay vào đó, bạn chỉ kích hoạt những lời nhắc đó sau khi đưa ra lý do theo ngữ cảnh cho người dùng về lý do bạn cần quyền đó.
Cách thức
Bài viết Quyền về trải nghiệm người dùng và Cách phù hợp để yêu cầu người dùng cấp quyền của Hành tinh trải nghiệm người dùng là những tài nguyên hữu ích giúp bạn hiểu cách thiết kế lời nhắc cấp quyền, mặc dù tập trung vào thiết bị di động, lại áp dụng cho tất cả các ứng dụng web tiến bộ (PWA).
Việc duy trì cơ sở mã ở trạng thái tốt giúp bạn dễ dàng đạt được mục tiêu và cung cấp các tính năng mới.
Lý do
Bạn cần thực hiện nhiều thao tác để xây dựng một ứng dụng web hiện đại. Việc đảm bảo ứng dụng luôn được cập nhật và cơ sở mã hoạt động tốt sẽ giúp bạn dễ dàng phân phối các tính năng mới đáp ứng được các mục tiêu khác trong danh sách kiểm tra này.
Cách thức
Có một số bước kiểm tra có mức độ ưu tiên cao để đảm bảo cơ sở mã hoạt động tốt:
- Tránh sử dụng thư viện có lỗ hổng đã biết.
- Hãy đảm bảo bạn hiện không sử dụng các API không dùng nữa.
- Xoá các phương pháp lập trình không an toàn khỏi cơ sở mã của bạn (chẳng hạn như sử dụng
document.write()hoặc sử dụng trình nghe sự kiện cuộn không thụ động), - Thậm chí, bạn có thể viết mã theo cách phòng thủ để đảm bảo PWA không bị lỗi nếu số liệu phân tích hoặc thư viện của bên thứ ba khác không tải được.
- Hãy cân nhắc việc yêu cầu phân tích mã tĩnh, chẳng hạn như tìm lỗi mã nguồn, cũng như kiểm thử tự động trong nhiều trình duyệt và kênh phát hành. Những kỹ thuật này có thể giúp phát hiện lỗi trước khi đưa vào ứng dụng chính thức.