OS 整合

網頁應用程式的觸及範圍相當廣泛，而且會在多個平台上運作。使用連結就能輕鬆分享。但傳統上並沒有與作業系統整合。不久前，他們甚至無法安裝。幸好這個改變已改變，我們現在可以利用這項整合功能，為 PWA 新增實用功能。一起來看看其中幾個選項。

使用檔案系統

以下是使用檔案的一般使用者工作流程：

• 選擇裝置上的檔案或資料夾，然後直接開啟。
• 對檔案或資料夾進行變更，然後直接儲存變更。
• 建立新的檔案和資料夾。

在 File System Access API 之前，網頁應用程式無法執行這項作業。開啟檔案需要上傳檔案，並且儲存使用者需要下載的變更內容，而網路完全沒有權限在使用者檔案系統中建立新檔案和資料夾。

開啟檔案

如要開啟檔案，我們會使用 window.showOpenFilePicker() 方法。請注意，這個方法需要使用者手勢，例如點選按鈕。以下是開啟檔案的其他設定：

1. 從檔案系統存取的檔案選擇器 API 中擷取檔案控制代碼。這樣您就能查看檔案的基本資訊。
2. 使用控點的 getFile() 方法，您會取得一種特殊的 Blob，稱為 File，其中包含關於檔案的其他唯讀屬性 (例如名稱和上次修改日期)。由於這是 Blob，因此可以對其呼叫 Blob 方法 (例如 text())，以取得其內容。

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

正在儲存變更

如要儲存檔案變更，您還需要使用者手勢，然後：

1. 使用檔案控制代碼建立 FileSystemWritableFileStream。
2. 變更訊息串內容。這麼做並不會更新現有的檔案，而是通常建立暫存檔案。
3. 最後，完成變更後，請關閉串流，這樣變更就會從臨時轉為永久狀態。

如以下範例所示：

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

檔案處理

File System Access API 可讓您在應用程式中開啟檔案，但反之亦然？使用者想將偏好的應用程式設為預設開啟檔案。檔案處理 API 是一種實驗性 API，可讓您安裝 PWA：在使用者的裝置上註冊為檔案處理常式，並在網頁應用程式資訊清單中指定 MIME 類型和副檔名。您可以為支援的擴充功能指定自訂檔案圖示。

註冊完成後，已安裝的 PWA 將會顯示在使用者的檔案系統中，方便使用者直接開啟檔案。 以下是讓 PWA 讀取文字檔的資訊清單設定範例：

...
"file_handlers": [
     {
         "action": "/open-file",
         "accept": {
             "text/*": [".txt"]
         }
     }
]
...

網址處理

透過網址處理，PWA 可從作業系統擷取屬於其範圍內的連結，並在 PWA 視窗中轉譯，而非預設瀏覽器的分頁。舉例來說，如果您收到連結到 PWA 的訊息，或是在 PWA 中點選深層連結 (指向特定內容內容的網址)，內容就會在獨立視窗中開啟。

使用 WebAPK (例如使用者透過 Chrome 安裝 PWA) 時，Android 會自動執行這項行為。如果是安裝在 iOS 和 iPadOS 的 PWA，就無法透過 Safari 擷取安裝於 iOS 和 iPadOS 的網址。

針對電腦版瀏覽器，網路瀏覽器社群已建立新規格。這項規格目前處於實驗階段階段，會新增一個資訊清單檔案成員：url_handlers。這個屬性預期 PWA 要擷取的來源陣列。系統會自動授予 PWA 的來源，且每個來源都必須接受透過名為 web-app-origin-association 的檔案處理運作方式。 舉例來說，如果您的 PWA 資訊清單由 web.dev 代管，而您要新增 app.web.dev 來源，則如下所示：

"url_handlers": [
    {"origin": "https://app.web.dev"},
]

在這種情況下，瀏覽器會檢查 app.web.dev/.well-known/web-app-origin-association 中是否有檔案，並接受 PWA 範圍網址的網址處理作業。這個檔案必須由開發人員建立。在以下範例中，檔案內容如下：

{
    "web_apps": [
        {
            "manifest": "/mypwa/app.webmanifest",
            "details": {
                "paths": [ "/*" ]
            }
        }
    ]
}

網址通訊協定處理

網址處理適用於標準 https 通訊協定網址，但您也可以使用自訂 URI 配置，例如 pwa://。在多個作業系統中，已安裝的應用程式會註冊配置，因此取得這項權限。

針對 PWA，這項功能需透過 網址通訊協定處理常式 API 啟用 (僅適用於電腦裝置)。只能透過在應用程式商店發布 PWA，僅允許行動裝置自訂通訊協定。

如要註冊，您可以使用 registerProtocolHandler() 方法，或是在資訊清單中使用 protocol_handlers 成員，搭配所需的配置以及要在 PWA 情境中載入的網址，例如：

...
{
  "protocol_handlers": [
    {
      "protocol": "web+pwa",
      "url": "/from-protocol?value=%s"
    },
  ]
}
...

您可以將網址 from-protocol 轉送至正確的處理常式，並在 PWA 中取得查詢字串 value。%s 是觸發作業的逸出網址的預留位置，因此如果您在 <a href="web+pwa://testing"> 等位置提供連結，PWA 會開啟 /from-protocol?value=testing。

呼叫其他應用程式

您可以使用 URI 配置，連結至使用者裝置上的任何其他已安裝應用程式 (無論是否為 PWA)。您只需建立連結，或使用 navigator.href 指向所需的 URI 配置，然後傳送網址逸出格式的引數即可。

您可以使用廣為人知的標準配置，例如使用 tel: 撥打電話、使用 mailto: 傳送電子郵件，或使用 sms: 傳送簡訊；或者您也可以瞭解其他應用程式的網址配置，例如已知的訊息配置，例如已知的訊息、地圖、導航、線上會議、社群網路和應用程式商店。

網頁分享

有了 Web Share API，您的 PWA 就能透過共用管道將內容傳送至裝置上其他已安裝的應用程式。

這個 API 僅適用於採用 share 機制的作業系統，包括 Android、iOS、iPadOS、Windows 和 ChromeOS。您可以分享含有以下內容的物件：

• 文字 (title 和 text 屬性)
• 網址 (url 資源)
• 檔案 (files 屬性)。

如要檢查目前的裝置是否能分享簡易資料 (例如文字)，請檢查 navigator.share() 方法是否存在，以分享您檢查檔案是否存在 navigator.canShare() 方法。

您可以呼叫 navigator.share(objectToShare) 要求分享動作。該呼叫會傳回 Promise，且會解析為 undefined，或因例外狀況而拒絕。

網頁分享目標

只要採用 Web Share Target API，即可讓 PWA 成為裝置上其他應用程式的共用作業目標，無論應用程式是否為 PWA 皆可。您的 PWA 會接收其他應用程式分享的資料。

這項功能目前適用於搭載 WebAPK 和 ChromeOS 的 Android 裝置，且只有在使用者安裝 PWA 後才會運作。應用程式安裝完畢後，瀏覽器會在作業系統中註冊共用目標。

您在資訊清單中設定網路分享目標，該成員是在網頁共用目標草稿規格中定義的 share_target 成員。share_target 目前設定為具備以下屬性的物件：

action

將在 PWA 視窗中載入的網址，且應會收到共用資料。

method

系統將為動作採用 HTTP 動詞方法，例如 GET、POST 或 PUT。

enctype

(選用) 參數的編碼類型，預設為 application/x-www-form-urlencoded，但也可以針對 POST 等方法設為 multipart/form-data。

params

這個物件會將共用資料 (來自網路共用的 title、text、url 和 files) 對應至瀏覽器會使用所選編碼在網址 (在 method: 'GET' 上) 或要求主體中傳遞的引數。

舉例來說，您可以在資訊清單中新增要接收分享資料的 PWA (僅限標題和網址)：

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

在先前的範例中，如果系統中有任何應用程式分享含有標題的網址，而使用者從對話方塊中選擇 PWA，瀏覽器將建立新的導覽活動前往來源的 /receive-share/?shared_title=AAA&shared_url=BBB，其中 AAA 為共用標題，BBB 則是共用網址。您可以使用 JavaScript 透過 URL 建構函式剖析 window.location 字串中的資料，藉此讀取該字串中的資料。

瀏覽器會使用資訊清單中的 PWA 名稱和圖示，傳送作業系統的共用項目。您無法為此用途選擇其他組合。

如需更詳細的範例及如何接收檔案，請參閱透過 Web Share Target API 接收共用資料。

聯絡人選擇工具

透過 Contact Picker API，您可以要求裝置顯示包含所有使用者聯絡人的原生對話方塊，讓使用者選擇一或多個聯絡人。這樣一來，您的 PWA 就能從這些聯絡人接收所需資料。

Contact Picker API 主要已在行動裝置上使用，這些 API 操作可以透過相容平台上的 navigator.contacts 介面完成。

您可以使用 navigator.contacts.getProperties() 要求可用的屬性，以及要求一或多個聯絡人，並提供要包含的房源清單。

部分範例屬性為 name、email、address 和 tel。要求使用者選取一或多個聯絡人時，您可以呼叫 navigator.contacts.select(properties)，並傳遞要傳回的屬性陣列。

以下範例將列出挑選器收到的聯絡人。

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.
   }
}

資源

• File System Access API：簡化本機檔案的存取權
• 讓已安裝的網頁應用程式成為檔案處理常式
• 處理漸進式網頁應用程式中的檔案
• 將 OS 共用 UI 與 Web Share API 整合
• 與其他應用程式共用內容
• 使用 Web Share Target API 接收共用資料
• 網頁版聯絡人挑選器