Tích hợp hệ điều hành

Ứng dụng web có phạm vi tiếp cận rộng lớn. Chiến dịch này chạy trên nhiều nền tảng. Rất dễ để chia sẻ qua đường liên kết. Nhưng theo truyền thống, các tính năng này không tích hợp với hệ điều hành. Cách đây không lâu, chúng thậm chí còn không cài đặt được. May mắn thay, điều này đã thay đổi và giờ đây, chúng tôi có thể tận dụng việc tích hợp đó để thêm các tính năng hữu ích vào PWA của mình. Hãy cùng khám phá một vài lựa chọn trong số đó.

Làm việc với hệ thống tệp

Quy trình sử dụng tệp của người dùng điển hình 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.
• Hãy thực hiện thay đổi đối với các tệp hoặc thư mục đó rồi lưu trực tiếp lại các thay đổi.
• Tạo tệp và thư mục mới.

Trước API Truy cập hệ thống tệp, các ứng dụng web không thể làm việc này. Để mở tệp, người dùng phải tải tệp lên, lưu các thay đổi cần thực hiện để người dùng tải tệp xuống. Web không hề có quyền truy cập để 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(). 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ư nhấp vào nút. Sau đây là các bước còn lại của quá trình thiết lập để mở tệp:

1. Ghi lại tên người dùng tệp từ API bộ chọn tệp của quyền truy cập hệ thống tệp. Thao tác này cung cấp cho bạn thông tin cơ bản về tệp.
2. Bằng cách sử dụng phương thức getFile() của tên người dùng, bạn sẽ nhận được một loại Blob đặc biệt có tên là File. Lớp này bao gồm các thuộc tính chỉ có thể đọc khác (chẳng hạn như tên và ngày sửa đổi gần đây nhất) của tệp. Vì là một Blob nên bạn có thể gọi các phương thức Blob trên đó, chẳng hạn như text(), để lấy nội dung.

// 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 vào tệp, bạn cũng cần có cử chỉ của người dùng; thì:

1. Sử dụng tên người dùng tệp để tạo FileSystemWritableFileStream.
2. Thực hiện thay đổi đối với 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.
3. Cuối cùng, khi thực hiện xong các thay đổi, bạn đóng luồng để chuyển các thay đổi từ tạm thời sang vĩnh viễn.

Hãy xem mã này:

// 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();

Thận trọng: Safari triển khai API Truy cập hệ thống tệp (File System Access API) không phải cho hệ thống công khai, mà dưới dạng một hộp cát riêng tư theo nguồn gốc. Bạn chỉ có thể đọc và ghi các tệp trong hệ thống tệp ảo đó bằng API này.

Xử lý tệp

API Truy cập hệ thống tệp cho phép bạn mở tệp từ bên trong ứng dụng, nhưng ngược lại thì sao? Người dùng muốn đặt ứng dụng họ 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 tiện ích được hỗ trợ.

Sau khi đăng ký, PWA đã cài đặt sẽ xuất hiện dưới dạng một lựa 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 để 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ủa bạn có thể chụp các đường liên kết thuộc phạm vi của hệ điều hành rồi hiển thị những đườ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 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 phần nội dung cụ thể) trong PWA của bạn, thì nội dung đó sẽ mở trong một cửa sổ độc lập.

Hành vi này sẽ tự động có trên Android khi bạn sử dụng WebAPK, chẳng hạn như khi người dùng cài đặt PWA với Chrome. Bạn không thể chụp URL trên các PWA đã cài đặt trên iOS và iPadOS qua 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 ra một thông số kỹ thuật mới. Thông số kỹ thuật này hiện đang ở giai đoạn thử nghiệm; thì hệ thống sẽ thêm một thành phần mới của tệp kê khai: url_handlers. Tài sản này yêu cầu một mảng nguồn gốc mà PWA muốn thu thập. 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 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 tệp có tồn tại tại app.web.dev/.well-known/web-app-origin-association hay không, chấp nhận hoạt động xử lý URL từ URL phạm vi của 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": [ "/*" ]
            }
        }
    ]
}

Trên Android có WebAPK, PWA được tự động đăng ký làm trình xử lý cho phạm vi của tệp kê khai bằng bộ lọc ý định trên Android. Bạn không thể thêm nguồn gốc hoặc phạm vi khác vào đó. Đối với iOS và iPadOS, bạn chỉ có thể xử lý các URL có PWA xuất bản trong AppStore, chẳng hạn như những URL được tạo bằng PWABuilder.

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 chuẩn, nhưng bạn có thể sử dụng lượ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 khi các ứng dụng đăng ký giao thức của chú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 của mình trên các cửa hàng ứng dụng.

Thận trọng: Đối với những PWA sử dụng API trình xử lý giao thức URL, tên giao thức phải là một trong các lược đồ trong danh sách an toàn hoặc phải sử dụng tiền tố web+. Vì vậy, trong ví dụ này, một đường liên kết phải trỏ đến web+pwa:// để mở PWA.

Để đăng ký, bạn có thể dùng registerProtocolHandler() hoặc sử dụng thành phần protocol_handlers trong tệp kê khai, với lược đồ mong muốn và URL mà 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 đúng trình xử lý và lấy chuỗi truy vấn value trong PWA của mình. %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 ở một nơi nào đó như <a href="web+pwa://testing">, thì PWA của bạn 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 (PWA hoặc không phải) trong 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 rồi trỏ đến giao thức URI mà bạn muốn, truyền các đối số dưới dạng mã thoát URL.

Bạn có thể sử dụng các giao thức chuẩn phổ biến, 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 ứng dụng khác Các giao thức URL, ví dụ như từ tin nhắn, bản đồ, chỉ đường, cuộc họp trực tuyến, mạng xã hội và cửa hàng ứng dụng nổi tiếng.

Lưu ý: Thay vì sử dụng các giao thức URI riêng tư để giao tiếp với các ứng dụng nhắn tin và mạng xã hội, bạn có thể sử dụng API Chia sẻ web chung

Chia sẻ trên web

Hỗ trợ trình duyệt

• 89
• 93
• 
• 12.1

Nguồn

Với API Chia sẻ web, PWA có thể gửi nội dung đến các ứng dụng khác đã được cài đặt trong thiết bị thông qua kênh chia sẻ.

API này chỉ hoạt động trên các hệ điều hành theo cơ chế share, bao gồm Android, iOS, iPadOS, Windows và ChromeOS. Bạn có thể chia sẻ đối tượng chứa:

• Văn bản (các thuộc tính title và text)
• Một URL (url tài sản)
• Tệp (thuộc tính files).

Để kiểm tra xem thiết bị hiện tại có thể chia sẻ hay không, đối với dữ liệu đơn giản (chẳng hạn như văn bản), bạn cần kiểm tra sự hiện diện của phương thức navigator.share() để chia sẻ các tệp mà bạn 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 sẽ giải quyết bằng undefined hoặc từ chối nếu thuộc trường hợp ngoại lệ.

Mục tiêu chia sẻ web

API mục tiêu chia sẻ web cho phép ứng dụng web tiến bộ (PWA) của bạn trở thành mục tiêu của hoạt động chia sẻ từ một ứng dụng khác trên thiết bị đó, bất kể đó 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ẻ.

Ứng dụng này hiện có trên Android, có WebAPK và ChromeOS, và chỉ hoạt động sau khi người dùng cài đặt PWA của bạn. Trình duyệt đă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ẻ web trong tệp kê khai với thành phần share_target được xác định trong thông số kỹ thuật của bản nháp Mục tiêu chia sẻ 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 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ặc PUT.

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ể thiết lập loại mã này thành multipart/form-data cho các phương thức như POST.

params

Đối tượng sẽ liên kết 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ẽ chuyển vào URL (trên method: 'GET') hoặc trong phần nội dung của yêu cầu bằng phương thức mã hoá đã chọn.

Lưu ý: Bạn có thể phân tích cú pháp yêu cầu POST ở phía máy chủ hoặc trong trình chạy dịch vụ nếu muốn tránh việc truy cập vào mạng. Hãy xem mẫu này để biết thêm chi tiết.

Ví dụ: Bạn có thể thêm vào tệp kê khai để xác định rằng bạn muốn nhận dữ liệu được chia sẻ (chỉ dành cho tiêu đề và URL) cho PWA của mình:

...
"share_target": {
   "action": "/receive-share/",
   "method": "GET",
   "params": {
      "title": "shared_title",
      "url": "shared_url"
   }
}
...

Trong mẫu trước, nếu bất kỳ ứ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 máy chủ gốc, trong đó AAA là tiêu đề chung và BBB là URL dùng chung. 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 của PWA trong tệp kê khai của bạn để 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 đó.

Lưu ý: Hãy đảm bảo rằng trang xử lý dữ liệu được chia sẻ có thể truy cập được khi không có mạng. Bạn không muốn người dùng chọn ứng dụng của mình và thấy lỗi vì họ hiện không có kết nối.

Để 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 API mục tiêu chia sẻ web

Trình Chọn Địa chỉ Liên hệ

Hỗ trợ trình duyệt

• dấu x
• dấu x
• dấu x
• dấu x

Nguồn

Với API bộ chọn địa chỉ liên hệ, bạn có thể yêu cầu thiết bị hiển thị hộp thoại gốc có tất cả địa chỉ liên hệ của người dùng để người dùng có thể chọn một hoặc nhiều địa chỉ liên hệ. 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 địa chỉ liên hệ chủ yếu có trên thiết bị di động và mọi thứ đượ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 thuộc tính hiện có để truy vấn bằng navigator.contacts.getProperties() và yêu cầu một hoặc nhiều lựa chọn liên hệ kèm theo danh sách các thuộc tính 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 thuộc tính mà bạn muốn trả về.

Thận trọng: API không đảm bảo rằng các đối tượng được trả về sẽ có tất cả thuộc tính được yêu cầu. Vì vậy, bạn nên kiểm tra lại sự hiện diện của các đối tượng đó.

Mẫu sau đây sẽ liệt kê các địa chỉ 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 trên máy
• Cho phép các ứng dụng web đã cài đặt là trình xử lý tệp
• Xử lý tệp trong các Ứng dụng web tiến bộ
• Tích hợp với giao diện người dùng Chia sẻ hệ điều hành với API Chia sẻ 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 Web Share Target API
• Bộ chọn người liên hệ cho web