Cài đặt ứng dụng web bằng phần tử cài đặt HTML mới

Patrick Brosset

Xuất bản: Ngày 12 tháng 5 năm 2026

Việc cài đặt ứng dụng web luôn yêu cầu JavaScript. Khi bạn sử dụng sự kiện beforeinstallprompt, quy trình cài đặt sẽ hoàn toàn nằm trong tập lệnh. Phần tử <install> mới sẽ thay đổi điều đó: thả một phần tử HTML duy nhất vào trang của bạn và trình duyệt sẽ hiển thị cho bạn một nút cài đặt đáng tin cậy mà không cần JavaScript.

Nhóm Microsoft Edge, cùng với nhóm Chrome, đã triển khai phần tử <install> trong Chromium. Giờ đây, bạn có thể thử nghiệm tính năng này bằng cách dùng một cờ trong Chrome hoặc Edge từ phiên bản 148 trở đi, và dưới dạng một bản dùng thử theo nguyên gốc mà bạn có thể sử dụng trong cả hai trình duyệt từ phiên bản 148 đến 153.

Hãy thử và tìm hiểu cách so sánh API này với Web Install API (navigator.install()) bắt buộc. API này có thử nghiệm nguồn gốc riêng.

Vấn đề

Quá trình cài đặt ứng dụng web bị phân mảnh. Mỗi trình duyệt đều có một tập hợp các điểm truy cập riêng, chẳng hạn như biểu tượng trên thanh địa chỉ, mục trong trình đơn và lời nhắc. Nhà phát triển có quyền kiểm soát hạn chế đối với thời điểm và cách thức quy trình cài đặt xuất hiện.

Việc tạo ra trải nghiệm tương tự như cửa hàng ứng dụng cho phép người dùng cài đặt các ứng dụng khác từ trang web của bạn sẽ khó khăn hơn, vì trước đây, hoạt động cài đặt chỉ được giới hạn ở trang hiện tại.

Phần tử <install>

Nội dung và cách trình bày của phần tử HTML <install> mới do trình duyệt kiểm soát. Tương tự như các phần tử quyền khác như <geolocation>, việc trình duyệt kiểm soát văn bản nhãn, ngôn ngữ và giao diện của nút có nghĩa là trình duyệt có thể tin tưởng rằng lượt nhấp của người dùng là một tín hiệu thực sự về ý định.

Người dùng nhấp vào nút có nhãn "Cài đặt Ứng dụng tuyệt vời" sẽ không cảm thấy ngạc nhiên khi lời nhắc cài đặt xuất hiện.

Vì trình duyệt hiển thị nút này, nên bạn sẽ nhận được một thông báo đáng tin cậy về lượt cài đặt với mã tối thiểu và không cần điều phối quy trình beforeinstallprompt trong JavaScript.

Cài đặt ứng dụng hiện tại

Nếu trang hiện tại liên kết đến một tệp kê khai có trường id, thì bạn chỉ cần một phần tử duy nhất:

<install></install>

Trình duyệt hiển thị nút này bằng văn bản và biểu tượng chuẩn hoá, đồng thời khi người dùng nhấp vào nút này, quy trình cài đặt thông thường của trình duyệt sẽ bắt đầu.

Cài đặt một ứng dụng khác

Để cài đặt một ứng dụng web có nguồn gốc khác với trang hiện tại, hãy dùng thuộc tính installurl để trỏ đến ứng dụng web khác:

<install installurl="https://awesome-app.com/"></install>

Nếu trang tại https://awesome-app.com liên kết đến một tệp kê khai xác định trường id, thì bạn chỉ cần làm như vậy.

Nếu không có trường id, hãy dùng thuộc tính manifestid để cung cấp một tệp kê khai được tính toán id:

<install installurl="https://awesome-app.com/"
  manifestid="https://awesome-app.com/?source=pwa">
</install>

Cách lấy tệp kê khai được tính toán id:

1. Mở Công cụ cho nhà phát triển.
2. Chuyển đến thẻ Ứng dụng.
3. Trong mục Danh tính, hãy sao chép giá trị Mã ứng dụng được tính toán.

Việc sử dụng nút <install> để cài đặt các ứng dụng khác có nguồn gốc có nghĩa là bạn có thể tạo một trang danh mục cho phép người dùng cài đặt nhiều ứng dụng, mỗi ứng dụng có nút <install> riêng.

Cung cấp nội dung dự phòng

Nếu trình duyệt không hỗ trợ phần tử <install>, thì mọi HTML bạn đặt bên trong phần tử đó sẽ xuất hiện:

<install installurl="https://awesome-app.com/">
  <a href="https://awesome-app.com/">Launch Awesome App</a>
</install>

Hỗ trợ phát hiện

Nếu nội dung dự phòng không đủ cho trường hợp sử dụng của bạn và bạn muốn triển khai một trải nghiệm người dùng khác trên những trình duyệt không hỗ trợ phần tử <install>, hãy dùng JavaScript để phát hiện khả năng hỗ trợ:

if ('HTMLInstallElement' in window) {
  // The <install> element is supported.
}

Xử lý sự kiện

Phần tử <install> kích hoạt các sự kiện mà bạn có thể theo dõi để biết trạng thái thành công, bị loại bỏ và lỗi xác thực:

const button = document.querySelector('install');

button.addEventListener('promptaction', () => {
  console.log('Installation succeeded');
});

button.addEventListener('promptdismiss', () => {
  console.log('User dismissed the install prompt');
});

button.addEventListener('validationstatuschanged', (e) => {
  if (e.target.invalidReason === 'install_data_invalid') {
    console.error('Invalid install data:', e.target.invalidReason);
  }
});

Dùng thử ngay hôm nay

Để dùng thử phần tử <install> ngay hôm nay, bạn có 2 lựa chọn:

• Chỉ kiểm thử phần tử này trên thiết bị của bạn.
• Hãy kiểm thử phần tử này trong điều kiện thực tế với người dùng bằng cách đăng ký bản dùng thử theo nguyên gốc.

Kiểm thử cục bộ

Cách kiểm thử phần tử này trên thiết bị của bạn ngay hôm nay:

1. Sử dụng Chrome hoặc Edge phiên bản 148 trở lên.
2. Chuyển đến about://flags/#web-app-install-element trong một thẻ mới.
3. Đặt Web App Install Element (Phần tử cài đặt ứng dụng web) thành Enabled (Đã bật).
4. Khởi động lại trình duyệt.

Thử nghiệm trên trang web đang hoạt động bằng bản dùng thử theo nguyên gốc

Bản dùng thử theo nguyên gốc cho phép người dùng thực tế trên trang web phát hành công khai của bạn sử dụng tính năng này mà không cần bật cờ trước.

1. Mở trang đăng ký bản dùng thử theo nguyên gốc của phần tử <install>.
2. Đăng nhập.
3. Nhấp vào Đăng ký.
4. Nhập nguồn gốc của trang web và điền vào phần còn lại của biểu mẫu.
5. Sau khi gửi biểu mẫu, bạn sẽ nhận được một chuỗi mã thông báo.
6. Thêm mã thông báo vào các trang trên trang web của bạn bằng thẻ <meta>:

<meta http-equiv="origin-trial" content="YOUR_TOKEN_HERE">

Ngoài ra, bạn cũng có thể gửi mã thông báo dưới dạng tiêu đề phản hồi HTTP:

Origin-Trial: YOUR_TOKEN_HERE

Bản dùng thử theo nguyên gốc này có trên cả Chrome và Edge từ phiên bản 148 đến 153, đồng thời cùng một mã thông báo sẽ hoạt động trên cả hai trình duyệt. Để tìm hiểu thêm về các thử nghiệm nguồn gốc, hãy xem:

• Bắt đầu dùng thử nguồn gốc cho Chrome.
• Kiểm thử các API và tính năng thử nghiệm bằng cách sử dụng các bản dùng thử nguồn gốc cho Edge.

Khám phá cách hoạt động

Hãy xem bản minh hoạ Cửa hàng phần tử <install>, một danh mục PWA sử dụng phần tử <install> để cho phép bạn cài đặt một số ứng dụng mẫu.

So sánh với Web Install API

Phần tử <install> không phải là cách duy nhất chúng tôi thử nghiệm để cải thiện lượt cài đặt ứng dụng trên web.

Trước đây, chúng tôi đã thử nghiệm với Web Install API (navigator.install()), đây là một API JavaScript bắt buộc cũng cho phép trang web của bạn kích hoạt quá trình cài đặt các ứng dụng web cùng nguồn gốc hoặc khác nguồn gốc. Để tìm hiểu thêm, hãy xem bài viết Web Install API đã sẵn sàng để thử nghiệm.

Web Install API cũng có bản dùng thử theo nguyên gốc riêng.

Sau đây là bảng so sánh 2 phương pháp:

Hãy cho chúng tôi biết suy nghĩ của bạn

Chúng tôi đang tích cực thu thập ý kiến phản hồi về cả hai phương pháp này. Tuỳ thuộc vào nhu cầu của bạn, chúng tôi có thể thêm tính năng hỗ trợ cho phần tử <install> hoặc API navigator.install(), hoặc cả hai.

Để chia sẻ ý kiến phản hồi về phần tử <install>, hãy mở một vấn đề trên kho lưu trữ WICG dành riêng cho đề xuất này.

Để chia sẻ ý kiến phản hồi về API navigator.install(), hãy thêm nhận xét vào vấn đề Ý kiến phản hồi của nhà phát triển: navigator.install so với phần tử <install>.

Tài nguyên

• Thông tin giải thích: phần tử <install>
• Bản minh hoạ: Kho lưu trữ phần tử <install>
• Hướng dẫn sử dụng và nguồn minh hoạ
• Mục trạng thái của nền tảng Chrome
• Web Install API đã sẵn sàng để thử nghiệm (blog của Edge)
• Giải thích về Web Install API