Ứng dụng web có phạm vi tiếp cận lớn. Các ứng dụng này chạy trên nhiều nền tảng. Bạn có thể dễ dàng chia sẻ các tệp này qua đường liên kết. Nhưng theo truyền thống, các ứng dụng này thiếu khả năng tích hợp với hệ điều hành. Cách đây không lâu, bạn thậm chí không thể cài đặt các ứng dụng này. May mắn thay, điều đó đã thay đổi và giờ đây, chúng ta có thể tận dụng tính năng tích hợp đó để thêm các tính năng hữu ích vào PWA. Hãy cùng khám phá một số tuỳ chọn đó.
Làm việc với hệ thống tệp
Quy trình làm việc thông thường của người dùng khi sử dụng tệp sẽ có dạng như sau:
- Chọn một tệp hoặc thư mục trên thiết bị rồi mở trực tiếp tệp hoặc thư mục đó.
- Chỉnh sửa các tệp hoặc thư mục đó rồi lưu trực tiếp các thay đổi.
- Tạo tệp và thư mục mới.
Trước khi có API Truy cập hệ thống tệp, các ứng dụng web không thể thực hiện việc này. Để mở tệp, người dùng phải tải tệp lên, để lưu thay đổi, người dùng phải tải tệp xuống và web hoàn toàn không có quyền tạo tệp và thư mục mới trong hệ thống tệp của người dùng.
Mở tệp
Để mở một tệp, chúng ta sử dụng phương thức window.showOpenFilePicker()
. Xin lưu ý rằng phương thức này yêu cầu một cử chỉ của người dùng, chẳng hạn như một lượt nhấp vào nút. Dưới đây là phần thiết lập còn lại để mở tệp:
- Ghi lại handle tệp từ API bộ chọn tệp của quyền truy cập vào hệ thống tệp. Thao tác này sẽ cung cấp cho bạn thông tin cơ bản về tệp.
- Khi sử dụng phương thức
getFile()
của tay cầm, bạn sẽ nhận được một loạiBlob
đặc biệt có tên làFile
, trong đó có các thuộc tính chỉ có thể đọc bổ sung (chẳng hạn như tên và ngày sửa đổi gần đây nhất) về tệp. Vì là Blob nên bạn có thể gọi các phương thức Blob trên Blob đó, chẳng hạn nhưtext()
, để lấy nội dung của Blob.
// Have the user select a file.
const [ handle ] = await window.showOpenFilePicker();
// Get the File object from the handle.
const file = await handle.getFile();
// Get the file content.
// Also available, slice(), stream(), arrayBuffer()
const content = await file.text();
Đang lưu thay đổi
Để lưu các thay đổi đối với một tệp, bạn cũng cần có một cử chỉ của người dùng; sau đó:
- Sử dụng tay điều khiển tệp để tạo
FileSystemWritableFileStream
. - Chỉnh sửa luồng. Thao tác này sẽ không cập nhật tệp tại chỗ; thay vào đó, một tệp tạm thời thường được tạo.
- Cuối cùng, khi bạn chỉnh sửa xong, hãy đóng luồng để chuyển các thay đổi từ tạm thời sang vĩnh viễn.
Hãy xem ví dụ này trong mã:
// Make a writable stream from the handle.
const writable = await handle.createWritable();
// Write the contents of the file to the stream.
await writable.write(contents);
// Close the file and write the contents to disk.
await writable.close();
Xử lý tệp
API Quyền truy cập vào hệ thống tệp cho phép bạn mở các tệp trong ứng dụng, nhưng còn ngược lại thì sao? Người dùng muốn đặt ứng dụng yêu thích làm ứng dụng mặc định để mở tệp. API xử lý tệp là một API thử nghiệm cho phép các PWA đã cài đặt: Đăng ký làm trình xử lý tệp trên thiết bị của người dùng, chỉ định loại MIME và đuôi tệp mà PWA hỗ trợ trong tệp kê khai ứng dụng web. Bạn có thể chỉ định biểu tượng tệp tuỳ chỉnh cho các đuôi tệp được hỗ trợ.
Sau khi được đăng ký, PWA đã cài đặt sẽ xuất hiện dưới dạng một tuỳ chọn trong hệ thống tệp của người dùng, cho phép họ mở tệp trực tiếp trong đó. Dưới đây là ví dụ về cách thiết lập tệp kê khai cho PWA để đọc tệp văn bản:
...
"file_handlers": [
{
"action": "/open-file",
"accept": {
"text/*": [".txt"]
}
}
]
...
Xử lý URL
Với tính năng xử lý URL, PWA có thể thu thập các đường liên kết thuộc phạm vi của ứng dụng từ hệ điều hành và hiển thị các đường liên kết đó trong cửa sổ PWA, thay vì thẻ của trình duyệt mặc định. Ví dụ: nếu bạn nhận được một thông báo liên kết đến PWA hoặc nhấp vào một đường liên kết sâu (URL trỏ đến một nội dung cụ thể) trong PWA, thì nội dung đó sẽ mở trong một cửa sổ độc lập.
Hành vi này sẽ tự động xuất hiện trên Android khi sử dụng WebAPK, chẳng hạn như khi người dùng cài đặt PWA bằng Chrome. Bạn không thể chụp URL trên các PWA được cài đặt trên iOS và iPadOS từ Safari.
Đối với trình duyệt dành cho máy tính, cộng đồng trình duyệt web đã tạo một thông số kỹ thuật mới. Thông số kỹ thuật này hiện đang thử nghiệm; thông số này sẽ thêm một thành phần tệp kê khai mới: url_handlers
. Thuộc tính này dự kiến sẽ có một mảng các nguồn gốc mà PWA muốn ghi lại. Nguồn gốc của PWA sẽ được cấp tự động và mỗi nguồn gốc khác phải chấp nhận việc xử lý đó hoạt động thông qua một tệp có tên là web-app-origin-association
.
Ví dụ: nếu tệp kê khai của PWA được lưu trữ trên web.dev và bạn muốn thêm nguồn gốc app.web.dev, thì tệp kê khai sẽ có dạng như sau:
"url_handlers": [
{"origin": "https://app.web.dev"},
]
Trong trường hợp này, trình duyệt sẽ kiểm tra xem có tệp nào tại app.web.dev/.well-known/web-app-origin-association
hay không, chấp nhận việc xử lý URL từ URL phạm vi PWA. Nhà phát triển phải tạo tệp này. Trong ví dụ sau, tệp sẽ có dạng như sau:
{
"web_apps": [
{
"manifest": "/mypwa/app.webmanifest",
"details": {
"paths": [ "/*" ]
}
}
]
}
Xử lý giao thức URL
Tính năng xử lý URL hoạt động với các URL giao thức https
tiêu chuẩn, nhưng bạn có thể sử dụng các giao thức URI tuỳ chỉnh, chẳng hạn như pwa://
. Trong một số hệ điều hành, các ứng dụng đã cài đặt có được khả năng này bằng cách đăng ký giao thức của ứng dụng.
Đối với PWA, chức năng này được bật bằng cách sử dụng API trình xử lý giao thức URL, chỉ có trên thiết bị máy tính. Bạn chỉ có thể cho phép các giao thức tuỳ chỉnh cho thiết bị di động bằng cách phân phối PWA trên các cửa hàng ứng dụng.
Để đăng ký, bạn có thể sử dụng phương thức registerProtocolHandler() hoặc sử dụng thành phần protocol_handlers
trong tệp kê khai, với giao thức mong muốn và URL bạn muốn tải trong ngữ cảnh của PWA, chẳng hạn như:
...
{
"protocol_handlers": [
{
"protocol": "web+pwa",
"url": "/from-protocol?value=%s"
},
]
}
...
Bạn có thể định tuyến URL from-protocol
đến trình xử lý chính xác và nhận chuỗi truy vấn value
trong PWA. %s
là phần giữ chỗ cho URL đã thoát đã kích hoạt thao tác. Vì vậy, nếu bạn có một đường liên kết ở đâu đó như <a href="web+pwa://testing">
, thì PWA sẽ mở /from-protocol?value=testing
.
Gọi các ứng dụng khác
Bạn có thể sử dụng giao thức URI để kết nối với bất kỳ ứng dụng đã cài đặt nào khác (dù có phải là PWA hay không) trong thiết bị của người dùng trên mọi nền tảng. Bạn chỉ cần tạo một đường liên kết hoặc sử dụng navigator.href
và trỏ đến lược đồ URI mà bạn muốn, truyền các đối số ở dạng URL đã thoát.
Bạn có thể sử dụng các giao thức tiêu chuẩn đã biết, chẳng hạn như tel:
để gọi điện thoại, mailto:
để gửi email hoặc sms:
để nhắn tin văn bản; hoặc bạn có thể tìm hiểu về các giao thức URL của các ứng dụng khác, chẳng hạn như ứng dụng nhắn tin, bản đồ, chỉ đường, họp trực tuyến, mạng xã hội và cửa hàng ứng dụng nổi tiếng.
Chia sẻ trên web
Với Web Share API, PWA của bạn có thể gửi nội dung đến các ứng dụng đã cài đặt khác trong thiết bị thông qua kênh chia sẻ.
API này chỉ có trên các hệ điều hành có cơ chế share
, bao gồm Android, iOS, iPadOS, Windows và ChromeOS.
Bạn có thể chia sẻ một đối tượng chứa:
- Văn bản (thuộc tính
title
vàtext
) - URL (thuộc tính
url
) - Tệp (thuộc tính
files
).
Để kiểm tra xem thiết bị hiện tại có thể chia sẻ dữ liệu đơn giản (như văn bản) hay không, bạn hãy kiểm tra xem có phương thức navigator.share()
hay không. Để chia sẻ tệp, bạn hãy kiểm tra xem có phương thức navigator.canShare()
hay không.
Bạn yêu cầu hành động chia sẻ bằng cách gọi navigator.share(objectToShare)
. Lệnh gọi đó trả về một Lời hứa phân giải bằng undefined
hoặc từ chối bằng một ngoại lệ.
Mục tiêu chia sẻ trên web
API Mục tiêu chia sẻ trên web cho phép PWA của bạn trở thành mục tiêu của một thao tác chia sẻ từ một ứng dụng khác trên thiết bị đó, cho dù ứng dụng đó có phải là PWA hay không. PWA của bạn nhận dữ liệu do một ứng dụng khác chia sẻ.
Tính năng này hiện có trên Android với WebAPK và ChromeOS, đồng thời chỉ hoạt động sau khi người dùng đã cài đặt PWA của bạn. Trình duyệt sẽ đăng ký mục tiêu chia sẻ trong hệ điều hành khi ứng dụng được cài đặt.
Bạn thiết lập mục tiêu chia sẻ trên web trong tệp kê khai bằng thành phần share_target
được xác định trong Thông số kỹ thuật dự thảo về mục tiêu chia sẻ trên web. share_target
được đặt thành một đối tượng có một số thuộc tính:
action
- URL sẽ được tải trong cửa sổ PWA dự kiến sẽ nhận được dữ liệu được chia sẻ.
method
Phương thức động từ HTTP - sẽ được dùng cho hành động, chẳng hạn như
GET
,POST
hoặcPUT
. enctype
- (Không bắt buộc) Loại mã hoá cho các tham số, theo mặc định là
application/x-www-form-urlencoded
, nhưng bạn cũng có thể đặt thànhmultipart/form-data
cho các phương thức nhưPOST
. params
- Một đối tượng sẽ ánh xạ dữ liệu chia sẻ (từ các khoá:
title
,text
,url
vàfiles
từ tính năng Chia sẻ trên web) đến các đối số mà trình duyệt sẽ truyền trong URL (trênmethod: 'GET'
) hoặc trong nội dung của yêu cầu bằng cách sử dụng bộ mã hoá đã chọn.
Ví dụ: bạn có thể xác định cho PWA rằng bạn muốn nhận dữ liệu được chia sẻ (chỉ tiêu đề và URL) bằng cách thêm vào tệp kê khai:
...
"share_target": {
"action": "/receive-share/",
"method": "GET",
"params": {
"title": "shared_title",
"url": "shared_url"
}
}
...
Từ mẫu trước, nếu có ứng dụng nào trong hệ thống đang chia sẻ URL có tiêu đề và người dùng chọn PWA của bạn trong hộp thoại, thì trình duyệt sẽ tạo một thao tác điều hướng mới đến /receive-share/?shared_title=AAA&shared_url=BBB
của nguồn gốc, trong đó AAA là tiêu đề được chia sẻ và BBB là URL được chia sẻ. Bạn có thể sử dụng JavaScript để đọc dữ liệu đó từ chuỗi window.location
bằng cách phân tích cú pháp dữ liệu đó bằng hàm khởi tạo URL
.
Trình duyệt sẽ sử dụng tên và biểu tượng PWA trong tệp kê khai để cung cấp mục chia sẻ của hệ điều hành. Bạn không thể chọn một nhóm khác cho mục đích đó.
Để biết thêm ví dụ chi tiết và cách nhận tệp, hãy xem bài viết Nhận dữ liệu được chia sẻ bằng Web Share Target API
Trình Chọn Địa chỉ Liên hệ
Với Contact Picker API (API Bộ chọn danh bạ), bạn có thể yêu cầu thiết bị hiển thị một hộp thoại gốc có tất cả danh bạ của người dùng để người dùng có thể chọn một hoặc nhiều danh bạ. Sau đó, PWA của bạn có thể nhận dữ liệu bạn muốn từ những người liên hệ đó.
API bộ chọn người liên hệ chủ yếu có trên thiết bị di động và mọi thao tác đều được thực hiện thông qua giao diện navigator.contacts
trên các nền tảng tương thích.
Bạn có thể yêu cầu các tài sản hiện có để truy vấn bằng navigator.contacts.getProperties()
và yêu cầu lựa chọn một hoặc nhiều thông tin liên hệ bằng danh sách các tài sản mong muốn.
Một số thuộc tính mẫu là name
, email
, address
và tel
. Khi yêu cầu người dùng chọn một hoặc nhiều người liên hệ, bạn có thể gọi navigator.contacts.select(properties)
, truyền một mảng các thuộc tính mà bạn muốn nhận được.
Mẫu sau đây sẽ liệt kê những người liên hệ mà bộ chọn nhận được.
async function getContacts() {
const properties = ['name', 'email', 'tel'];
const options = { multiple: true };
try {
const contacts = await navigator.contacts.select(properties, options);
console.log(contacts);
} catch (ex) {
// Handle any errors here.
}
}
Tài nguyên
- API Truy cập hệ thống tệp: đơn giản hoá quyền truy cập vào tệp cục bộ
- Cho phép các ứng dụng web đã cài đặt làm trình xử lý tệp
- Xử lý tệp trong ứng dụng web tiến bộ
- Tích hợp với giao diện người dùng chia sẻ trên hệ điều hành bằng API chia sẻ trên web
- Chia sẻ nội dung với các ứng dụng khác
- Nhận dữ liệu được chia sẻ bằng API Mục tiêu chia sẻ trên web
- Bộ chọn người liên hệ cho web