Đơn giản hoá việc chia sẻ trên thiết bị di động và máy tính nhờ API mục tiêu chia sẻ web
Trên thiết bị di động hoặc thiết bị 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 một ứng dụng và chọn người chia sẻ. Ví dụ: bạn nên chia sẻ một bài viết thú vị, bằng cách gửi email cho bạn bè hoặc tweet bài viết tới thế giới.
Trước đây, chỉ các ứ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 khác đã cài đặt. Tuy nhiên, với API mục tiêu chia sẻ web, ứng dụng web đã cài đặt có thể đăng ký bằng 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 Mục tiêu chia sẻ web trong thực tế
- Sử dụng Chrome 76 trở lên cho Android hoặc Chrome 89 trở lên máy tính để bàn, hãy mở bản minh hoạ Mục tiêu chia sẻ web.
- Khi được nhắc, hãy nhấp vào Cài đặt để thêm ứng dụng vào màn hình chính hoặc hãy sử dụng trình đơn Chrome để thêm vào màn hình chính.
- Mở bất kỳ ứng dụng nào có hỗ trợ tính năng chia sẻ hoặc sử dụng nút Chia sẻ trong ứng dụng minh hoạ.
- Trong bộ chọn mục tiêu, hãy chọn Web Share Test (Kiểm thử tính năng 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ẻ web.
Đăng ký ứng dụng của bạn dưới dạng mục tiêu chia sẻ
Để đăng ký ứng dụng của bạn dưới dạng mục tiêu chia sẻ, ứng dụng đó cần đáp ứng các tiêu chí về khả năng cài đặt. Ngoài ra, trước khi người dùng có thể chia sẻ vào ứng dụng của bạn, họ phải thêm thông tin đó vào màn hình chính. Việc này ngăn các trang web thêm ngẫu nhiên 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 chia sẻ là điều mà người dùng muốn thực hiện 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 dưới dạng mục tiêu chia sẻ, hãy thêm một mục nhập share_target vào web của ứng dụng đó
tệp kê khai ứng dụng. Thao tác này sẽ yêu cầu hệ điều hành thêm ứng dụng của bạn 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. Có 3 tình huống phổ biến cho share_target
mục nhập:
- Chấp nhận thông tin cơ bản
- Chấp nhận các thay đổi về ứng dụng
- 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 của bạn 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 đoạn mã 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ó lược đồ URL chia sẻ, bạn có thể thay thế params
bằng các tham số truy vấn hiện có. Ví dụ: nếu URL chia sẻ của bạn
giao thức sử dụng body thay vì text, 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
hiển thị trong ví dụ này, cho biết kiểu mã hoá cho 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 nó được đặt thành bất kỳ giá trị nào khác.
Chấp nhận các thay đổi về ứng dụng
Nếu dữ liệu được chia sẻ làm thay đổi ứng dụng đích theo một cách nào đó—ví dụ: lưu
dấu trang trong ứng dụng đích—đặt giá trị method thành "POST" và bao gồm
trường enctype. Ví dụ dưới đây 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
Giống như các thay đổi về ứng dụng, việc chấp nhận tệp yêu cầu method phải là "POST"
và enctype sẽ xuất hiện. Ngoài ra, enctype phải:
Bạn phải thêm "multipart/form-data" và một mục nhập files.
Bạn cũng phải thêm một mảng files để xác định những loại tệp được ứng dụng của bạn chấp nhận. Chiến lược phát hành đĩa đơn
các phần tử mảng là các phần tử có hai thành phần: trường name và accept
. Trường accept lấy 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 bao gồm cả
Loại MIME và đuôi tệp do các hệ điều hành khác nhau trong đó
mà họ thích.
{
"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 sẽ tuỳ thuộc vào bạn và phụ thuộc vào . Ví dụ:
- Ứng dụng email có thể soạn email mới bằng cách sử dụng
titlelàm tiêu đề của email, vớitextvàurlđược nối với nhau làm phần nội dung. - Ứng dụng mạng xã hội có thể soạn một bài đăng mới bỏ qua
title, bằng cách sử dụngtextlàm nội dung thư và thêmurllàm đường liên kết. Nếutextlà bị thiếu, ứng dụng cũng có thể sử dụngurltrong phần nội dung. Nếu thiếuurl, ứng dụng có thể quéttextđể tìm URL rồi thêm URL đó dưới dạng một đường liên kết. - Một ứng dụng chia sẻ ảnh có thể tạo bản trình chiếu mới bằng cách sử dụng
titlelàm tiêu đề bản trình chiếu,textlàm mô tả vàfileslàm hình ảnh trình chiếu. - Một ứng dụng nhắn tin văn bản có thể soạn tin nhắn mới bằng
textvàurlđược 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), 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ị được mã hoá URL được 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ý, hãy sử dụng DOMContentLoaded
trình xử lý sự kiện trong 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 action vào bộ nhớ đệm
trang để trang web tải nhanh và hoạt động đáng tin cậy, ngay cả khi người dùng không kết nối mạng.
Hộp công việc là một công cụ có thể giúp bạn
triển khai tính năng lưu vào bộ nhớ đệm trong trình chạy dịch vụ của bạn.
Đang xử lý việc chia sẻ qua POST
Nếu method của bạn là "POST", giống như khi ứng dụng đích chấp nhận một tệp đã lưu
dấu trang 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 được ứ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 này xem dữ liệu
một yêu cầu, trang sẽ chuyển yêu cầu đó đến trình chạy dịch vụ, tại đây bạn có thể chặn yêu cầu bằng
fetch
trình nghe sự kiện. Tại đây, bạn có thể chuyển dữ liệu trở lại nền trước
bằng postMessage() hoặc truyền mã này đế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 đến. Rất tiếc, chúng tôi không thể đảm bảo rằng các ứng dụng sẽ chia sẻ nội dung phù hợp trong thông số phù hợp.
Ví dụ: trên Android, trường url sẽ trống vì
không được hỗ trợ trong hệ thống chia sẻ của Android. Thay vào đó, URL thường xuất hiện bằng
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 trước khi 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
Hiện thông tin hỗ trợ về API này
Bạn có định dùng API mục tiêu chia sẻ web không? Sự hỗ trợ công khai của bạn giúp ích cho 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 đó.
Gửi một bài đăng đến @ChromiumDev kèm theo hashtag
#WebShareTarget
đồng thời cho chúng tôi biết bạn đang sử dụng ở đâu và như thế nào.