OS 整合

網頁應用程式可觸及的對象十分廣泛。可在多個平台上執行。您可以輕鬆透過連結分享這些檔案。但傳統上,這類應用程式並未與作業系統整合。不久前,這些應用程式甚至無法安裝。所幸,現在情況已有所改變,我們可以利用這項整合功能,為 Progressive Web App 新增實用功能。讓我們來瞭解其中幾個選項。

使用檔案系統

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

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

File System Access API 推出之前,網頁應用程式無法執行這項操作。開啟檔案時需要上傳檔案,儲存變更時使用者必須下載檔案,而且網頁無法在使用者的檔案系統中建立新的檔案和資料夾。

開啟檔案

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

  1. 從檔案系統存取權的檔案選擇器 API 擷取檔案句柄。這會提供檔案的基本資訊。
  2. 使用句柄的 getFile() 方法,您將獲得特殊類型的 Blob,稱為 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 中點選深層連結 (指向特定內容的網址),系統就會在獨立視窗中開啟內容。

使用 WebAPK 時,Android 會自動提供這項行為,例如使用者透過 Chrome 安裝 PWA 時。無法透過 Safari 擷取已在 iOS 和 iPadOS 上安裝的 PWA 網址。

針對電腦版瀏覽器,網路瀏覽器社群建立了新的規格。此規格目前為實驗性規格,新增了新的資訊清單檔案成員: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)。您只需建立連結或使用 navigator.href,並指向所需的 URI 配置,以網址轉義表單傳遞引數即可。

您可以使用眾所周知的標準配置,例如 tel: 可用於電話、mailto: 可用於傳送電子郵件,或是 sms: 可用於傳送簡訊;您也可以瞭解其他應用程式的網址配置,例如眾所周知的訊息、地圖、導航、線上會議、社群網路和應用程式商店。

Web Share

Browser Support

  • Chrome: 89.
  • Edge: 93.
  • Firefox: behind a flag.
  • Safari: 12.1.

Source

透過 Web Share API,您的 PWA 可透過共用管道,將內容傳送至裝置中已安裝的其他應用程式。

這個 API 僅適用於具備 share 機制的作業系統,包括 Android、iOS、iPadOS、Windows 和 ChromeOS。您可以分享包含下列項目的物件:

  • 文字 (titletext 屬性)
  • 網址 (url 屬性)
  • 檔案 (files 屬性)。

如要檢查目前裝置是否可分享,請檢查 navigator.share() 方法是否存在,以便分享文字等簡單資料;如要分享檔案,請檢查 navigator.canShare() 方法是否存在。

您可以呼叫 navigator.share(objectToShare) 來要求分享動作。該呼叫會傳回承諾,該承諾會以 undefined 解析,或以例外狀況拒絕。

在 Android 上的 Chrome 和 iOS 上的 Safari 中,透過 Web Share 開啟分享工作表。

Web Share Target

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

這項功能目前適用於搭載 WebAPK 的 Android 和 ChromeOS,且僅在使用者安裝 PWA 後才可使用。安裝應用程式後,瀏覽器會在作業系統中註冊分享目標。

您可以在資訊清單中設定網頁分享目標,方法是使用 網頁分享目標草稿規格中定義的 share_target 成員。share_target 會設為具有部分屬性的物件:

action
在預期會接收共用資料的 PWA 視窗中載入的網址。
method
HTTP 動詞方法會用於動作,例如 GETPOSTPUT
enctype
(選用) 參數的編碼類型,預設為 application/x-www-form-urlencoded,但也可以將其設為 multipart/form-data,以便用於 POST 等方法。
params
這個物件會將分享資料 (來自 Web Share 的鍵:titletexturlfiles) 對應至瀏覽器會在網址 (在 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 接收共用資料

聯絡人選擇工具

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: not supported.
  • Safari: not supported.

Source

您可以使用聯絡人挑選器 API,要求裝置顯示含有所有使用者聯絡人的原生對話方塊,讓使用者選擇一或多個聯絡人。接著,您的 PWA 就能從這些聯絡人接收所需資料。

聯絡人挑選器 API 主要適用於行動裝置,且所有操作均透過相容平台上的 navigator.contacts 介面完成。

您可以使用 navigator.contacts.getProperties() 要求可查詢的屬性,並要求單一或多個聯絡人選取,並提供所需屬性的清單。

部分範例屬性包括 nameemailaddresstel。當您要求使用者選取一或多個聯絡人時,可以呼叫 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.
   }
}

資源