網頁應用程式的觸及範圍相當廣泛,而且會在多個平台上運作。使用連結就能輕鬆分享。但傳統上並沒有與作業系統整合。不久前,他們甚至無法安裝。幸好這個改變已改變,我們現在可以利用這項整合功能,為 PWA 新增實用功能。一起來看看其中幾個選項。
使用檔案系統
以下是使用檔案的一般使用者工作流程:
- 選擇裝置上的檔案或資料夾,然後直接開啟。
- 對檔案或資料夾進行變更,然後直接儲存變更。
- 建立新的檔案和資料夾。
在 File System Access API 之前,網頁應用程式無法執行這項作業。開啟檔案需要上傳檔案,並且儲存使用者需要下載的變更內容,而網路完全沒有權限在使用者檔案系統中建立新檔案和資料夾。
開啟檔案
如要開啟檔案,我們會使用 window.showOpenFilePicker()
方法。請注意,這個方法需要使用者手勢,例如點選按鈕。以下是開啟檔案的其他設定:
- 從檔案系統存取的檔案選擇器 API 中擷取檔案控制代碼。這樣您就能查看檔案的基本資訊。
- 使用控點的
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();
正在儲存變更
如要儲存檔案變更,您還需要使用者手勢,然後:
- 使用檔案控制代碼建立
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:在使用者的裝置上註冊為檔案處理常式,並在網頁應用程式資訊清單中指定 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.
}
}