Ứ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 của ứ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 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 độ 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 ngừng hoạt động 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, 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ó 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
Ứ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 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 nhằm tạo ra 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 đó 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 đó. 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 có.
Cách thức
Thiết kế web bền bỉ của Jeremy Keith là một nguồn 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
- 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 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 ứng dụng này đều xem được ở 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à 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.
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 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ê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 một ứ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ó 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 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 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 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 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ó kết nối 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. 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 cài đặt PWA của bạn.
Danh sách kiểm tra tối ưu cho ứng dụng web tiến bộ
Để tạo một PWA thực sự tuyệt vời, một ứng dụng mang lại cảm giác như là ứng dụng tốt nhất trong lớp, bạn cần làm nhiều việc hơn là chỉ làm theo 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 khi không có mạng như khi hoạt động trực tuyến.
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 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 mạng xã hội và 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 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 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 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 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 được tốc độ và nội dung trong khi tải, sau đó 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 làm cho PWA dễ tiếp cận, bạn sẽ giúp mọi người sử dụng được ứng dụng này.
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ư 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 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ề 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 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 và có tính mô tả. 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ể 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 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á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 để 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 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 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 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à bài viết Các 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 nhưng vẫn áp dụng cho tất cả các ứng dụng web tiến bộ (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ã hoạt động 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), - 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.
- 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 phát hành công khai.