Đ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 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, 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ả các ứng dụng đều có nhu cầu khác nhau, các cuộc kiểm tra hiệu suất ở Lighthouse đều dựa trên Chỉ số quan trọng chính của trang web, và đạt điểm cao trong các bài kiểm tra đó sẽ làm cho người dùng của bạn có nhiều khả năng một trải nghiệm thú vị. 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

Progressive Web Apps là ứng dụng web đầu tiên và điều đó có 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à bắt đầu với chỉ 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 với CSS và JavaScript để 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 việc đó là 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.
• Phá vỡ tạp chí Cải tiến tăng dần: Đây 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 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.

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 các kích thước khung nhìn khác nhau và tất cả sẽ đều có ở đó, một cách hoặc 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 đòi hỏi các nhóm phát triển phần mềm phải tập trung vào chỉ những dữ liệu và hành động quan trọng nhất trong ứng dụng. Đơn giản là có không phải là chỗ cho màn hình 320 x 480 pixel không cần thiết, không liên quan phần tử. Bạn phải ưu tiên.

Cách thức

Có nhiều tài nguyên về thiết kế đáp ứng, bao gồm gốc bài viết của Ethan Marcotte tập hợp khái niệm quan trọng liên quan đến trò chơi, cũng như sách và trò chuyện. Để thu hẹp phạm vi thảo luận về các khía cạnh nội dung của thiết kế đáp ứng, hãy tham khảo thiết kế ưu tiên nội dung và bố cục thích ứng hiển thị 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ọ ở trong PWA của bạn sẽ mang lại nhiều lợi ích hơn trải nghiệm liền mạch hơn là quay lại trình duyệt mặc định ngoại tuyến .

Lý do

Người dùng mong muốn các ứng dụng đã cài đặt hoạt động bất kể kết nối của họ trạng thái. Ứ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. Cung cấp trải nghiệm ngoại tuyến tuỳ chỉnh, cả khi người dùng chuyển đến 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 cần có kết nối, giúp trải nghiệm web của bạn giống 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 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ị trang ngoại tuyến cơ bản nếu không có trang nào được cung cấp.

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 người dùng 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 bình thường ngoại tuyến như 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 muốn PWA 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ó 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. Mạ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ó kết nối mạng, do đó 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 dịch vụ để lưu trữ các loại nội dung khác 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 hoạt động an toàn và dài hạn giúp 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 đó 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. Phần lớn quy trình kiểm thử khả năng hỗ trợ tiếp cận đều thực hiện theo cách thủ công. Các công cụ như Hỗ trợ tiếp cận kiểm tra trong Lighthouse, axe, và Thông tin chi tiết về khả năng hỗ trợ tiếp cận có thể giúp bạn tự động hoá một số thử nghiệm khả năng hỗ trợ tiếp cận. Bạn cũng cần lưu ý sử dụng các phần tử chính xác về mặt ngữ nghĩa thay vì tạo lại các phần tử đó tự tạo, ví dụ: a và button phần tử. Đ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 đã 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 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á 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 của tất cả lưu lượng truy cập vào trang web đến từ kết quả tìm kiếm tự nhiên. Đảm bảo rằng 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 là việc rất quan trọng trong việc giúp người dùng tiềm năng 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 có một tiêu đề duy nhất, mang tính mô tả và mô tả meta. 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 phải 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. Giống như quan trọng là phương thức nhập không nên 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ợ khung nhìn cảm ứng và khung nhìn nhỏ phải hỗ trợ bàn phím và chuột. Để làm được điều đó, hãy đảm bảo rằng và tất cả các tính năng của ứng dụng này đề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ủa bạn có thể chọn. Khi thích hợp, hãy nâng cao trải nghiệm để cho phép 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 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 xây dựng lại chúng bằng HTML phi ngữ nghĩa. Khi bao gồm các 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 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 bối cảnh và yêu cầu chỉ 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, định vị vị trí và thông tin đăng nhập được thiết kế nhằm mục đích gây khó chịu cho người dùng vì chúng thường liên quan đến những 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 các lời nhắc đó sau khi cung cấp cho người dùng lý do phù hợp về việc tại sao bạn cần quyền đó.

Cách thức

Trải nghiệm người dùng về quyền bài viết và UX Planet Những cách phù hợp để yêu cầu người dùng cấp quyền là các tài nguyên hữu ích để nắm được cách thiết kế thông báo nhắc cấp quyền khi ở chế độ tập trung trên thiết bị di động, hã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 codebase:

• 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 có sự kiện cuộn không thụ động người nghe),
• 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 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ư tự động trên nhiều trình duyệt và kênh phát hành. Các có thể giúp phát hiện lỗi trước khi đưa vào sản xuất.