Sau khi người dùng cài đặt PWA của bạn, PWA sẽ:
- Có một biểu tượng trong trình chạy, màn hình chính, trình đơn bắt đầu hoặc bàn khởi chạy.
- Xuất hiện dưới dạng kết quả khi người dùng tìm kiếm ứng dụng trên thiết bị của họ.
- Có một cửa sổ riêng trong hệ điều hành.
- Hỗ trợ các chức năng cụ thể.
Tiêu chí cài đặt
Mỗi trình duyệt đều có một tiêu chí để đánh dấu thời điểm một trang web hoặc ứng dụng web là Ứng dụng web tiến bộ và có thể được cài đặt để mang đến trải nghiệm độc lập. Siêu dữ liệu cho PWA được thiết lập bằng một tệp dựa trên JSON được gọi là Tệp kê khai ứng dụng web. Chúng tôi sẽ đề cập chi tiết đến nội dung này trong mô-đun tiếp theo.
Theo yêu cầu tối thiểu về khả năng cài đặt, hầu hết các trình duyệt có hỗ trợ loại tệp kê khai này đều sử dụng tệp kê khai ứng dụng web và một số thuộc tính nhất định như tên ứng dụng và cấu hình của phiên bản đã cài đặt. Một trường hợp ngoại lệ là Safari dành cho macOS, trình duyệt này không hỗ trợ khả năng cài đặt.
Các yêu cầu để cho phép cài đặt khác nhau giữa các trình duyệt khác nhau, bài viết này trình bày chi tiết các tiêu chí dành cho Google Chrome và bao gồm các liên kết đến yêu cầu đối với các trình duyệt khác.
Vì quá trình kiểm tra để một PWA đáp ứng các yêu cầu về khả năng cài đặt có thể mất vài giây, nên khả năng cài đặt có thể sẽ chưa xuất hiện ngay khi nhận được phản hồi URL.
Cài đặt máy tính
Hiện tại, Google Chrome và Microsoft Edge hỗ trợ cài đặt PWA dành cho máy tính trên Linux, Windows, macOS và Chromebook. Những trình duyệt này sẽ hiển thị huy hiệu (biểu tượng) cài đặt trong thanh URL (xem hình bên dưới), cho biết trang web hiện tại có thể cài đặt.
Khi tương tác với một trang web, người dùng có thể thấy một cửa sổ bật lên, chẳng hạn như cửa sổ bên dưới mời người dùng cài đặt trang web đó như một ứng dụng.
Trình đơn thả xuống của trình duyệt cũng bao gồm mục "Cài đặt
Chỉ hỗ trợ chế độ hiển thị giao diện người dùng độc lập và tối thiểu trên hệ điều hành máy tính.
PWA được cài đặt trên máy tính:
- Có một biểu tượng trong trình đơn Start (Bắt đầu) hoặc màn hình Start (Bắt đầu) trên máy tính Windows, trong thanh Dock hoặc trên máy tính trong GUI Linux, trong bàn khởi chạy macOS hoặc trình chạy ứng dụng của Chromebook.
- Có biểu tượng trong trình chuyển đổi ứng dụng và gắn vào đế khi ứng dụng đang hoạt động, được sử dụng gần đây hoặc mở trong nền.
- Xuất hiện trong kết quả tìm kiếm của ứng dụng, chẳng hạn như tìm kiếm trên Windows hoặc Tiêu điểm trên macOS.
- Có thể đặt số huy hiệu trên các biểu tượng của mình để biểu thị thông báo mới. Việc này được thực hiện thông qua API Huy hiệu.
- Có thể đặt trình đơn theo bối cảnh cho biểu tượng bằng Lối tắt ứng dụng.
- Không thể cài đặt hai lần bằng cùng một trình duyệt.
Sau khi cài đặt một ứng dụng trên máy tính, người dùng có thể chuyển đến about:apps, nhấp chuột phải vào PWA rồi chọn "Mở ứng dụng khi bạn Đăng nhập" nếu họ muốn ứng dụng của bạn tự động mở khi khởi động.
Cài đặt iOS và iPadOS
Lời nhắc của trình duyệt để cài đặt PWA không có trên iOS và iPadOS. Trên các nền tảng này, PWA còn được gọi là ứng dụng web trên màn hình chính. Bạn phải thêm các ứng dụng này vào màn hình chính theo cách thủ công thông qua trình đơn chỉ có trong Safari. Bạn nên thêm thẻ apple-touch-icon vào HTML của mình.
Để xác định biểu tượng, hãy đưa đường dẫn đến biểu tượng đến phần <head> HTML của bạn, như sau:
<link rel="apple-touch-icon" href="/icons/ios.png">
Safari sẽ sử dụng thông tin đó để tạo lối tắt và nếu bạn không cung cấp biểu tượng cụ thể cho thiết bị Apple, thì biểu tượng trên màn hình chính sẽ là ảnh chụp màn hình của PWA của bạn khi người dùng cài đặt.
Bạn cần hiểu rằng việc cài đặt PWA chỉ hoạt động nếu người dùng duyệt xem trang web của bạn trên Safari. Các trình duyệt khác có trên App Store (chẳng hạn như Google Chrome, Firefox, Opera hoặc Microsoft Edge) không thể cài đặt PWA trên màn hình chính.
Các bước để thêm ứng dụng vào màn hình chính như sau:
- Mở trình đơn Chia sẻ ở dưới cùng hoặc đầu trình duyệt.
- Nhấp vào Thêm vào Màn hình chính.
- Xác nhận tên của ứng dụng; tên có thể chỉnh sửa được.
- Nhấp vào Thêm. Trên iOS và iPadOS, dấu trang cho các trang web và ứng dụng web tiến bộ (PWA) trông giống nhau trên màn hình chính.
Trên iOS và iPadOS, chỉ chế độ hiển thị độc lập được hỗ trợ. Do đó, nếu bạn sử dụng chế độ giao diện người dùng tối thiểu, chế độ này sẽ quay lại dùng lối tắt của trình duyệt; nếu bạn sử dụng chế độ toàn màn hình, chế độ này sẽ quay lại chế độ độc lập.
Các ứng dụng web tiến bộ (PWA) được cài đặt trên iOS và iPadOS:
- Xuất hiện trong màn hình chính, nội dung tìm kiếm của Tiêu điểm, Gợi ý của Siri và tìm kiếm trong Thư viện ứng dụng.
- Không xuất hiện trong các thư mục danh mục của Thư viện ứng dụng.
- Thiếu tính năng hỗ trợ các tính năng như huy hiệu và lối tắt ứng dụng.
Nhân tiện, Safari sử dụng một công nghệ gốc có tên là Web Clips (Đoạn video trên web) để tạo biểu tượng PWA trong hệ điều hành. Chúng chỉ là những tệp XML ở định dạng Property List của Apple được lưu trữ trong hệ thống tệp.
Cài đặt Android
Trên Android, lời nhắc cài đặt PWA sẽ khác nhau tuỳ theo thiết bị và trình duyệt. Người dùng có thể thấy:
- Biến thể trong từ ngữ của mục trong trình đơn để cài đặt, chẳng hạn như Cài đặt hoặc Thêm vào Màn hình chính.
- Hộp thoại cài đặt chi tiết.
Trong hình sau, bạn có thể thấy hai phiên bản khác nhau của hộp thoại cài đặt, thanh thông tin nhỏ đơn giản (bên trái) và hộp thoại cài đặt chi tiết (bên phải).
Tuỳ thuộc vào thiết bị và trình duyệt, PWA sẽ được cài đặt dưới dạng WebAPK, lối tắt hoặc QuickApp.
WebAPKs
WebAPK là một gói Android (APK) do một nhà cung cấp đáng tin cậy cho thiết bị của người dùng tạo, thường là trên đám mây, trên máy chủ khai thác WebAPK. Phương pháp này được Google Chrome sử dụng trên các thiết bị có cài đặt Dịch vụ của Google dành cho thiết bị di động (GMS) và trình duyệt Internet của Samsung, nhưng chỉ trên các thiết bị do Samsung sản xuất, chẳng hạn như điện thoại hoặc máy tính bảng Galaxy. Tính năng này chiếm phần lớn người dùng Android.
Khi người dùng cài đặt một ứng dụng web tiến bộ (PWA) qua Google Chrome và sử dụng một WebAPK, máy chủ đúc sẽ "được đúc" (gói) và ký APK cho PWA. Quá trình này mất thời gian, nhưng khi APK đã sẵn sàng, trình duyệt sẽ tự động cài đặt ứng dụng đó trên thiết bị của người dùng. Do các nhà cung cấp đáng tin cậy (Dịch vụ Play hoặc Samsung) đã ký APK nên điện thoại sẽ cài đặt APK mà không vô hiệu hóa tính năng bảo mật, giống như với bất kỳ ứng dụng nào từ cửa hàng. Không cần cài đặt ứng dụng không qua cửa hàng ứng dụng.
PWA được cài đặt qua WebAPK:
- Có một biểu tượng trong trình chạy ứng dụng và màn hình chính.
- Xuất hiện trong phần Cài đặt, Ứng dụng.
- Có thể có nhiều chức năng, chẳng hạn như huy hiệu, lối tắt ứng dụng và ghi lại đường liên kết trong hệ điều hành.
- Có thể cập nhật biểu tượng và siêu dữ liệu của ứng dụng.
- Không thể cài đặt hai lần.
Phím tắt
Mặc dù WebAPK mang lại trải nghiệm tốt nhất cho người dùng Android, nhưng không phải lúc nào bạn cũng có thể tạo các APK này. Khi không thể xác minh, các trình duyệt sẽ quay lại tạo lối tắt trên trang web. Do Firefox, Microsoft Edge, Opera, Brave và Samsung Internet (trên các thiết bị không phải của Samsung) không có máy chủ đúc mà họ tin tưởng, chúng sẽ tạo các lối tắt. Google Chrome cũng sẽ hoạt động nếu dịch vụ đúc không có sẵn hoặc PWA của bạn không đáp ứng các yêu cầu cài đặt.
PWA được cài đặt bằng lối tắt:
- Có một biểu tượng được gắn huy hiệu của trình duyệt trên màn hình chính (xem các ví dụ sau).
- Không có biểu tượng trong Trình chạy hoặc trên phần Cài đặt, ứng dụng.
- Không thể sử dụng những tính năng cần phải cài đặt.
- Không thể cập nhật các biểu tượng và siêu dữ liệu của ứng dụng.
- Có thể cài đặt nhiều lần, ngay cả khi sử dụng cùng một trình duyệt; khi trường hợp này xảy ra, tất cả sẽ trỏ đến cùng một phiên bản và sử dụng cùng một bộ nhớ.
QuickApps
Một số nhà sản xuất, bao gồm cả Huawei và ZTE, cung cấp một nền tảng tên là QuickApps để tạo các ứng dụng web nhẹ tương tự như PWA nhưng sử dụng một nhóm công nghệ khác. Một số trình duyệt trên các thiết bị này (chẳng hạn như trình duyệt Huawei) có thể cài đặt PWA được đóng gói dưới dạng QuickApp, ngay cả khi bạn không dùng ngăn xếp QuickApp.
Khi PWA được cài đặt dưới dạng QuickApp, người dùng sẽ có được trải nghiệm tương tự như trải nghiệm họ vốn có khi có lối tắt, nhưng có biểu tượng được gắn huy hiệu bằng biểu tượng QuickApps (hình ảnh tia chớp). Bạn cũng có thể khởi chạy ứng dụng này trong QuickApp Center.
Nhắc cài đặt
Trong các trình duyệt dựa trên Chromium trên máy tính và thiết bị Android, bạn có thể kích hoạt hộp thoại cài đặt của trình duyệt từ PWA của bạn. Chương Lời nhắc cài đặt sẽ trình bày các mẫu để tạo lời nhắc và cách triển khai.
Danh mục ứng dụng và cửa hàng
PWA của bạn cũng có thể được liệt kê trong danh mục ứng dụng và cửa hàng để tăng phạm vi tiếp cận và cho phép người dùng tìm thấy ứng dụng ở cùng một nơi mà họ tìm thấy các ứng dụng khác. Hầu hết danh mục và cửa hàng ứng dụng đều hỗ trợ các công nghệ cho phép bạn xuất bản một gói không bao gồm toàn bộ ứng dụng web (chẳng hạn như HTML và các tài sản của bạn). Những công nghệ này cho phép bạn chỉ tạo một trình chạy cho một công cụ hiển thị web độc lập. Công cụ này sẽ tải ứng dụng và cho phép trình chạy dịch vụ lưu các nội dung cần thiết vào bộ nhớ đệm.
Danh mục ứng dụng và cửa hàng hỗ trợ phát hành PWA là:
- Cửa hàng Google Play dành cho Android và ChromeOS, sử dụng chế độ Hoạt động đáng tin cậy trên web.
- Apple App Store dành cho iOS, macOS và iPadOS, sử dụng WKWebView và App-Bound Domains.
- Microsoft Store cho Windows 10 và 11, sử dụng gói APPX.
- Cửa hàng Samsung Galaxy, sử dụng máy chủ đúc Samsung WebAPK.
- Huawei AppLibrary, sử dụng vùng chứa QuickApp cho ứng dụng HTML của bạn.
Nếu bạn muốn tìm hiểu thêm về cách phát hành PWA lên danh mục ứng dụng và cửa hàng, hãy tham khảo BubbleWrap CLI và Trình tạo PWA.