Chọn cách các đường liên kết trong phạm vi chính sách mở PWA của bạn bằng tính năng Ghi lại đường liên kết khai báo

Thomas Steiner

Tính năng thu thập đường liên kết khai báo là gì?

Đôi khi, việc nhấp vào các đường liên kết trên web có thể mang đến cho bạn những điều thú vị. Ví dụ: khi bạn nhấp vào đường liên kết từ trang web đến YouTube trên thiết bị di động, ứng dụng YouTube dành cho iOS hoặc Android sẽ mở ra (nếu bạn đã cài đặt ứng dụng). Tuy nhiên, khi bạn cài đặt YouTube PWA trên máy tính và nhấp vào một đường liên kết, đường liên kết đó sẽ mở trong một thẻ trình duyệt.

Nhưng vấn đề sẽ phức tạp hơn. Điều gì sẽ xảy ra nếu đường liên kết không xuất hiện trong trang web mà trong tin nhắn trò chuyện mà bạn nhận được trong một trong các ứng dụng trò chuyện của Google? Trên các hệ điều hành máy tính có khái niệm về cửa sổ ứng dụng riêng biệt, nếu ứng dụng đã mở, bạn có nên tạo một cửa sổ hoặc thẻ mới cho mỗi lượt nhấp vào đường liên kết không? Khi bạn nghĩ về điều này, có nhiều cách để ghi lại các đường liên kết và thao tác điều hướng, bao gồm nhưng không giới hạn ở những cách sau:

  • Đường liên kết được nhấp từ các trang web khác.
  • URL khởi chạy từ một ứng dụng dành riêng cho nền tảng trong hệ điều hành.
  • Các thao tác điều hướng bắt nguồn từ App Shortcuts API (API lối tắt trong ứng dụng).
  • Các đường liên kết đi qua trình xử lý giao thức URL.
  • Thao tác điều hướng do trình xử lý tệp gây ra.
  • Các thao tác điều hướng do API Mục tiêu chia sẻ gây ra.
  • …và các nguồn khác.

Tính năng Ghi lại đường liên kết khai báo là một đề xuất cho thuộc tính tệp kê khai ứng dụng web có tên là "capture_links". Tính năng này cho phép nhà phát triển xác định một cách rõ ràng những gì sẽ xảy ra khi trình duyệt được yêu cầu chuyển đến một URL nằm trong phạm vi điều hướng của ứng dụng, từ một ngữ cảnh bên ngoài phạm vi điều hướng. Đề xuất này không áp dụng nếu người dùng đã ở trong phạm vi điều hướng (ví dụ: nếu người dùng mở một thẻ trình duyệt nằm trong phạm vi và nhấp vào một đường liên kết nội bộ).

Một số điều kiện đặc biệt như nhấp chuột giữa vào một đường liên kết (hoặc nhấp chuột phải rồi "mở trong thẻ mới") thường sẽ không kích hoạt hành vi chụp đường liên kết. Việc đường liên kết là target=_self hay target=_blank không quan trọng, vì vậy, các đường liên kết được nhấp trong cửa sổ trình duyệt (hoặc cửa sổ của một PWA khác) sẽ được mở trong PWA ngay cả khi chúng thường gây ra thao tác điều hướng trong cùng một thẻ.

Các trường hợp sử dụng được đề xuất

Sau đây là ví dụ về các trang web có thể sử dụng API này:

  • PWA muốn mở một cửa sổ thay vì một thẻ trình duyệt khi người dùng nhấp vào một đường liên kết đến các ứng dụng đó. Trong môi trường máy tính để bàn, bạn thường nên mở nhiều cửa sổ ứng dụng cùng một lúc.
  • PWA một cửa sổ mà nhà phát triển chỉ muốn có một thực thể ứng dụng mở bất cứ lúc nào, với các thao tác điều hướng mới tập trung vào thực thể hiện có. Các trường hợp sử dụng phụ bao gồm:
    • Ứng dụng chỉ nên chạy một phiên bản (ví dụ: trình phát nhạc, trò chơi).
    • Các ứng dụng có chức năng quản lý nhiều tài liệu trong một phiên bản (ví dụ: một dải thẻ được triển khai bằng HTML).

Bật thông qua about://flags

Để thử nghiệm tính năng Ghi lại đường liên kết khai báo cục bộ mà không cần mã thông báo thử nghiệm gốc, hãy bật cờ #enable-desktop-pwas-link-capturing trong about://flags.

Làm cách nào để sử dụng tính năng Ghi lại đường liên kết khai báo?

Nhà phát triển có thể xác định cách thu thập đường liên kết theo cách khai báo bằng cách tận dụng trường tệp kê khai ứng dụng web bổ sung "capture_links". Thuộc tính này nhận một chuỗi hoặc một mảng chuỗi làm giá trị. Nếu bạn cung cấp một mảng chuỗi, thì tác nhân người dùng sẽ chọn mục được hỗ trợ đầu tiên trong danh sách, mặc định là "none". Các giá trị sau được hỗ trợ:

  • "none" (mặc định): Không ghi lại đường liên kết; các đường liên kết được nhấp dẫn đến phạm vi PWA này sẽ di chuyển như bình thường mà không cần mở cửa sổ PWA.
  • "new-client": Mỗi đường liên kết được nhấp sẽ mở một cửa sổ PWA mới tại URL đó.
  • "existing-client-navigate": Đường liên kết được nhấp sẽ mở trong một cửa sổ PWA hiện có, nếu có, hoặc trong một cửa sổ mới nếu không có. Nếu có nhiều cửa sổ PWA, trình duyệt có thể chọn một cửa sổ tuỳ ý. Phương thức này hoạt động giống như "new-client" nếu không có cửa sổ nào đang mở. 🚨 Thận trọng! Tuỳ chọn này có thể dẫn đến việc mất dữ liệu, vì các trang có thể bị chuyển đi một cách tuỳ ý. Khi chọn tuỳ chọn này, các trang web cần lưu ý rằng họ đang chọn cho phép hành vi đó. Tuỳ chọn này phù hợp nhất với các trang web "chỉ có thể đọc" không lưu trữ dữ liệu người dùng trong bộ nhớ, chẳng hạn như trình phát nhạc. Nếu trang mà người dùng đang rời khỏi có sự kiện beforeunload, thì người dùng sẽ thấy lời nhắc trước khi thao tác điều hướng hoàn tất.

Bản minh hoạ

Bản minh hoạ cho tính năng Ghi lại đường liên kết khai báo thực sự bao gồm hai bản minh hoạ tương tác với nhau:

  1. https://continuous-harvest-tomato.glitch.me/
  2. https://hill-glitter-tree.glitch.me/

Bản ghi màn hình dưới đây cho thấy cách hai thành phần này tương tác với nhau. Các lớp này cho thấy hai hành vi khác nhau, "new-client" và "existing-client-navigate". Hãy nhớ kiểm thử các ứng dụng ở nhiều trạng thái, chạy trong một thẻ hoặc dưới dạng PWA đã cài đặt để xem sự khác biệt về hành vi.

Tính bảo mật và quyền truy cập

Nhóm Chromium đã thiết kế và triển khai tính năng Ghi lại đường liên kết khai báo bằng cách sử dụng các nguyên tắc cốt lõi được xác định trong bài viết Kiểm soát quyền truy cập vào các tính năng mạnh mẽ của nền tảng web, bao gồm cả quyền kiểm soát của người dùng, tính minh bạch và tính công thái học. API này cho phép các trang web có thêm các tuỳ chọn kiểm soát mới. Trước tiên, có thể tự động mở các ứng dụng đã cài đặt trong một cửa sổ. Phương thức này sử dụng giao diện người dùng hiện có nhưng cho phép trang web tự động kích hoạt giao diện người dùng đó. Thứ hai, khả năng tập trung một cửa sổ hiện có trên miền riêng và kích hoạt một sự kiện chứa URL đã nhấp. Điều này nhằm cho phép trang web điều hướng một cửa sổ hiện có đến một trang mới, ghi đè luồng điều hướng HTML mặc định.

Di chuyển sang Launch Handler API

Bản dùng thử theo nguyên gốc của API Lấy liên kết khai báo hết hạn vào ngày 30 tháng 3 năm 2022 đối với Chromium 97 trở xuống. API này sẽ được thay thế bằng một bộ các tính năng và API mới trong Chromium 98 trở lên, bao gồm cả tính năng chụp đường liên kết do người dùng bật và Launch Handler API (API Trình xử lý khởi chạy).

Trong Chromium 98, tính năng tự động ghi lại đường liên kết hiện là hành vi mà người dùng chọn tham gia thay vì được cấp tại thời điểm cài đặt cho ứng dụng web. Để bật tính năng ghi lại đường liên kết, người dùng cần chạy một ứng dụng đã cài đặt từ trình duyệt bằng cách sử dụng Mở bằng và chọn Ghi nhớ lựa chọn của tôi.

Ví dụ về chế độ cài đặt "Mở bằng" của một ứng dụng đã cài đặt, trong đó tuỳ chọn "Ghi nhớ lựa chọn của tôi" đang bật.

Ngoài ra, người dùng có thể bật hoặc tắt tính năng chụp đường liên kết cho một ứng dụng web cụ thể trong trang cài đặt quản lý ứng dụng.

Ví dụ về trang cài đặt của một ứng dụng đã cài đặt.

Tính năng chụp đường liên kết hiện chỉ có trên ChromeOS; chúng tôi đang hỗ trợ tính năng này cho Windows, macOS và Linux.

Launch Handler API

Chế độ điều khiển của thao tác điều hướng sắp tới được di chuyển sang API Trình xử lý khởi chạy, cho phép ứng dụng web quyết định cách ứng dụng web khởi chạy trong nhiều tình huống như chụp đường liên kết, chia sẻ mục tiêu hoặc xử lý tệp, v.v. Để di chuyển từ API Chụp đường liên kết khai báo sang API Trình xử lý khởi chạy:

  1. Đăng ký trang web của bạn để tham gia dùng thử nguồn gốc Trình xử lý khởi chạy và đặt khoá dùng thử nguồn gốc vào ứng dụng web của bạn.

  2. Thêm mục nhập "launch_handler" vào tệp kê khai của trang web.

    • Để sử dụng "capture_links": "new-client", hãy thêm:"launch_handler": { "route_to": "new-client" }.
    • Để sử dụng "capture_links": "existing-client-navigate", hãy thêm: "launch_handler": { "route_to": "existing-client-navigate" }.
    • Để sử dụng "capture_links": "existing-client-event" (chưa từng được triển khai trong thử nghiệm nguồn gốc tính năng Ghi lại đường liên kết khai báo), hãy thêm: "launch_handler": { "route_to": "existing-client-retain" }. Với tuỳ chọn này, các trang trong phạm vi ứng dụng sẽ không còn tự động điều hướng khi một thao tác điều hướng liên kết được ghi lại. Bạn phải xử lý LaunchParams trong JavaScript bằng cách gọi window.launchQueue.setConsumer() để bật tính năng điều hướng.

Trường capture_links và bản dùng thử theo nguyên gốc tính năng Thu thập đường liên kết khai báo có hiệu lực đến hết ngày 30 tháng 3 năm 2022. Điều này sẽ đảm bảo người dùng trên Chromium 97 trở xuống vẫn có thể chạy ứng dụng web tại một đường liên kết đã chụp.

Để biết thêm thông tin chi tiết, hãy xem bài viết Kiểm soát cách chạy ứng dụng.

Phản hồi

Nhóm Chromium muốn biết trải nghiệm của bạn khi sử dụng tính năng Lấy liên kết khai báo.

Giới thiệu cho chúng tôi về thiết kế API

API có hoạt động như mong đợi không? Hay có phương thức hoặc thuộc tính nào bị thiếu mà bạn cần để triển khai ý tưởng của mình không? Bạn có câu hỏi hoặc nhận xét về mô hình bảo mật không? Gửi vấn đề về thông số kỹ thuật trên kho lưu trữ GitHub tương ứng hoặc thêm ý kiến của bạn vào một vấn đề hiện có.

Báo cáo vấn đề về việc triển khai

Bạn có tìm thấy lỗi khi triển khai Chromium không? Hay cách triển khai có khác với thông số kỹ thuật không? Gửi lỗi tại new.crbug.com. Hãy nhớ cung cấp càng nhiều thông tin chi tiết càng tốt, hướng dẫn đơn giản để tái hiện lỗi và nhập UI>Browser>WebAppInstalls vào hộp Components (Thành phần). Glitch rất hữu ích để chia sẻ các bản tái hiện nhanh chóng và dễ dàng.

Hỗ trợ API

Bạn có định sử dụng tính năng Thu thập đường liên kết khai báo không? Sự ủng hộ công khai của bạn giúp nhóm Chromium ưu tiên các tính năng và cho các nhà cung cấp trình duyệt khác thấy tầm quan trọng của việc hỗ trợ các tính năng đó.

Gửi một tweet đến @ChromiumDev bằng hashtag #DeclarativeLinkCapturing và cho chúng tôi biết bạn đang sử dụng hashtag này ở đâu và như thế nào.

Các đường liên kết hữu ích

Lời cảm ơn

Tính năng Thu thập đường liên kết khai báo do Matt Giuca chỉ định với thông tin đầu vào từ Alan Cutter và Dominick Ng. API này do Alan Cutter triển khai. Bài viết này đã được Joe Medley, Matt Giuca, Alan Cutter và Shunya Shishido xem xét. Hình ảnh chính của Zulmaury Saavedra trên Unsplash.