Dễ dàng chia sẻ trên thiết bị di động và máy tính nhờ Web Share Target API
Trên thiết bị di động hoặc máy tính, việc chia sẻ phải đơn giản như việc nhấp vào nút Chia sẻ, chọn ứng dụng và chọn người bạn muốn chia sẻ. Ví dụ: có thể bạn muốn chia sẻ một bài viết thú vị bằng cách gửi qua email cho bạn bè hoặc tweet bài viết đó cho mọi người.
Trước đây, chỉ những ứng dụng dành riêng cho nền tảng mới có thể đăng ký với hệ điều hành để nhận lượt chia sẻ từ các ứng dụng đã cài đặt khác. Tuy nhiên, với Web Share Target API, các ứng dụng web đã cài đặt có thể đăng ký với hệ điều hành cơ bản làm mục tiêu chia sẻ để nhận nội dung được chia sẻ.
Xem cách hoạt động của Mục tiêu chia sẻ web
- Sử dụng Chrome 76 trở lên cho Android hoặc Chrome 89 trở lên trên máy tính, hãy mở bản minh hoạ Mục tiêu chia sẻ web.
- Khi được nhắc, hãy nhấp vào Install (Cài đặt) để thêm ứng dụng vào màn hình chính hoặc sử dụng trình đơn Chrome để thêm ứng dụng vào màn hình chính.
- Mở bất kỳ ứng dụng nào hỗ trợ tính năng chia sẻ hoặc dùng nút Chia sẻ trong ứng dụng minh hoạ.
- Trên bộ chọn mục tiêu, hãy chọn Kiểm thử Chia sẻ web.
Sau khi chia sẻ, bạn sẽ thấy tất cả thông tin được chia sẻ trong ứng dụng web đích chia sẻ trên web.
Đăng ký ứng dụng của bạn làm mục tiêu chia sẻ
Để đăng ký ứng dụng của bạn làm mục tiêu chia sẻ, ứng dụng đó cần đáp ứng tiêu chí của Chrome về khả năng cài đặt. Ngoài ra, để người dùng có thể chia sẻ với ứng dụng của bạn, họ phải thêm ứng dụng đó vào màn hình chính. Điều này ngăn các trang web tự thêm chính mình vào trình chọn ý định chia sẻ của người dùng và đảm bảo rằng người dùng muốn thực hiện việc chia sẻ với ứng dụng của bạn.
Cập nhật tệp kê khai ứng dụng web
Để đăng ký ứng dụng của bạn làm mục tiêu chia sẻ, hãy thêm mục share_target
vào tệp kê khai ứng dụng web của ứng dụng đó. Điều này yêu cầu hệ điều hành đưa ứng dụng của bạn vào dưới dạng một tuỳ chọn trong trình chọn ý định. Nội dung bạn thêm vào tệp kê khai sẽ kiểm soát dữ liệu mà ứng dụng của bạn sẽ chấp nhận. Dưới đây là 3 trường hợp phổ biến cho mục nhập share_target
:
- Chấp nhận thông tin cơ bản
- Đang chấp nhận thay đổi đối với đơn đăng ký
- Chấp nhận tệp
Chấp nhận thông tin cơ bản
Nếu ứng dụng mục tiêu chỉ chấp nhận thông tin cơ bản như dữ liệu, đường liên kết và văn bản, hãy thêm nội dung sau vào tệp manifest.json
:
"share_target": {
"action": "/share-target/",
"method": "GET",
"params": {
"title": "title",
"text": "text",
"url": "url"
}
}
Nếu ứng dụng của bạn đã có một lược đồ URL dùng chung, bạn có thể thay thế các giá trị params
bằng tham số truy vấn hiện có. Ví dụ: nếu giao thức URL chia sẻ sử dụng body
thay vì text
, thì bạn có thể thay thế "text": "text"
bằng "text":
"body"
.
Giá trị method
mặc định là "GET"
nếu không được cung cấp. Trường enctype
không xuất hiện trong ví dụ này cho biết loại mã hoá dữ liệu.
Đối với phương thức "GET"
, enctype
mặc định là "application/x-www-form-urlencoded"
và sẽ bị bỏ qua nếu bạn đặt chính sách này thành bất kỳ giá trị nào khác.
Đang chấp nhận thay đổi đối với đơn đăng ký
Nếu dữ liệu được chia sẻ thay đổi ứng dụng mục tiêu theo cách nào đó (ví dụ: lưu dấu trang trong ứng dụng mục tiêu), hãy đặt giá trị method
thành "POST"
và thêm trường enctype
. Ví dụ bên dưới sẽ tạo một dấu trang trong ứng dụng đích, vì vậy, nó sẽ sử dụng "POST"
cho method
và "multipart/form-data"
cho enctype
:
{
"name": "Bookmark",
"share_target": {
"action": "/bookmark",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"url": "link"
}
}
}
Chấp nhận tệp
Tương tự như các thay đổi đối với ứng dụng, việc chấp nhận tệp yêu cầu method
phải là "POST"
và enctype
phải có mặt. Ngoài ra, enctype
phải là "multipart/form-data"
và phải thêm một mục files
.
Bạn cũng phải thêm một mảng files
xác định các loại tệp mà ứng dụng chấp nhận. Các phần tử mảng là các mục nhập có hai thành phần: trường name
và trường accept
. Trường accept
nhận một loại MIME, đuôi tệp hoặc một mảng chứa cả hai. Tốt nhất là bạn nên cung cấp một mảng chứa cả loại MIME và đuôi tệp vì các hệ điều hành khác nhau theo ý muốn.
{
"name": "Aggregator",
"share_target": {
"action": "/cgi-bin/aggregate",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"title": "name",
"text": "description",
"url": "link",
"files": [
{
"name": "records",
"accept": ["text/csv", ".csv"]
},
{
"name": "graphs",
"accept": "image/svg+xml"
}
]
}
}
}
Xử lý nội dung đến
Cách bạn xử lý dữ liệu được chia sẻ đến là tuỳ thuộc vào bạn và phụ thuộc vào ứng dụng của bạn. Ví dụ:
- Ứng dụng email có thể soạn email mới bằng cách sử dụng
title
làm chủ đề của email, trong đótext
vàurl
là phần nội dung chính. - Một ứng dụng mạng xã hội có thể soạn thảo một bài đăng mới bỏ qua
title
, sử dụngtext
làm nội dung thư và thêmurl
làm đường liên kết. Nếu thiếutext
, ứng dụng cũng có thể sử dụngurl
trong phần nội dung. Nếu thiếuurl
, ứng dụng có thể quéttext
để tìm một URL và thêm URL đó dưới dạng đường liên kết. - Một ứng dụng chia sẻ ảnh có thể tạo một bản trình chiếu mới bằng cách sử dụng
title
làm tiêu đề cho cách trình chiếu,text
làm nội dung mô tả vàfiles
làm hình ảnh trình chiếu. - Ứng dụng nhắn tin văn bản có thể soạn tin nhắn mới bằng cách sử dụng
text
vàurl
nối với nhau và thảtitle
.
Đang xử lý lượt chia sẻ GET
Nếu người dùng chọn ứng dụng của bạn và method
của bạn là "GET"
(mặc định), thì trình duyệt sẽ mở một cửa sổ mới tại URL action
. Sau đó, trình duyệt sẽ tạo một chuỗi truy vấn bằng cách sử dụng các giá trị mã hoá URL đã cung cấp trong tệp kê khai.
Ví dụ: nếu ứng dụng chia sẻ cung cấp title
và text
, thì chuỗi truy vấn sẽ là ?title=hello&text=world
. Để xử lý trường hợp này, hãy sử dụng trình nghe sự kiện DOMContentLoaded
ở trang nền trước và phân tích cú pháp chuỗi truy vấn:
window.addEventListener('DOMContentLoaded', () => {
const parsedUrl = new URL(window.location);
// searchParams.get() will properly handle decoding the values.
console.log('Title shared: ' + parsedUrl.searchParams.get('title'));
console.log('Text shared: ' + parsedUrl.searchParams.get('text'));
console.log('URL shared: ' + parsedUrl.searchParams.get('url'));
});
Hãy nhớ sử dụng trình chạy dịch vụ để lưu trước vào bộ nhớ đệm trang action
để trang này tải nhanh và hoạt động ổn định, ngay cả khi người dùng không kết nối mạng.
Workbox là công cụ giúp bạn triển khai quá trình lưu trước vào bộ nhớ đệm trong trình chạy dịch vụ.
Đang xử lý lượt chia sẻ POST
Nếu method
của bạn là "POST"
, như sẽ là nếu ứng dụng đích chấp nhận dấu trang đã lưu hoặc tệp được chia sẻ, thì phần nội dung của yêu cầu POST
đến sẽ chứa dữ liệu mà ứng dụng chia sẻ truyền, được mã hoá bằng giá trị enctype
được cung cấp trong tệp kê khai.
Trang nền trước không thể xử lý trực tiếp dữ liệu này. Vì trang xem dữ liệu dưới dạng một yêu cầu, nên trang sẽ chuyển dữ liệu đó đến trình chạy dịch vụ, tại đó bạn có thể chặn dữ liệu bằng trình nghe sự kiện fetch
. Từ đây, bạn có thể chuyển dữ liệu trở lại trang nền trước bằng cách sử dụng postMessage()
hoặc truyền dữ liệu đó đến máy chủ:
self.addEventListener('fetch', event => {
const url = new URL(event.request.url);
// If this is an incoming POST request for the
// registered "action" URL, respond to it.
if (event.request.method === 'POST' &&
url.pathname === '/bookmark') {
event.respondWith((async () => {
const formData = await event.request.formData();
const link = formData.get('link') || '';
const responseUrl = await saveBookmark(link);
return Response.redirect(responseUrl, 303);
})());
}
});
Xác minh nội dung được chia sẻ
Hãy nhớ xác minh dữ liệu nhận được. Thật không may, không có gì đảm bảo rằng các ứng dụng khác sẽ chia sẻ nội dung phù hợp trong đúng tham số.
Ví dụ: trên Android, trường url
sẽ trống vì trường này không được hỗ trợ trong hệ thống chia sẻ của Android. Thay vào đó, URL sẽ thường xuất hiện trong trường text
hoặc đôi khi trong trường title
.
Hỗ trợ trình duyệt
Web Share Target API được hỗ trợ như mô tả dưới đây:
Trên tất cả các nền tảng, ứng dụng web của bạn phải được cài đặt thì mới có thể xuất hiện dưới dạng mục tiêu tiềm năng để nhận dữ liệu được chia sẻ.
Ứng dụng mẫu
Hỗ trợ API
Bạn có định sử dụng Web Share Target API 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 bài đăng trên Twitter tới @ChromiumDev kèm theo hashtag
#WebShareTarget
và cho chúng tôi biết vị trí cũng như cách bạn sử dụng bài đăng này.