Điều gì tạo nên ứng dụng web tiến bộ hiệu quả?

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 tối ưu hoá cho 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 để 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 ứng dụng 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ờ được 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 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 ứng dụng.

Mặc dù tất cả ứng dụng đều có nhu cầu khác nhau, nhưng các quy trình kiểm tra hiệu suất trong Lighthouse đều dựa trên Các chỉ số quan trọng về trang web. Việc đạt điểm cao trong các quy trình 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 về thời gian tải nhanh để tìm hiểu cách giúp PWA khởi động nhanh và luôn nhanh.

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

Trước tiên, Ứng dụng web tiến bộ là ứng dụng web, nghĩa 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 điều 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 khi có thể. Trong nhiều trường hợp, điều này có nghĩa là chỉ cần bắt đầu bằng 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 để tạo trải nghiệm hấp dẫn hơn.

Hãy lấy ví dụ về việc gửi biểu mẫu. Cách đơn giản nhất để triển khai việc này là một biểu mẫu HTML gửi yêu cầu POST. Sau khi tạo xong, 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ợ tính năng này.

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 cao nhất của quang phổ đó. 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 dùng sử dụng trình duyệt và thiết bị chưa tồn tại.

Cách thức

Resilient Web Design (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 Hiểu rõ về tính năng cải tiến dần của A List Apart là một bài giới thiệu hay về chủ đề này.
• Cải tiến tăng dần: Là gì và cách sử dụng? của Smashing Magazine cung cấp phần giới thiệu thực tế và đường 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 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 ứng dụng đều có sẵn ở mọi kích thước khung nhìn.

Lý do

Các 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 đó, điều quan trọng là bạn không chỉ đảm bảo nội dung vừa với khung nhìn mà còn phải đảm bảo tất cả tính năng và nội dung trên trang web của bạn đều có thể sử dụng được ở mọi kích thước khung nhìn.

Các tác vụ mà người dùng muốn hoàn thành và nội dung mà 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 nhiều kích thước khung nhìn và tất cả nội dung đều phải 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 kế cho 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 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 ứng dụng. Màn hình 320x480 pixel đơn giản là không có chỗ cho các phần tử không cần thiết, không liên quan. 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 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ế thích ứng, cũng như nhiều 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 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 cuốn Seven Deadly Mobile Myths (7 huyền thoại chết chóc về thiết bị di động) của Josh Clark cũng có liên quan đến chế độ xem có kích thước nhỏ của các trang web thích ứng cũng như đến thiết bị di động nói chung.

Khi người dùng không có kết nối mạng, việc giữ họ trong PWA 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 ở chế độ ngoại tuyến 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, giúp trải nghiệm web của bạn trở nên giống như một phần của thiết bị đ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 một trang ngoại tuyến tuỳ chỉnh để hiển thị khi người dùng không có mạng. Hãy xem bài viết Tạo trang dự phòng khi không có mạng để tìm hiểu cách tự triển khai trang này. Xin lưu ý rằng Chrome sẽ hiển thị một trang cơ bản khi không có mạng nếu bạn không cung cấp trang nào.

Những người dùng cài đặt hoặc thêm ứng dụng vào thiết bị của họ có xu hướng tương tác nhiều hơn với các ứng dụng đó.

Lý do

Khi cài đặt Ứng dụng web tiến bộ, ứng dụng này sẽ có giao diện, cảm giác và hoạt động giống như tất cả các ứng dụng đã cài đặt khác. Ứng dụng này được chạy từ cùng một nơi mà người dùng 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.

Cũng như các ứng dụng dành riêng cho thiết bị, những 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ó cá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ại hơn, thời gian ở 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ài đặt của chúng tôi để tìm hiểu cách giúp người dùng có thể cài đặt PWA.

Khi không cần thiết phải có kết nối, ứng dụng của bạn sẽ hoạt động giống như khi có kết nối.

Lý do

Ngoài việc cung cấp trang ngoại tuyến tuỳ chỉnh, người dùng muốn 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ó thông tin chi tiết về chuyến đi và thẻ lên máy bay sẵn sàng khi không có mạng. Ứng dụng âm nhạc, video và podcast phải cho phép phát khi không có mạng. Ứ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 khi không có mạng. Người dùng cũng muốn được xác thực khi không có kết nối 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 giống như ứng dụng thực sự 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 ngữ cảnh khi 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ư đồng bộ hoá ở chế độ nền để cho phép người dùng thực hiện hành động khi không có kết nối mạng và trì hoãn việc giao tiếp với máy chủ cho đến khi người dùng có lại kết nối ổn định. Bạn cũng có thể sử dụng worker dịch vụ để 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, tồn tại lâu dài nhằm xác thực 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 được 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 nếu cần.

Tất cả 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 thời điểm nào đó, hầu hết người dùng đều muốn sử dụng PWA của bạn theo cách đáp ứng các yêu cầu về hỗ trợ tiếp cận theo WCAG 2.0. Khả năng tương tác và hiểu được PWA của con người tồn tại trên một phổ và nhu cầu có thể là tạm thời hoặc vĩnh viễn. Bằng cách hỗ trợ tiếp cận cho PWA, bạn giúp mọi người đều có thể sử dụng ứng dụng.

Cách thức

Bạn có thể bắt đầu bằng bài viết Giới thiệu về khả năng hỗ trợ tiếp cận trên web của W3C. Bạn phải thực hiện phần lớn hoạt động kiểm thử chức năng hỗ trợ tiếp cận theo cách thủ công. Các công cụ như quy trình 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ử chức 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ề ngữ nghĩa thay vì tự tạo lại các phần tử đó, ví dụ: 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 các tính năng nâng cao hơn, các yêu cầu về hỗ trợ tiếp cận sẽ được đáp ứng (chẳng hạn như khi nào nên sử dụng mũi tên so với thẻ). Thẻ dinh dưỡng A11Y có lời khuyên tuyệt vời về điều này cho một số thành phần phổ biến.

Người dùng có thể dễ dàng khám phá 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 tính năng tìm kiếm. Trên thực tế, hơn một nửa lưu lượng truy cập vào trang web đến từ kết quả tìm kiếm tự nhiên. Bạn cần đảm bảo rằng nội dung có URL chính tắc và công cụ tìm kiếm có thể lập chỉ mục trang web của bạn để 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, mô tả rõ ràng. Sau đó, bạn có thể sử dụng Google Search Console và quy trình kiểm tra Tối ưu hoá 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 tìm thấy 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 đưa dữ liệu có cấu trúc vào bằng cách sử dụng các giản đồ từ Schema.org trong PWA của mình.

Bạn có thể sử dụng PWA 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 đó trong khi sử dụng ứng dụng của bạn. Cũng quan trọng không kém, các phương thức nhập không được 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ợ 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ả tính năng của ứng dụng 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 chế độ điều khiển dành riêng cho phương thức nhập (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 để xử lý nhiều tuỳ chọn nhập 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 bạn đang sử dụng đúng các 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 không mang tính ngữ nghĩa. Khi đưa các hoạt động tương tác kích hoạt khi di chuột vào, hãy đảm bảo rằng các hoạt động đó cũng có thể kích hoạt khi 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ỉ yêu cầu 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, vị trí địa lý và thông tin xác thực, được thiết kế có chủ ý để gây gián đoạn người dùng vì chúng có xu hướng liên quan đến các tính năng mạnh mẽ yêu cầu người dùng chọn sử dụng. Việc kích hoạt các lời nhắc này mà không có thêm ngữ cảnh, 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 các quyền đó và có nhiều khả năng sẽ không tin tưởng các quyền đó trong tương lai. Thay vào đó, chỉ kích hoạt các lời nhắc đó sau khi cung cấp cho người dùng lý do theo bối 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à 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 để 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 lời nhắc này áp dụng cho tất cả PWA.

Việc duy trì cơ sở mã ổn đị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 cần làm để tạo một ứng dụng web hiện đại. Việc cập nhật ứng dụng và duy trì cơ sở mã giúp bạn dễ dàng phân phối các tính năng mới đáp ứng các 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ã luôn ở trạng thái tốt:

• 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 lập trình không an toàn khỏi cơ sở mã (chẳng hạn như sử dụng document.write() hoặc có trình nghe sự kiện cuộn không thụ động),
• Bạn thậm chí có thể lập trình để đảm bảo PWA không bị lỗi nếu phân tích hoặc các thư viện bên thứ ba khác không tải được.
• Cân nhắ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. Các kỹ thuật này có thể giúp phát hiện lỗi trước khi đưa vào sản xuất.