OS 整合

網頁應用程式的觸及範圍廣大。這類廣告在多個平台上運作。您可以輕鬆透過連結與他人分享。但傳統上，他們並沒有與作業系統整合。不久前，這些擴充功能甚至無法安裝。幸好我們已經改變了，現在我們可以利用這些整合功能，為我們的 PWA 增添實用功能。一起來看看這些選項。

使用檔案系統

使用檔案的典型使用者工作流程如下所示：

  • 從裝置中選取檔案或資料夾，然後直接開啟。
  • 然後對這些檔案或資料夾進行變更，然後直接儲存變更內容。
  • 建立新的檔案和資料夾。

在 File System Access API 之前，網頁應用程式無法這麼做。這種開啟方式需要上傳檔案、儲存變更，但使用者必須下載檔案。此外，網路完全無法存取，在使用者檔案系統中建立新檔案和資料夾。

開啟檔案

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

  1. 從檔案系統存取權的檔案選擇器 API 擷取檔案控制代碼。這樣您就能取得檔案的基本資訊。
  2. 使用處理常式的 getFile() 方法時，您會收到一個稱為 File 的特殊 Blob，其中包含有關檔案的其他唯讀屬性 (例如名稱和上次修改日期)。由於這是 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： 在使用者裝置上註冊為檔案處理常式，並在網頁應用程式資訊清單中指定 PWA 支援的 MIME 類型和副檔名。您可以為支援的擴充功能指定自訂檔案圖示。

註冊完成後，已安裝的 PWA 將顯示為使用者的檔案系統選項，讓他們直接開啟該檔案。 以下是 PWA 讀取文字檔案的資訊清單設定範例：

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

網址處理

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

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

對於電腦版瀏覽器，網路瀏覽器社群建立了新的規格。這個規格目前仍在實驗階段；這個 SDK 會新增一個資訊清單檔案成員：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，系統會使用 URL 通訊協定處理常式 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 或不支援 PWA)平台上的裝置您只需建立連結，或使用 navigator.href 指向所需的 URI 配置，即可以逸出的網址傳遞引數。

您可以使用眾所周知的標準架構，例如用 tel: 撥打電話、使用 mailto: 傳送電子郵件，或使用 sms: 傳送簡訊。你也可以查看其他應用程式網址配置，例如眾所周知的訊息、地圖、導航、線上會議、社交網路和應用程式商店。

網路分享

瀏覽器支援

  • Chrome：89.
  • Edge：93，
  • Firefox：位於旗幟後方。
  • Safari：12.1.

資料來源

只要使用 Web Share API，您的 PWA 就能透過分享管道，將內容傳送到裝置上其他已安裝的應用程式。

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

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

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

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

Chrome Android 版和 iOS 版 Chrome 透過網路分享功能開啟分享工作表。

網路分享目標

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

這項功能目前適用於 Android 裝置，並設有 WebAPK 和 ChromeOS，而且必須先使用者安裝 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 接收共用資料。

聯絡人選擇工具

瀏覽器支援

  • Chrome：不支援。
  • Edge：不支援。
  • Firefox：不支援。
  • Safari：不支援。

資料來源

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

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

資源