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. Quảng cáo này chạy trên nhiều nền tảng. Bạn có thể dễ dàng chia sẻ chúng qua đường liên kết. Nhưng theo truyền thống, các ứng dụng này thiếu 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 thể cài đặt được. Thật may là tình hình này đã thay đổi và giờ đây chúng tôi có thể tận dụng công 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 số lựa chọn đó.

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

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

Trước File System Access API, các ứng dụng web không thể làm việc này. Việc mở tệp yêu cầu người dùng phải tải tệp lên, lưu các thay đổi bắt buộc người dùng phải tải tệp xuống và web hoàn toàn không 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ẽ sử dụng phương thức window.showOpenFilePicker(). Xin lưu ý rằng phương thức này yêu cầu cử chỉ của người dùng, chẳng hạn như nhấp vào nút. Dưới đây là phần 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. Khi 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, trong đó có các thuộc tính khác chỉ có thể đọc (chẳng hạn như tên và ngày sửa đổi gần đây nhất) liên quan đến tệp. Vì đây là Blob nên các phương thức Blob có thể được gọi 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 các thay đổi

Để lưu các thay đổi đối với tệp, bạn cũng cần có cử chỉ của người dùng; sau đó:

1. Sử dụng trình điều khiển tệp để tạo FileSystemWritableFileStream.
2. Thực hiện các 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 sẽ được tạo.
3. Cuối cùng, khi bạn đã hoàn tất việc thực hiện các thay đổi, bạn đóng luồng, điều này sẽ chuyển các thay đổi từ tạm thời thành 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, không phải cho hệ thống công cộng, mà dưới dạng hộp cát riêng tư theo nguồn gốc. Bạn chỉ có thể đọc và ghi 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ừ trong ứng dụng của mình, 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 của bạn 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ẽ hiển thị 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 vào đó. 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ể ghi lại các đường liên kết thuộc phạm vi của 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 phần nội dung cụ thể) trong PWA, nội dung sẽ mở trong một cửa sổ độc lập.

Hành vi này tự động có trên Android khi WebAPK được sử dụng, chẳng hạn như khi người dùng cài đặt PWA bằng Chrome. Không thể chụp URL trên các ứng dụng web tiến bộ (PWA) được cài đặt trên iOS và iPadOS từ Safari.

Đối với các 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ê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 loạt 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 phải chấp nhận quá trình xử lý đó thông qua tệp có tên web-app-origin-association. Ví dụ: nếu tệp kê khai của PWA của bạn được lưu trữ trên web.dev và bạn muốn thêm nguồn gốc app.web.dev, tệp 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 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 trong 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": [ "/*" ]
            }
        }
    ]
}

Trên Android có WebAPK, PWA sẽ tự động được đăng ký làm trình xử lý trong phạm vi của tệp kê khai bằng bộ lọc ý định của Android. Bạn không thể thêm nguồn gốc hoặc phạm vi khác vào phạm vi đó. Đố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ư các 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 tiêu chuẩn, nhưng bạn vẫn có thể sử dụng các 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ó thể sử dụng chức năng này khi đăng ký giao thức.

Đối với PWA, chức năng này được bật bằ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 trên 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.

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 giao thức được liệt kê vào danh sách an toàn hoặc phải sử dụng tiền tố web+. Vì vậy, trong ví dụ của chúng ta, một đường liên kết phải trỏ đến web+pwa:// để mở PWA của chúng ta.

Để đăng ký, bạn có thể sử dụng phương thứcregisterProtocolHandler() 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à nhận chuỗi truy vấn value trong PWA của mình. %s là một 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 ở nơi như <a href="web+pwa://testing">, thì PWA của bạn sẽ mở /from-protocol?value=testing.

Gọi cho các ứng dụng khác

Bạn có thể sử dụng lược đồ URI để kết nối với mọi ứng dụng đã cài đặt khác (hoặc không có ứng dụng web tiến bộ) 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, chuyển các đối số ở dạng thoát URL.

Bạn có thể sử dụng các giao thức tiêu 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 giao thức URL của các ứng dụng khác (ví dụ: từ tính năng nhắn tin, bản đồ, tính năng 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 lượ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ể dùng API Chia sẻ web chung

Chia sẻ trên web

Hỗ trợ trình duyệt

• 89
• 93
• 12,1

Nguồn

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

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

• Văn bản (thuộc tính title và text)
• Một URL (tài sản url)
• 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 phương thức navigator.canShare() có hiện diện 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 Promise sẽ giải quyết bằng undefined hoặc từ chối với một ngoại lệ.

Mục tiêu chia sẻ web

Web Share Target API cho phép 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ị đó, cho dù đó có phải là PWA hay không. PWA của bạn nhận được dữ liệu do một ứng dụng khác chia sẻ.

Ứng dụ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 đă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 với thành phần share_target được xác định trong thông số bản nháp Mục tiêu chia sẻ web. share_target được đặt thành một đối tượng với 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 sử dụng cho thao tác, 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ể đặt loại mã hoá này là 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ẽ truyề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 bạn muốn tránh việc truy cập mạng. Xem mẫu này để biết thêm chi tiết.

Ví dụ: Bạn có thể xác định cho PWA của mình 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"
   }
}
...

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 thành phần đ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 chuỗi bằng hàm khởi tạo URL.

Trình duyệt sẽ dùng tên và biểu tượng PWA từ tệp kê khai của bạn để 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 đó.

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 bạn và phát hiện lỗi vì họ hiện không có kết nối mạng.

Để 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ệ

Hỗ trợ trình duyệt

• x
• x
• x
• x

Nguồn

Với API Bộ chọn danh bạ, bạn có thể yêu cầu thiết bị hiển thị hộp thoại gốc với 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. 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 danh bạ 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 cơ sở lưu trú 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 người liên hệ kèm theo danh sách cơ sở lưu trú 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 nhận lại.

Thận trọng: API này 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ê 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á việc truy cập vào tệp cục bộ
• Cho phép các ứng dụng web được 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 API Chia sẻ web với giao diện người dùng chia sẻ hệ điều hành
• 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