Xác định riêng PWA bằng thuộc tính mã tệp kê khai ứng dụng web

Pete LePage

Khi người dùng cài đặt PWA của bạn, trình duyệt cần có một cách để xác định duy nhất PWA đó. Tuy nhiên, cho đến gần đây, thông số kỹ thuật của tệp kê khai ứng dụng web vẫn chưa xác định rõ ràng cách nhận dạng duy nhất một PWA, khiến các trình duyệt phải quyết định và dẫn đến nhiều cách triển khai khác nhau. Trong một số trình duyệt, start_url được dùng, trong khi ở các trình duyệt khác, đường dẫn đến tệp kê khai được dùng khiến bạn không thể cập nhật một trong hai trường đó.

Để giải quyết vấn đề này, có một thuộc tính id mới (không bắt buộc) trong thông số kỹ thuật của tệp kê khai ứng dụng web cho phép bạn xác định rõ giá trị nhận dạng dùng cho PWA của mình. Việc thêm thuộc tính id vào tệp kê khai sẽ xoá phần phụ thuộc trên start_url hoặc vị trí của tệp kê khai, đồng thời giúp bạn có thể cập nhật các thuộc tính này trong tương lai.

Thuộc tính id có chức năng gì?

Thuộc tính id đại diện cho danh tính của PWA đối với trình duyệt. Khi thấy một tệp kê khai không có danh tính khớp với một PWA đã cài đặt, trình duyệt sẽ coi đó là một PWA mới, ngay cả khi được phân phát từ cùng một URL với một PWA khác. Tuy nhiên, nếu thấy một tệp kê khai có danh tính khớp với PWA đã cài đặt, thì ứng dụng sẽ coi đó là PWA đã cài đặt.

Hỗ trợ trình duyệt

Hỗ trợ cho thuộc tính id đã có trong Chrome 96.

Tôi nên làm gì nếu có một ứng dụng không có id?

Bạn không cần làm gì cả và sẽ không có gì xảy ra nếu bạn không thêm id vào tệp kê khai ứng dụng web của mình (miễn là start_url và đường dẫn của tệp kê khai vẫn giữ nguyên). Để PWA hướng tới tương lai, bạn có thể thêm thuộc tính id vào tệp kê khai ứng dụng web.

Làm cách nào để xác định và đặt id?

Cách an toàn và chính xác nhất để xác định id cho PWA là kiểm tra giá trị do Chrome tính toán.

  1. Sử dụng Chrome 96 trở lên, mở ngăn Tệp kê khai của bảng điều khiển Ứng dụng trong Công cụ cho nhà phát triển.
  2. Di chuột qua biểu tượng (!) bên cạnh thuộc tính App Id (Mã ứng dụng). Biểu tượng chú giải công cụ (!) sẽ chỉ xuất hiện khi id không được chỉ định trong tệp kê khai ứng dụng web.
  3. Lưu ý giá trị id được hiển thị trong mẹo sử dụng công cụ (xem ảnh chụp màn hình dưới đây).
  4. Thêm một thuộc tính id vào tệp kê khai ứng dụng web bằng cách sử dụng giá trị id có trong phần chú thích.

Chú giải công cụ hiển thị giá trị "id".

{
  ...
  id: "/?homescreen=1",
  start_url: "/?homescreen=1",
  ...
}

Nếu tôi không đặt id thì sao?

Đừng lo, sẽ không có gì hỏng cả. Kể từ Chrome 96, trình duyệt sẽ tạo một id nếu không có chiến dịch nào trong tệp kê khai dựa trên start_url trong tệp kê khai ứng dụng web.

Việc thêm id vào tệp kê khai ứng dụng web sẽ giúp bạn có thể thay đổi start_url và đường dẫn tệp kê khai (nếu và chỉ khi nguồn gốc cụ thể của các dữ liệu này giữ nguyên!), vì trình duyệt sẽ xác định PWA dựa trên id được chỉ định, thay vì start_url hoặc đường dẫn tệp kê khai.

Làm cách nào để kiểm tra?

Để kiểm thử hành vi, hãy làm theo các bước sau:

  1. Cài đặt PWA.
  2. Mở about://web-app-internals/ rồi kiểm tra thuộc tính unhashed_app_id và start_url để tìm PWA đã cài đặt.
  3. Thêm thuộc tính id vào tệp kê khai ứng dụng web của bạn theo các bước trong phần Cách xác định và thiết lập id ở trên.
  4. Khởi động lại trình duyệt bằng chrome://restart, chạy PWA từ about://apps, sau đó đóng PWA để buộc làm mới tệp kê khai.
  5. Mở about://web-app-internals/ và kiểm tra thuộc tính manifest_id cho PWA đã cài đặt để xác minh rằng thuộc tính này không thay đổi.
  6. Thay đổi start_url trong tệp kê khai ứng dụng web.
  7. Khởi động lại trình duyệt bằng chrome://restart, chạy PWA từ about://apps, sau đó đóng PWA để buộc làm mới tệp kê khai.
  8. Mở about://web-app-internals/ và kiểm tra thuộc tính start_url cho PWA đã cài đặt để xác minh rằng PWA đã được cập nhật như dự kiến.

Tài nguyên bổ sung