Ứ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 khả 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ị thông qua 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 tham khảo danh sách kiểm tra cũng như đề xuất cốt lõi và tối ưu để hướng dẫn bạn.
Danh sách kiểm tra chính của ứ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 tất cả người dùng có thể cài đặt và sử dụng được 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, luôn 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 hoạt động tốt thu hút và giữ chân người dùng tốt hơn các trang web hoạt động kém. Các trang web nên tập trung vào việc 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ố 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 phiên tăng sẽ tăng 123%. Hiệu suất 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ọ (ví dụ: nhấp vào một nút) đã được đăng ký hay chưa. 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, từ cảm nhận của người dùng về ứng dụng cho đến cách ứng dụng hoạt động trong thực tế.
Mặc dù mọi ứng dụng đều có nhu cầu khác nhau, nhưng các bài kiểm tra hiệu suất trong Lighthouse dựa trên Các chỉ số quan trọng chính về trang web và việc đạt điểm cao trong các lượt kiểm tra đó sẽ giúp người dùng có nhiều khả năng 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 được dữ liệu hiệu suất thực tế cho ứng dụng web của bạn.
Cách thức
Làm theo hướng dẫn về thời gian tải nhanh của chúng tôi để tìm hiểu cách giúp PWA khởi động nhanh và luôn hoạt động nhanh.
Hoạt động trên mọi trình duyệt
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 cài đặt ứng dụng đó.
Lý do
Ứng dụng web tiến bộ là ứng dụng web trước tiên, và điều đó có nghĩa là các ứng dụng này cần hoạt động trên các trình duyệt chứ không chỉ trên một trong các trình duyệt đó.
Một cách hiệu quả để làm việc này là theo lời của Jeremy Keith trong bài viết Thiết kế web bền vững, xác định chức năng cốt lõi, cung cấp chức 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 chỉ bằng HTML để tạo chức 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 ra trải nghiệm hấp dẫn hơn.
Hãy lấy biểu mẫu làm ví dụ. Cách đơn giản nhất để triển khai là sử dụng 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 bằng AGP, cải thiện trải nghiệm cho những người dùng có thể hỗ trợ JavaScript.
Hãy nhớ rằng người dùng sẽ 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ể nhắm mục tiêu cuối cùng của phạm vi. Bằng cách sử dụng tính năng phát hiện tính năng, bạn có thể mang lại trải nghiệm hữu dụng cho nhiều người dùng tiềm năng nhất, bao gồm cả những người sử dụng trình duyệt và thiết bị có thể không tồn tại hiện nay.
Cách thức
Thiết kế web kiên cường của Jeremy Keith là một tài nguyên tuyệt vời mô tả cách tư duy về thiết kế web thông qua phương pháp tiến bộ, trên nhiều trình duyệt này.
Đọc thêm
- Phần Hiểu rõ về tính năng nâng cao tăng dần của List Apart là một phần giới thiệu hữu ích về chủ đề này.
- Cải tiến tiến bộ của Tạp chí Smashing: Nó là gì, và cách sử dụng như thế nào? cung cấp phần giới thiệu thiết thực và liên kết đến các chủ đề nâng cao hơn.
- MDN có một bài viết tiêu đề Triển khai việc phát hiện tính năng nói 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 đó.
Thích ứng với mọi kích thước màn hình
Người dùng có thể 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 đề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ể sử 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à bạn phải đảm bảo nội dung của bạn không chỉ phù hợp trong khung nhìn mà còn phải sử dụng được tất cả tính năng và nội dung của trang web ở mọi kích thước khung nhìn.
Những tác vụ 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. Nội dung có thể được sắp xếp lại ở nhiều kích thước khung nhìn và tất cả phải hiển thị ở đó, 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 Mobile First, việc bắt đầu từ quy mô nhỏ và mở rộng quy mô lớn thay vì ngược lại có thể thực sự giúp cải thiện thiết kế của trang web:
Thiết bị di động yêu cầu nhóm phát triển phần mềm chỉ tập trung vào dữ liệu và thao tác quan trọng nhất trong ứng dụng. Không có đủ chỗ trong màn hình 320 x 480 pixel cho các phần tử không liên quan, không cần thiết. Bạn cầ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ế 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 vào các khía cạnh nội dung của thiết kế thích ứng, bạn có thể tìm hiểu thiết kế ưu tiên nội dung và bố cục thích ứng không phân biệt 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 Bảy câu chuyện thần thoại trên thiết bị di động của Josh Clark cũng phù hợp với chế độ xem trang web thích ứng có kích thước nhỏ như thiết bị di động.
Cung cấp trang ngoại tuyến tùy chỉnh
Khi người dùng không có kết nối mạng, việc giữ họ trong PWA 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 mặc định của trình duyệt.
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ọ là gì. Một ứ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à Ứng dụng web tiến bộ sẽ không bao giờ hiện 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 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 người dùng có trải nghiệm trên web như thể đó là một phần của thiết bị mà họ đang chạy.
Cách thức
Trong sự kiện install của trình chạy dịch vụ, bạn có thể lưu trước 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 trong bộ nhớ đệm. Bạn có thể thực hiện theo mẫu trang ngoại tuyến tuỳ chỉnh của chúng tôi để xem ví dụ về cách triển khai này trong thực tế và tìm hiểu cách tự triển khai.
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ọ 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ẽ cho phép ứng dụng có giao diện và hoạt động giống như tất cả các ứng dụng đã cài đặt khác. Phiên bản này được khởi chạy từ chính nơi người dùng chạy các ứng dụng khác của họ. API 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ại sao bạn muốn người dùng cài đặt PWA của bạn? Lý do tương tự như bạn muốn người dùng cài đặt ứng dụng của bạn từ cửa hàng ứng dụng. Người dùng cài đặt ứng dụng là đối tượng tương tác nhiều nhất và có chỉ số tương tác tốt hơn so với khách truy cập thông thường, thường bằng với người dùng ứng dụng trên thiết bị di động. Các 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.
Cách thức
Bạn có thể làm theo hướng dẫn cài đặt của chúng tôi để tìm hiểu cách làm cho PWA có thể cài đặt, cách kiểm thử xem PWA có thể cài đặt hay không và thử tự thực hiện.
Danh sách kiểm tra ứng dụng web tiến bộ tối ưu
Để tạo được một Ứng dụng web tiến bộ thực sự tuyệt vời, một ứng dụng giống như một ứng dụng tốt nhất, bạn không chỉ cần có danh sách kiểm tra cốt lõi. Danh sách kiểm tra tối ưu về Ứng dụng web tiến bộ là việc giúp PWA của bạn cảm thấy như nó là một phần của thiết bị mà ứng dụng đang chạy, đồng thời tận dụng được những gì giúp web trở nên mạnh mẽ.
Cung cấp trải nghiệm ngoại tuyến
Khi không hoàn toàn yêu cầu kết nối, ứng dụng của bạn sẽ hoạt động giống như khi ngoại tuyến cũng như 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 mong muốn có thể sử dụng Ứng dụng web tiến bộ khi không có mạng. Ví dụ: các ứng dụng du lịch và hàng không phải có 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 lại khi không có mạng. Các ứng dụng tin tức và mạng xã hội 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ì 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 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 cần cung cấp nội dung của mình và thích ứng với ngữ cảnh ngoại tuyến. Ngoài ra, 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ư tính năng đồng bộ hóa trong nền để cho phép người dùng thực hiện hành động khi không có mạng và trì hoãn việc 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ũng có thể sử dụng trình chạy 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. Từ góc độ trải nghiệm người dùng, bạn có thể sử dụng màn hình khung để cho người dùng cảm nhận về 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 khi cần.
Có thể sử dụng đầy đủ
Mọi lượt 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 theo WCAG 2.0.
Lý do
Hầu hết mọi người vào một thời điểm nào đó trong cuộc sống đều muốn khai thác PWA của bạn theo cách đáp ứng các yêu cầu về hỗ trợ tiếp cận của WCAG 2.0. Khả năng con người tương tác và hiểu được PWA của bạn tồn tại ở một mức độ 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 đảm bảo rằng mọi người đều dùng được PWA.
Cách thức
Bài viết Giới thiệu về tính 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 quy trình kiểm thử khả năng hỗ trợ tiếp cận theo cách thủ công. Các công cụ như các bài kiểm tra về Hỗ trợ tiếp cận 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ố hoạt động kiểm thử khả năng hỗ trợ tiếp cận. Bạn cũng nê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 xây dựng chức năng nâng cao hơn, khả năng tiếp cận kỳ vọng sẽ được đáp ứng (chẳng hạn như thời điểm sử dụng mũi tên so với thẻ).
Thẻ 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ể được khám phá thông qua tìm kiếm
Người dùng có thể phát hiện PWA của bạn thông qua tính năng tìm kiếm.
Lý do
Một trong những ưu điểm 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 trang web đến từ kết quả tìm kiếm tự nhiên. Việc đả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à rất quan trọng để người dùng có thể tìm thấy PWA của bạn. Điều này đặc biệt đúng khi sử 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 đề mô tả và nội dung mô tả meta riêng biệt. Sau đó, bạn có thể sử dụng Google Search Console và quy trình kiểm tra tính năng Tối ưu hoá cho công cụ tìm kiếm trong Lighthouse để giúp bạn gỡ lỗi và khắc phục các vấn đề về khả năng phát hiện được với PWA. Bạn cũng có thể sử dụng các công cụ quản trị trang web của Bing hoặc Yandex, đồng thời cân nhắc đưa dữ liệu có cấu trúc bằng giản đồ từ Schema.org vào PWA của bạn.
Tương thích với mọi loại dữ liệu đầu vào
PWA của bạn cũng sử dụng được với 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 sẽ có thể chuyển đổi liền mạch giữa các phương thức đó khi sử dụng ứng dụng của bạn. Quan trọng như vậy, 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 cần hỗ trợ thao tác chạm và khung nhìn nhỏ cần hỗ trợ bàn phím và chuột. Để làm tốt nhất có thể, 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 dùng. Khi thích hợp, bạn cũng nên cải thiện trải nghiệm để cho phép các chế độ kiểm soát dành riêng cho dữ liệu đầu vào (chẳng hạn như kéo để làm mới).
Cách thức
API Sự kiện Con trỏ cung cấp giao diện hợp nhất để làm việc với nhiều tuỳ chọn nhập và đặc biệt phù hợp khi 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 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ử này bằng HTML không có ngữ nghĩa (rất tốt cho khả năng hỗ trợ tiếp cận). 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.
Cung cấp ngữ cảnh cho các yêu cầu quyề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ế một cách có chủ ý để gây phiền toái cho người dùng vì chúng có xu hướng liên quan đến chức năng mạnh mẽ yêu cầu chọn sử dụng. Việc kích hoạt các lời nhắc này mà không có 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 các quyền đó và có khả năng sẽ không tin tưởng những 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 về 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 là các tài nguyên hữu ích để tìm hiểu cách thiết kế lời nhắc cấp quyền, nhưng chỉ tập trung vào thiết bị di động, thì có thể áp dụng cho tất cả PWA.
Làm theo các phương pháp hay nhất để có mã lành mạnh
Việc giữ cho cơ sở mã của bạn ở trạng thái tốt giúp bạn dễ dàng đạt được mục tiêu và phân phối các tính năng mới.
Lý do
Có rất nhiều việc cần làm để xây dựng một ứng dụng web hiện đại. Việc luôn cập nhật ứng dụng và cơ sở mã của bạn ở trạng thái tốt giúp bạn dễ dàng phân phối 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 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 dùng các API không dùng nữa, xoá mẫu phản ứng trên web khỏi cơ sở mã (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 bị động) và thậm chí lập trình một cách phòng vệ để đảm bảo PWA không bị hỏng nế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ư tìm lỗi mã nguồn cũng như kiểm thử tự động, trên 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 phát hành chính thức.