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

Thu thập đường liên kết khai báo là gì?

Việc nhấp vào các đường liên kết trên trang web đôi khi có thể khiến bạn cảm thấy bất ngờ thú vị. Ví dụ: thao tác nhấp vào một đường liên kết của trang web đến YouTube trên thiết bị di động sẽ mở ứng dụng YouTube dành cho iOS hoặc Android nếu ứng dụng này đã được cài đặt. Tuy nhiên, khi bạn cài đặt PWA YouTube 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 thẻ trình duyệt.

Nhưng vấn đề lại 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à xuất hiện trong tin nhắn trò chuyện bạn nhận được ở 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, vốn có khái niệm về các cửa sổ ứng dụng riêng biệt, nếu ứng dụng đã mở, thì 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 xem xét, có nhiều cách để nắm bắt các đường liên kết và thành phần điều hướng, bao gồm nhưng không giới hạn ở các 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.
  • Thao tác điều hướng bắt nguồn từ App Shortcuts API (API Lối tắt ứng dụng).
  • Đường liên kết đi qua trình xử lý giao thức URL.
  • Thao tác di chuyển do trình xử lý tệp gây ra.
  • Các thao tác điều hướng do Share Target API (API Mục tiêu chia sẻ) gây ra.
  • ...và các nguồn khác.

Khai báo đường liên kết khai báo là đề xuất cho thuộc tính tệp kê khai ứng dụng web có tên "capture_links". Tính năng này cho phép nhà phát triển xác định theo cách khai báo điều gì sẽ xảy ra khi trình duyệt được yêu cầu điều hướng đến một URL 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 đang mở một thẻ trình duyệt nằm trong phạm vi này 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 hoạt động lấy đường liên kết. Việc đường liên kết là target=_self hay target=_blank không quan trọng. Do đó, các đường liên kết mà bạn nhấp vào trong cửa sổ trình duyệt (hoặc cửa sổ của một PWA khác) sẽ mở trong PWA ngay cả khi các đường liên kết đó thường dẫn đến việc điều hướng trong cùng một thẻ.

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

Ví dụ về những trang web có thể sử dụng API này bao gồm:

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

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

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

Cách sử dụng tính năng Thu thập đường liên kết khai báo?

Nhà phát triển có thể khai báo cách thu thập các đường liên kết bằng cách tận dụng trường "capture_links" bổ sung trong tệp kê khai ứng dụng web. Phương thức 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, tác nhân người dùng sẽ chọn mục được hỗ trợ đầu tiên trong danh sách, đặt giá trị mặc định là "none". Các giá trị sau được hỗ trợ:

  • "none" (mặc định): Không thu thập đường liên kết; các đường liên kết được nhấp vào dẫn đến phạm vi PWA này sẽ điều hướng 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ở ra 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ỳ ý. Thuộc tính này sẽ hoạt động giống như "new-client" nếu không có cửa sổ nào đang mở. 🚨 Cẩn thận nhé! Tuỳ chọn này có thể dẫn đến mất dữ liệu vì các trang có thể bị điều hướng tuỳ ý. Các trang web cần biết rằng họ đang chọn thực hiện những hành vi như vậy bằng cách chọn chế độ này. Tuỳ chọn này phù hợp nhất với các trang web "chỉ có thể đọc" không lưu giữ 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à họ di chuyển ra có một sự kiện beforeunload, thì người dùng sẽ thấy lời nhắc trước khi thao tác di chuyển hoàn tất.

Bản minh hoạ

Bản minh hoạ cho tính năng Thu thập đường liên kết khai báo thực sự bao gồm hai bản minh hoạ tương tác cùng 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 cả hai tương tác với nhau. Chúng hiển thị hai hành vi khác nhau, "new-client""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 một PWA đã cài đặt để xem sự khác biệt về hành vi.

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

Nhóm Chromium đã thiết kế và triển khai tính năng Khai báo đường liên kết dựa trên 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 của nền tảng web mạnh mẽ, bao gồm cả quyền kiểm soát của người dùng, tính minh bạch và tính hiệu quả. API này cho phép trang web có các lựa chọn kiểm soát bổ sung mới. Trước tiên, việc 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 giúp trang web có thể 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 sự kiện có chứa URL được nhấp. Việc này nhằm cho phép trang web điều hướng cửa sổ hiện có sang trang mới, ghi đè luồng điều hướng HTML mặc định.

Di chuyển sang API Trình xử lý khởi chạy

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

Trong Chromium 98, tính năng tự động lấy đường liên kết hiện là một hành vi chọn cho phép của người dùng thay vì được cấp tại thời điểm cài đặt cho một ứng dụng web. Để bật tính năng này, người dùng cần chạy một ứng dụng đã cài đặt trên trình duyệt bằng cách sử dụng tuỳ chọn Mở bằng rồi 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 khi bật tuỳ chọn "Ghi nhớ lựa chọn của tôi".

Ngoài ra, người dùng có thể bật hoặc tắt tính năng thu thập đường liên kết cho một ứng dụng web cụ thể trên 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 thu thập đường liên kết hiện chỉ dành cho ChromeOS. Tính năng này hiện đang được hỗ trợ cho Windows, macOS và Linux.

Khởi chạy API Trình xử lý

Quyền kiểm soát một thành phần điều hướng đến được chuyển sang Launch Handler API (API Trình xử lý khởi chạy), cho phép các ứ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 liên kết, chia sẻ đích hoặc xử lý tệp, v.v. Để di chuyển từ API Thu thậ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 cho Bản dùng thử theo nguyên gốc Trình xử lý khởi chạy và đặt khoá dùng thử theo nguyên gốc vào ứng dụng web của bạn.
  2. Thêm một mục "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 bản dùng thử theo nguyên gốc Thu thập đườ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 của bạn sẽ không còn tự động di chuyển khi có thao tác điều hướng liên kết. 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à việc đăng ký bản dùng thử theo nguyên gốc Thu thập đường liên kết khai báo sẽ được sử dụng cho đến hết ngày 30 tháng 3 năm 2022. Việc này sẽ đảm bảo rằng người dùng trên Chromium 97 trở xuống vẫn có thể khởi chạy ứng dụng web tại một đường liên kết đã thu thập.

Để biết thêm thông tin, hãy xem phần Kiểm soát cách chạy ứng dụng của bạn.

Ý kiến phản hồi

Nhóm Chromium muốn biết về trải nghiệm của bạn với tính năng Khai báo đường liên kết.

Cho chúng tôi biết về thiết kế của API

Có điều gì về API không hoạt động như bạn mong đợi không? Hay có thiếu phương thức hoặc thuộc tính nào mà bạn cần triển khai không? Bạn có thắc mắc hoặc nhận xét về mô hình bảo mật? 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 vấn đề hiện có.

Báo cáo sự cố với quá trình triển khai

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

Hỗ trợ API

Bạn có định sử dụng tính năng Khai báo đường liên kết không? Sự hỗ trợ 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 biết tầm quan trọng của việc hỗ trợ các tính năng đó.

Hãy gửi một dòng tweet đến @ChromiumDev kèm theo hashtag #DeclarativeLinkCapturing và cho chúng tôi biết vị trí cũng như cách bạn đang sử dụng bài đăng này.

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

Xác nhận

Matt Giuca đã chỉ định việc thu thập đường liên kết khai báo với dữ liệu đầu vào của 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 đánh giá. Hình ảnh chính của Zulmaury Saavedra trên Unsplash.