Các bước đầu tiên
Ứng dụng web tiến bộ vẫn là các trang web, với các tính năng và chức năng nâng cao. Các công nghệ này không đi kèm với một nhóm công nghệ cụ thể và bạn có thể bắt đầu lại từ đầu với một trang web mới hoặc cập nhật trang web hiện tại của mình mà không cần toàn bộ chỉnh sửa. Trong hướng dẫn này, bạn sẽ tìm hiểu cách tạo quy trình triển khai hiệu quả cho mẫu PWA. Dưới đây là một số chiến lược giúp bạn bắt đầu:
Cài đặt dễ dàng
Bắt đầu từ những bước nhỏ! Phương pháp này bao gồm bắt đầu bằng một tệp kê khai cơ bản, một trang ngoại tuyến đơn giản và một trình chạy dịch vụ để phân phát trang ngoại tuyến cũng như lưu vào bộ nhớ đệm một số CSS và JavaScript quan trọng. Nhờ bộ nhớ đệm CSS và JavaScript quan trọng, bạn sẽ chuẩn bị sẵn sàng cho ứng dụng web hiện có của mình hoạt động ngoại tuyến trong khi vẫn nâng cao hiệu suất.
Tập trung vào một tính năng
Chọn một tính năng mới (chẳng hạn như thông báo đẩy hoặc xử lý tệp) sẽ ảnh hưởng đáng kể đến người dùng hoặc doanh nghiệp của bạn. Nhờ đó, bạn có thể tập trung vào nhóm PWA mà không cần thực hiện quá nhiều thay đổi cùng một lúc.
Tạo một phiên bản đơn giản
Sử dụng một mục hiện có trong ứng dụng của bạn hoặc một hành trình cụ thể của người dùng, chẳng hạn như phát video hoặc truy cập vào thẻ lên máy bay, đồng thời thiết lập để ứng dụng hoạt động trực tiếp dưới dạng một ứng dụng web tiến bộ (PWA) ngoại tuyến, độc lập hoặc theo bối cảnh. Việc này giúp tạo ra một thử nghiệm rủi ro thấp, giúp bạn xem xét lại trải nghiệm của người dùng khi sử dụng PWA.
Bắt đầu từ đầu
Nếu bạn đang thiết kế lại trang web hoặc có thể tạo lại từ đầu, thì chiến lược này sẽ rất hữu ích. Nhờ đó, bạn có thể dễ dàng xây dựng trong các mẫu thiết kế PWA dễ dàng hơn so với các chiến lược khác, đặc biệt là cho phép bạn khai thác tất cả sức mạnh của nhân viên dịch vụ ngay từ đầu.
Nâng cấp ứng dụng cửa hàng
Với khả năng phát hành PWA lên các cửa hàng ứng dụng, bạn có thể gói PWA vào một trình chạy PWA và tải PWA đó lên các cửa hàng, chẳng hạn như Cửa hàng Play hoặc Windows Store của Google. Nếu đã có một ứng dụng dành riêng cho nền tảng, bạn có thể thay thế ứng dụng đó bằng PWA đã phát hành trong cửa hàng.
Với phương pháp này, người dùng hiện tại của bạn sẽ được nâng cấp trải nghiệm lên PWA và người dùng mới vẫn có thể sử dụng hoặc cài đặt PWA của bạn từ trình duyệt hoặc cửa hàng ứng dụng. Đồng thời, bạn sẽ có một ứng dụng cho mọi người, giúp tiết kiệm chi phí, thời gian và cải thiện trải nghiệm người dùng.
Danh sách kiểm tra PWA
Ứng dụng web tiến bộ là một trang web, dẫn đến câu hỏi: Khi nào thì ứng dụng web tiến bộ trở thành Ứng dụng web tiến bộ? Câu trả lời không đơn giản như vậy vì khái niệm PWA không đề cập đến một công nghệ hoặc ngăn xếp cụ thể nào, mà thay vào đó là một mẫu bao gồm nhiều thành phần kỹ thuật.
Mặc dù không có quy tắc riêng nào giữa các trình duyệt, nhưng có một bộ đề xuất gọi là Danh sách kiểm tra ứng dụng web tiến bộ để giúp bạn tạo một PWA mà người dùng sẽ yêu thích.
Yêu cầu cốt lõi
Vì PWA trải rộng trên mọi thiết bị, từ thiết bị di động đến máy tính, nên Danh sách kiểm tra chính của ứng dụng web tiến bộ là giới thiệu những việc bạn cần làm để đảm bảo ứng dụng của mình trở nên đáng tin cậy và dễ cài đặt đối với tất cả người dùng, bất kể kích thước màn hình hay loại dữ liệu đầu vào.
Những yêu cầu cốt lõi là:
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ì trang web hoạt động tốt thu hút và giữ chân người dùng tốt hơn so với trang web hoạt động kém. Các trang web phải tập trung vào việc tối ưu hoá để đạt được các chỉ số hiệu suất tập trung vào người dùng.
Hoạt động trên mọi trình duyệt
Ứng dụng web tiến bộ là ứng dụng web trước tiên, nghĩa là chúng cần hoạt động trên các trình duyệt chứ không chỉ trên một trong số các trình duyệt đó. Tuy nhiên, trải nghiệm này không nhất thiết phải giống nhau trên tất cả các trình duyệt. Có thể có những tính năng không được một trình duyệt hỗ trợ, với tính năng dự phòng để đảm bảo trải nghiệm tốt.
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 đều có sẵn ở mọi kích thước khung nhìn.
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 của bạn giúp mang lại trải nghiệm liền mạch và giống như bản gốc hơn so với việc quay lại trang ngoại tuyến mặc định của trình duyệt.
Có thể cài đặt
Người dùng cài đặt hoặc thêm ứng dụng vào màn hình chính có xu hướng tương tác với các ứng dụng đó nhiều hơn. Khi được cài đặt, PWA có thể tận dụng nhiều tính năng hơn để mang lại trải nghiệm tốt hơn cho người dùng.
Đặc tính PWA tối ưu
Để tạo ra một Ứng dụng web tiến bộ thực sự tuyệt vời, một ứng dụng đem lại trải nghiệm tốt nhất, bạn không chỉ cần 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ộ xoay quanh việc giúp PWA của bạn có khả năng và đáng tin cậy trong khi vẫn khai thác được những yếu tố giúp web trở nên mạnh mẽ.
Cung cấp trải nghiệm ngoại tuyến
Bằng việc cho phép người dùng sử dụng PWA của bạn khi không có mạng, bạn sẽ mang lại cho họ trải nghiệm chân thực giống như ứng dụng. Thực hiện việc này bằng cách xác định những tính năng không cần đến khả năng kết nối, để người dùng có thể sử dụng ít nhất một chức năng nào đó.
Có thể sử dụng đầy đủ
Đảm bảo trình đọc màn hình hiểu tất cả nội dung và hoạt động tương tác của ứng dụng, có thể sử dụng được chỉ với bàn phím, tiêu điểm đó được thể hiện rõ và độ tương phản màu mạnh. Khi cho phép truy cập vào PWA, bạn có thể đảm bảo rằng mọi người đều dùng được PWA.
Sử dụng các tính năng mạnh mẽ (nếu có)
Từ nhắn tin đẩy, WASM và WebGL đến quyền truy cập hệ thống tệp, bộ chọn danh bạ và tích hợp với cửa hàng ứng dụng. Chúng tôi có các công cụ để tạo các PWA đa năng và tích hợp sâu, giúp bạn tạo ra trải nghiệm người dùng với đầy đủ tính năng, trước đây chỉ dành riêng cho các ứng dụng nền tảng, để người dùng có thể mang theo bên mình mọi lúc mọi nơi.
Có thể được phát hiện thông qua tìm kiếm
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 các URL chính tắc 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 là rất quan trọng để người dùng tìm thấy PWA của bạn.
Tương thích với mọi loại dữ liệu đầu vào
Người dùng phải có thể chuyển đổi giữa các loại dữ liệu đầu vào trong khi sử dụng ứng dụng của bạn một cách liền mạch. Đồng thời, các phương thức nhập không nên phụ thuộc vào kích thước màn hình.
Cung cấp ngữ cảnh cho các yêu cầu quyền
Chỉ kích hoạt lời nhắc cấp các quyền như thông báo, vị trí địa lý và thông tin xác thực, sau khi đưa ra lý do theo ngữ cảnh để tăng khả năng người dùng chấp nhận lời nhắc.
Làm theo các phương pháp hay nhất để có mã lành mạnh
Việc duy trì 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 cung cấp 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.