Sau khi người dùng cài đặt PWA, ứng dụng này sẽ:
- Có 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ọ.
- Tạo một cửa sổ riêng trong hệ điều hành.
- Được hỗ trợ về các tính 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 lại trải nghiệm độc lập. Siêu dữ liệu cho PWA của bạn được đặt bởi một tệp dựa trên JSON được gọi là Tệp kê khai ứng dụng web. Chúng ta sẽ đề cập chi tiết về loại tệp 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ợ 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 (chẳng hạn như tên của ứng dụng và cấu hình của trải nghiệm đã cài đặt). Một ngoại lệ là Safari dành cho macOS. Công cụ 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, bài viết này trình bày chi tiết các tiêu chí cho Google Chrome và bao gồm các đường liên kết đến các yêu cầu cho các trình duyệt khác.
Vì quá trình kiểm tra để thấy 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ể chưa hoạt động ngay sau khi nhận được phản hồi về URL.
Cài đặt máy tính
Google Chrome và Microsoft Edge hiện hỗ trợ quá trình 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 ảnh bên dưới), cho biết rằng trang web hiện tại có thể cài đặt.
Khi tương tác với 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ật lên bên dưới) mời người dùng cài đặt trang web dưới dạng ứ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ị độc lập và giao diện người dùng 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 chạy Windows, trên thanh đế hoặc màn hình trong GUI (Giao diện người dùng đồ hoạ) của Linux, trong bàn khởi chạy macOS hoặc trình chạy ứng dụng của Chromebook.
- Có một biểu tượng trong trình chuyển đổi ứng dụng và đế khi ứng dụng đang hoạt động, được sử dụng gần đây hoặc được mở ở chế độ nền.
- Xuất hiện trong kết quả tìm kiếm ứ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 biểu tượng của họ để biểu thị các thông báo mới. Việc này được thực hiện bằng 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 2 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 một ứng dụng web tiến bộ (PWA) rồi chọn "Mở ứng dụng khi bạn đăng nhập" nếu 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ài đặt PWA của trình duyệt không tồn tại 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. Các ứng dụng này phải được thêm vào màn hình chính theo cách thủ công thông qua một trình đơn chỉ có trong Safari. Bạn nên thêm thẻ apple-touch-icon vào html.
Để xác định biểu tượng, hãy đưa đường dẫn đến biểu tượng vào phần HTML <head> 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 khi 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ó trong 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ẻ có ở dưới cùng hoặc trên cùng của 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; người dùng có thể chỉnh sửa tên này.
- Nhấp vào Thêm. Trên iOS và iPadOS, dấu trang của các trang web và 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 mới được hỗ trợ. Do đó, nếu bạn sử dụng chế độ giao diện người dùng ở mức tối thiểu, chế độ này sẽ quay lại 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.
PWA được cài đặt trên iOS và iPadOS:
- Xuất hiện trên màn hình chính, mục tìm kiếm của Tiêu điểm, tính năng Đề xuất của Siri và 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.
- Không được hỗ trợ các chức năng như huy hiệu và lối tắt ứng dụng.
Tình cờ thay, Safari sử dụng một công nghệ gốc có tên là Web Clips để tạo các biểu tượng PWA trong hệ điều hành. Chúng chỉ là các tệp XML ở định dạng Danh sách thuộc tính 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 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 đây, bạn có thể thấy hai phiên bản khác nhau của một hộp thoại cài đặt, một thanh thông tin nhỏ đơn giản (bên trái) và một 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 Ứng dụng nhanh.
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 (thường là trên đám mây) tạo ra trên một máy chủ đúc tiền WebAPK. Phương thức này được Google Chrome sử dụng trên các thiết bị đã cài đặt Google Mobile Services (GMS) và bởi 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. Nhìn chung, những thiết bị này chiếm phần lớn người dùng Android.
Khi người dùng cài đặt một PWA từ Google Chrome và WebAPK được sử dụng, máy chủ đúc sẽ "mints" (gói) và ký một APK cho PWA. Quá trình này sẽ mất thời gian, nhưng khi tệp 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. Vì các nhà cung cấp đáng tin cậy (Dịch vụ Google Play hoặc Samsung) đã ký APK nên điện thoại cài đặt APK mà không tắt 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. Bạn 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ó biểu tượng trong trình chạy ứng dụng và màn hình chính.
- Xuất hiện trên Cài đặt, Ứng dụng.
- Có thể có một số chức năng, chẳng hạn như tạo huy hiệu, lối tắt ứng dụng và chụp đườ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 đến trải nghiệm tốt nhất cho người dùng Android, nhưng không phải lúc nào cũng tạo được WebAPK. Khi không thể, trình duyệt sẽ quay lại tạo lối tắt trang web. Vì 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 tiền mà họ tin cậy nên các máy chủ này sẽ tạo các lối tắt. Google Chrome cũng sẽ áp dụng nếu dịch vụ đúc không hoạt động 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ó 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ể dùng những tính năng yêu cầu cài đặt.
- Không thể cập nhật biểu tượng và siêu dữ liệu ứng dụng.
- Có thể được cài đặt nhiều lần, ngay cả khi sử dụng cùng một trình duyệt. Khi điều này xảy ra, tất cả sẽ trỏ tới cùng một phiên bản và sử dụng cùng một dung lượng lưu trữ.
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 có 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 những thiết bị này (như trình duyệt của Huawei) có thể cài đặt các PWA được đóng gói dưới dạng QuickApp, ngay cả khi bạn không sử dụng ngăn xếp QuickApp.
Khi cài đặt PWA dưới dạng QuickApp, người dùng sẽ có trải nghiệm tương tự như khi có lối tắt, nhưng với một biểu tượng được gắn biểu tượng QuickApps (hình ảnh tia chớp). Ứng dụng này cũng sẽ có sẵn để khởi chạy từ 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 qua PWA của mình. Chương Lời nhắc cài đặt sẽ trình bày các mẫu cần thực hiện và cách triển khai các mô hình đó.
Danh mục ứng dụng và cửa hàng
PWA 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à giúp người dùng tìm thấy PWA ở cùng một nơi họ tìm thấy các ứng dụng khác. Hầu hết danh mục ứng dụng và cửa hàng đều hỗ trợ 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 thành phầ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ụ kết xuất 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 thành phần 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 ứng dụng web tiến bộ (PWA) là:
- Cửa hàng Google Play dành cho Android và ChromeOS, sử dụng 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 dành cho Windows 10 và 11, sử dụng các gói APPX.
- Samsung Galaxy Store, sử dụng máy chủ đúc tiền Samsung WebAPK.
- Huawei AppGallery, sử dụng vùng chứa QuickApp cho ứng dụng HTML.
Nếu bạn muốn tìm hiểu thêm về cách xuất bản PWA lên danh mục ứng dụng và cửa hàng, hãy xem BubbleWrap CLI và Trình tạo PWA.