網頁應用程式可觸及的對象十分廣泛。可在多個平台上執行。您可以輕鬆透過連結分享這些檔案。但傳統上,這類應用程式並未與作業系統整合。不久前,這些應用程式甚至無法安裝。所幸,現在情況已有所改變,我們可以利用這項整合功能,為 Progressive Web App 新增實用功能。讓我們來瞭解其中幾個選項。
使用檔案系統
使用檔案的典型使用者工作流程如下所示:
- 從裝置中選取檔案或資料夾,然後直接開啟。
- 對這些檔案或資料夾進行變更,然後直接儲存變更。
- 建立新的檔案和資料夾。
在 File System Access API 推出之前,網頁應用程式無法執行這項操作。開啟檔案時需要上傳檔案,儲存變更時使用者必須下載檔案,而且網頁無法在使用者的檔案系統中建立新的檔案和資料夾。
開啟檔案
我們使用 window.showOpenFilePicker()
方法開啟檔案。請注意,這個方法需要使用者手勢,例如按鈕點擊。以下是開啟檔案的其餘設定:
- 從檔案系統存取權的檔案選擇器 API 擷取檔案句柄。這會提供檔案的基本資訊。
- 使用句柄的
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();
正在儲存變更
如要儲存檔案的變更,您也需要使用者手勢;然後:
- 使用檔案句柄建立
FileSystemWritableFileStream
。 - 變更串流。這不會在原地更新檔案,而是通常會建立暫存檔案。
- 最後,在完成變更後,請關閉串流,將變更從暫時性變更為永久性變更。
我們來看看程式碼:
// 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
透過 Web Share API,您的 PWA 可透過共用管道,將內容傳送至裝置中已安裝的其他應用程式。
這個 API 僅適用於具備 share
機制的作業系統,包括 Android、iOS、iPadOS、Windows 和 ChromeOS。您可以分享包含下列項目的物件:
- 文字 (
title
和text
屬性) - 網址 (
url
屬性) - 檔案 (
files
屬性)。
如要檢查目前裝置是否可分享,請檢查 navigator.share()
方法是否存在,以便分享文字等簡單資料;如要分享檔案,請檢查 navigator.canShare()
方法是否存在。
您可以呼叫 navigator.share(objectToShare)
來要求分享動作。該呼叫會傳回承諾,該承諾會以 undefined
解析,或以例外狀況拒絕。
Web Share Target
Web Share Target API 可讓您的 PWA 成為裝置上其他應用程式 (不論是否為 PWA) 的分享作業目標。PWA 會接收其他應用程式共用的資料。
這項功能目前適用於搭載 WebAPK 的 Android 和 ChromeOS,且僅在使用者安裝 PWA 後才可使用。安裝應用程式後,瀏覽器會在作業系統中註冊分享目標。
您可以在資訊清單中設定網頁分享目標,方法是使用 網頁分享目標草稿規格中定義的 share_target
成員。share_target
會設為具有部分屬性的物件:
action
- 在預期會接收共用資料的 PWA 視窗中載入的網址。
method
- HTTP 動詞方法會用於動作,例如
GET
、POST
或PUT
。 enctype
- (選用) 參數的編碼類型,預設為
application/x-www-form-urlencoded
,但也可以將其設為multipart/form-data
,以便用於POST
等方法。 params
- 這個物件會將分享資料 (來自 Web Share 的鍵:
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 接收共用資料」
聯絡人選擇工具
您可以使用聯絡人挑選器 API,要求裝置顯示含有所有使用者聯絡人的原生對話方塊,讓使用者選擇一或多個聯絡人。接著,您的 PWA 就能從這些聯絡人接收所需資料。
聯絡人挑選器 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.
}
}