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 một cách để xác định riêng biệt PWA. Tuy nhiên, cho đến gần đây, thông số của tệp kê khai ứng dụng web không rõ ràng xác định cách xác định duy nhất PWA, để trình duyệt quyết định và dẫn đến những cách triển khai khác nhau. Trong một số trình duyệt, start_url được sử dụng, trong khi ở các địa điểm khác, đường dẫn đến tệp kê khai được sử dụng, giúp tệp này không thể cập nhật một trong hai trường đó.

Để giải quyết vấn đề này, ứng dụng web có một thuộc tính id mới (không bắt buộc) thông số tệp kê khai, cho phép bạn xác định rõ ràng giá trị nhận dạng được dùng cho PWA của bạn. 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 và giúp nó có thể chúng sẽ được cập nhật 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. Thời gian trình duyệt thấy một tệp kê khai không có danh tính khớp với đã được cài đặt, PWA sẽ coi đây là PWA mới, ngay cả khi được phân phát từ cùng một URL với một PWA khác. Nhưng nếu nó thấy một tệp kê khai có danh tính khớp với PWA đã cài đặt, thì PWA sẽ coi đó là PWA đã cài đặt.

Hỗ trợ trình duyệt

Hỗ trợ cho tài sản 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 phải làm gì 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 (miễn là start_url và đường dẫn tệp kê khai vẫn giữ nguyên). Để PWA đảm bảo tính phù hợp trong tương lai, bạn có thể thêm một 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 một PWA là kiểm tra giá trị do Chrome tính toán.

  1. Khi sử dụng Chrome 96 trở lên, hãy mở Ngăn Manifest (Tệp kê khai) của bảng điều khiển Application (Ứ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. Chiến lược phát hành đĩa đơn Biểu tượng chú thích (!) sẽ chỉ xuất hiện khi id không được chỉ định trong tệp kê khai ứng dụng web.
  3. Hãy lưu ý rằng giá trị id được hiển thị trong mẹo của công cụ (xem ảnh chụp màn hình bên dưới).
  4. Thêm một thuộc tính id vào tệp kê khai ứng dụng web bằng cách dùng giá trị id như trong chú thích.

Chú thích hiển thị "id" giá trị.

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

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

Đừng lo, sẽ không có gì xảy ra cả. Kể từ Chrome 96, trình duyệt sẽ tạo id nếu không có mã này 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 giúp bạn thực hiện được việc này thay đổi start_url và đường dẫn tệp kê khai (nếu và chỉ khi origin được 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 điều này?

Để 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 unhashed_app_id và Thuộc tính start_url cho PWA đã cài đặt.
  3. Thêm một thuộc tính id vào tệp kê khai ứng dụng web theo các bước trong Làm cách nào để xác định và đặt id ở trên.
  4. Khởi động lại trình duyệt bằng chrome://restart, chạy PWA qua about://apps, sau đó đóng PWA để buộc làm mới tệp kê khai.
  5. Mở about://web-app-internals/ rồi kiểm tra thuộc tính manifest_id để tìm PWA đã cài đặt để xác minh rằng nó 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 qua about://apps, sau đó đóng PWA để buộc làm mới tệp kê khai.
  8. Mở about://web-app-internals/ rồi kiểm tra thuộc tính start_url để tìm PWA đã cài đặt để xác minh rằng ứng dụng đó đã được cập nhật như dự kiến.

Tài nguyên khác