Ứng dụng web tiến bộ (PWA) được xây dựng và nâng cao bằng các API hiện đại để mang lại khả năng, độ tin cậy và khả năng cài đặt nâng cao, đồng thời 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 ứng dụng web tiến bộ mô tả những yếu tố giúp mọi 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.
Khởi động nhanh, duy trì tốc độ nhanh
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 tốt hơn so với những trang web có hiệu suất thấp. Tập trung vào việc tối ưu hoá các chỉ số hiệu suất tập trung vào người dùng.
Lý do
Tốc độ là yếu 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 khỏi trang sẽ tăng 123%. Hiệu suất cũng không dừng lại vớ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ọ (chẳng hạn như nhấp vào một nút) có được ghi nhận hay không. Thao tác cuộn và ảnh động phải mượt mà. Hiệu suất ảnh hưởng đến toàn bộ trải nghiệm của bạn, cả về cách ứng dụng hoạt động và cách người dùng cảm nhận về ứng dụng.
Mặc dù tất cả các ứng dụng đều có nhu cầu khác nhau, nhưng các hoạt động 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 và việc đạt điểm cao trong các hoạt động kiểm tra đó sẽ giúp người dùng có nhiều khả năng có được trải nghiệm thú vị hơn. Bạn cũng có thể sử dụng PageSpeed Insights hoặc Báo cáo trải nghiệm người dùng của Chrome để nhận dữ liệu hiệu suất thực tế cho ứng dụng web của mình.
Cách thức
Hãy 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 của bạn khởi động nhanh và duy trì tốc độ nhanh.
Hoạt động trong mọi trình duyệt
Người dùng có thể sử dụng bất kỳ trình duyệt nào mà họ chọn để truy cập vào ứng dụng web của bạn trước khi cài đặt.
Lý do
Ứng dụng web tiến bộ là ứng dụng web trước tiên, tức là chúng cần hoạt động trên nhiều trình duyệt.
Theo Jeremy Keith trong cuốn Resilient Web Design (Thiết kế web linh hoạt), một 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 bằng HTML để tạo các tính năng cốt lõi, đồng thời cải thiện trải nghiệm người dùng bằng CSS và JavaScript để tạo ra trải nghiệm hấp dẫn hơn.
Hãy lấy lượt gửi biểu mẫu làm ví dụ. Cách đơn giản nhất để triển khai việc đó là sử dụng một 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 bằng JavaScript để xác thực biểu mẫu và gửi biểu mẫu thông qua AJAX, 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 thiết bị và trình duyệt. Bạn không thể chỉ nhắm đến phân khúc cao nhất của phổ đó. Sử dụng tính năng phát hiện để 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ể, kể cả những người dùng trình duyệt và thiết bị chưa ra mắt.
Cách thức
Thiết kế web linh hoạt 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 theo phương pháp tiến bộ, đa trình duyệt này.
Đọc thêm
- Bài viết Tìm hiểu về tính năng cải tiến tăng dần của A List Apart là một bài giới thiệu hay về chủ đề này.
- Bài viết Progressive Enhancement: What It Is, And How To Use It? (Tăng cường từng bước: Khái niệm và cách sử dụng) của Smashing Magazine giới thiệu một cách thực tế và liên kết đến các chủ đề nâng cao hơn.
- Bài viết Triển khai tính năng phát hiện của MDN thảo luận về cách phát hiện một tính năng bằng cách trực tiếp truy vấn tính năng đó.
Thích ứng với mọi kích thước màn hình
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 hiển thị.
Lý do
Thiết bị có nhiều kích thước và người dùng có thể sử dụng ứng dụng của bạn ở nhiều kích thước, ngay cả trên cùng một thiết bị. Do đó, bạn cần đảm bảo rằng nội dung của bạn vừa với khung nhìn và tất cả các tính năng cũng như nội dung của trang web đều có thể sử dụng được ở mọi kích thước khung nhìn.
Những việc 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 hiển thị. Bạn có thể sắp xếp lại nội dung cho các kích thước khung hiển thị khác nhau và tất cả nội dung đó sẽ xuất hiện theo cách này hay cách khác. Trên thực tế, như Luke Wroblewski đã nêu trong cuốn sách Mobile First (Ưu tiên thiết bị di động), 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 một 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. Màn hình 320 x 480 pixel không có chỗ cho các phần tử thừa, không cần thiết. Bạn phải ưu tiên."
Cách thức
Có rất nhiều tài nguyên về thiết kế thích ứng, bao gồm: bài viết gốc của Ethan Marcotte và tập hợp các khái niệm quan trọng liên quan đến thiết kế thích ứng, cũng như vô số sách và bài nói chuyện.
Để thu hẹp phạm vi thảo luận này xuống 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
- Bố cục thích ứng có nội dung bên ngoài.
- Bảy lầm tưởng chết người về thiết bị di động, cũng liên quan đến chế độ xem cỡ nhỏ của các trang web thích ứng như mọi thiết bị di động.
Cung cấp một trang tuỳ chỉnh khi không có mạng
Khi người dùng không kết nối mạng, việc giữ họ trong 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 thị trang trống khi không có mạng và PWA không bao giờ hiển thị trang ngoại tuyến mặc định của trình duyệt. Việc cung cấp trải nghiệm tuỳ chỉnh khi không có mạng, cả khi người dùng chuyển đến một URL chưa được lưu vào bộ nhớ đệm và khi người dùng cố gắng sử dụng một tính năng yêu cầu kết nối, sẽ giúp trải nghiệm web của bạn có cảm giác như một phần của thiết bị mà ứng dụng đang chạy.
Cách thức
Trong sự kiện install của worker dịch vụ, bạn có thể lưu trước vào bộ nhớ đệm một trang tuỳ chỉnh khi không có mạng để hiển thị khi người dùng chuyển sang chế độ không có mạng. Đọc bài viết Tạo trang dự phòng ngoại tuyến để tìm hiểu cách tự triển khai trang này. Chrome sẽ tiếp tục hiển thị một trang cơ bản khi không có mạng nếu không có trang nào được cung cấp.
Có thể cài đặt
Người dùng cài đặt hoặc thêm ứng dụng vào thiết bị của họ thường tương tác nhiều hơn với những ứng dụng đó.
Lý do
Khi bạn cài đặt một Ứng dụng web tiến bộ, ứng dụng đó sẽ có giao diện, cảm giác và hành vi giống như mọi ứng dụng đã cài đặt khác. Ứng dụng này được khởi chạy từ cùng một nơi mà người dùng khởi chạy các ứng dụng khác. Ứ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.
Giống như 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 gắn bó nhất và thường có các chỉ số tương tác tương đươ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 số lượt truy cập lặp lại nhiều hơn, thời gian ở lại trên trang web 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ó thể cài đặt của chúng tôi.
Danh sách kiểm tra ứng dụng web tiến bộ tối ưu
Để tạo một PWA thực sự tuyệt vời, một PWA mang lại cảm giác như một ứng dụng hàng đầu, bạn cần nhiều thứ hơn là chỉ danh sách kiểm tra cốt lõi. Danh sách kiểm tra PWA tối ưu là về việc làm cho PWA của bạn có cảm giác như một phần của thiết bị mà PWA đang chạy, đồng thời tận dụng những điểm mạnh của web.
Mang đến trải nghiệm ngoại tuyến
Ở những nơi không yêu cầu kết nối, ứng dụng của bạn sẽ hoạt động bình thường khi không có mạng cũng như khi có mạng.
Lý do
Ngoài việc cung cấp một trang ngoại tuyến tuỳ chỉnh, người dùng mong đợi có thể sử dụng PWA 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. Các ứng dụng nhạc, video và podcast phải cho phép phát nội dung khi không có mạng. Các ứng dụng mạng xã hội và tin tức nên lưu nội dung gần đây vào bộ nhớ đệm để người dùng có thể đọc nội dung đó khi không có mạng. Người dùng cũng mong muốn duy trì trạng thái đã xác thực khi không có mạng, vì vậy, hãy thiết kế để xác thực khi không có mạng.
PWA ngoại tuyến mang đến 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 mong muốn hoạt động khi không có mạng, bạn cần cung cấp nội dung và điều chỉnh nội dung cho phù hợp với bối cảnh không có mạng. 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, cũng như sử dụng tính năng đồ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ó thể dùng 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, cũng như triển khai các phiên an toàn, kéo dài để duy trì trạng thái xác thực của người dùng.
Về trải nghiệm người dùng, bạn có thể sử dụng màn hình khung để mang đến cho người dùng cảm giác về tốc độ và nội dung trong khi tải. Sau đó, màn hình này có thể quay lại nội dung đã lưu vào bộ nhớ đệm hoặc chỉ báo ngoại tuyến khi cần.
Có thể truy cập đầy đủ
Mọi hoạt động tương tác của người dùng đều tuân thủ tiêu chuẩn quốc tế mới nhất về Nguyên tắc hỗ trợ tiếp cận nội dung trên web (WCAG).
Lý do
Hầu hết người dùng đều muốn sử dụng PWA của bạn theo cách được WCAG đề cập. Khả năng tương tác và hiểu PWA của con người nằm trong một phổ và nhu cầu có thể là tạm thời hoặc vĩnh viễn. Bằng cách giúp PWA của bạn dễ tiếp cận, bạn sẽ giúp mọi người có thể sử dụng PWA.
Cách thức
Giới thiệu về khả năng hỗ trợ tiếp cận trên web của W3C là một nơi phù hợp để bắt đầu. Bạn phải thực hiện phần lớn các hoạt động kiểm thử khả năng hỗ trợ tiếp cận theo cách thủ công. Kiểm tra khả năng hỗ trợ tiếp cận trong Lighthouse, axe và Accessibility Insights 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 cần 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 tạo các tính năng nâng cao hơn, các yêu cầu về khả năng hỗ trợ tiếp cận sẽ được đáp ứng, chẳng hạn như khi nào nên dùng mũi tên so với thẻ.
Thẻ thông tin dinh dưỡng A11Y có lời khuyên hữu ích về vấn đề này đối với một số thành phần phổ biến.
Có thể tìm thấy trong kết quả tìm kiếm
Người dùng có thể dễ dàng khám phá PWA thông qua 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 tìm kiếm. Trên thực tế, hơn một nửa tổng lưu lượng truy cập trang web đến từ kết quả tìm kiếm tự nhiên. Việc đảm bảo rằng URL chuẩn tồn tại 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à 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
Trước tiên, hãy đảm bảo rằng mỗi URL đều có một tiêu đề và nội dung mô tả meta riêng biệt, mang tính mô tả. Sau đó, bạn có thể sử dụng Google Search Console và các bản kiểm tra 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 hiển thị của PWA.
Bạn cũng có thể sử 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 cách sử dụng các giản đồ từ Schema.org trong PWA của bạn.
Hoạt động với mọi loại dữ liệu đầu vào
PWA của bạn cũng có thể dùng được bằ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 có thể chuyển đổi liền mạch giữa các phương thức này trong khi sử dụng ứng dụng của bạn. Điều quan trọng không kém là các phương thức nhập không được phụ thuộc vào kích thước màn hình, tức là khung nhìn lớn phải hỗ trợ thao tác chạm và khung nhìn nhỏ phải hỗ trợ bàn phím và chuột. Trong khả năng của mình, 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 mọi phương thức nhập mà người dùng có thể chọn. Nếu có thể, hãy cải thiện trải nghiệm để cho phép cả các chế độ điều khiển dành riêng cho dữ liệu đầu vào (chẳng hạn như thao tác kéo để làm mới).
Cách thức
Pointer Events API cung cấp một giao diện hợp nhất để làm việc với nhiều lựa chọn đầu vào và đặc biệt phù hợp để thêm tính năng hỗ trợ bút cảm ứng. Để hỗ trợ cả thao tác chạm và bàn phím, hãy đảm bảo rằng bạn đang sử dụng các phần tử ngữ nghĩa chính xác (neo, nút, chế độ điều khiển biểu mẫu, v.v.) và không tạo lại chúng bằng HTML không có ngữ nghĩa. Khi thêm những lượt tương tác kích hoạt khi di chuột, hãy đảm bảo rằng những lượt tương tác đó cũng có thể kích hoạt khi nhấp hoặc nhấn.
Cung cấp bối cảnh cho các yêu cầu cấp quyền
Khi yêu cầu cấp quyền sử dụng các API mạnh mẽ, hãy cung cấp bối cảnh và chỉ yêu cầu khi cần đế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, vị trí địa lý và thông tin đăng nhập) được thiết kế để gây gián đoạn 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 có sự đồng ý. Việc kích hoạt những lời nhắc này mà không có thêm thông tin bối cảnh (chẳng hạn như khi tải trang) sẽ khiến người dùng ít chấp nhận các quyền đó hơn và có nhiều khả năng không tin tưởng các quyền đó trong tương lai.
Thay vào đó, hãy chỉ kích hoạt những lời nhắc đó sau khi cung cấp cho người dùng lý do hợp lý trong ngữ cảnh về lý do bạn cần quyền đó.
Cách thức
Bài viết Trải nghiệm người dùng về quyền và bài viết Những cách phù hợp để yêu cầu người dùng cấp quyền của UX Planet là những tài nguyên hữu ích để tìm 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, nhưng những tài nguyên này áp dụng cho tất cả các PWA.
Tuân thủ các phương pháp hay nhất để có mã nguồn lành mạnh
Việc duy trì cơ sở mã lành mạnh 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
Có rất nhiều việc phải làm để tạo ra một ứng dụng web hiện đại. Việc duy trì ứng dụng ở trạng thái mới nhất và cơ sở mã ở trạng thái tốt giúp bạn dễ dàng cung cấp các tính năng mới đáp ứng những mục tiêu khác được nêu 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 bình thường:
- Tránh sử dụng các thư viện có lỗ hổng đã biết.
- Đảm bảo bạn không sử dụng các API không dùng nữa.
- Xoá các phương pháp viết mã không an toàn khỏi cơ sở mã của bạn, chẳng hạn như
document.write()hoặc có trình nghe sự kiện cuộn không thụ động. - Bạn thậm chí có thể viết mã phòng thủ để đảm bảo PWA của bạn không bị lỗi nếu số liệu phân tích hoặc các thư viện khác của bên thứ ba 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ư linting, 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 chúng xuất hiện trong bản phát hành chính thức.