เว็บแอปมีการเข้าถึงจำนวนมาก โดยสามารถทํางานได้บนแพลตฟอร์มหลายแพลตฟอร์ม ซึ่งแชร์ผ่านลิงก์ได้ง่ายๆ แต่เดิมแอปเหล่านี้ไม่ได้ผสานรวมกับระบบปฏิบัติการ เมื่อไม่นานมานี้แอปเหล่านี้ยังติดตั้งไม่ได้ แต่ตอนนี้สถานการณ์เปลี่ยนไปแล้ว เราใช้ประโยชน์จากการผสานรวมดังกล่าวเพื่อเพิ่มฟีเจอร์ที่มีประโยชน์ลงใน PWA ได้แล้ว มาดูตัวเลือกบางส่วนกัน
การทำงานกับระบบไฟล์
เวิร์กโฟลว์ทั่วไปของผู้ใช้ที่ใช้ไฟล์มีลักษณะดังนี้
- เลือกไฟล์หรือโฟลเดอร์จากอุปกรณ์แล้วเปิดโดยตรง
- ทำการเปลี่ยนแปลงในไฟล์หรือโฟลเดอร์เหล่านั้น แล้วบันทึกการเปลี่ยนแปลงกลับเข้าไปโดยตรง
- สร้างไฟล์และโฟลเดอร์ใหม่
ก่อนหน้านี้ เว็บแอปไม่สามารถดำเนินการนี้ได้ การเปิดไฟล์ต้องอัปโหลดไฟล์ การบันทึกการเปลี่ยนแปลงทำให้ผู้ใช้ต้องดาวน์โหลดไฟล์ และเว็บไม่มีสิทธิ์เข้าถึงเลยในการสร้างไฟล์และโฟลเดอร์ใหม่ในระบบไฟล์ของผู้ใช้
การเปิดไฟล์
เราใช้เมธอด window.showOpenFilePicker()
เพื่อเปิดไฟล์ โปรดทราบว่าวิธีการนี้ต้องใช้ท่าทางสัมผัสของผู้ใช้ เช่น การคลิกปุ่ม การตั้งค่าที่เหลือสำหรับการเปิดไฟล์มีดังนี้
- บันทึก file handle จาก File Picker API ของ File System Access ซึ่งจะให้ข้อมูลพื้นฐานเกี่ยวกับไฟล์
- เมื่อใช้เมธอด
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 ช่วยให้คุณเปิดไฟล์จากภายในแอปได้ แต่จะทำในทางกลับกันได้อย่างไร ผู้ใช้ต้องการตั้งค่าแอปโปรดเป็นแอปเริ่มต้นสำหรับเปิดไฟล์ File Handling API เป็น API เวอร์ชันทดลองที่ช่วยให้ PWA ที่ติดตั้งสามารถดำเนินการต่อไปนี้ได้ ลงทะเบียนเป็นตัวแฮนเดิลไฟล์ในอุปกรณ์ของผู้ใช้ โดยระบุประเภท MIME และนามสกุลไฟล์ที่ PWA รองรับในไฟล์ Manifest ของเว็บแอป คุณสามารถระบุไอคอนไฟล์ที่กำหนดเองสำหรับนามสกุลที่รองรับ
เมื่อลงทะเบียนแล้ว PWA ที่ติดตั้งไว้จะแสดงเป็นตัวเลือกจากระบบไฟล์ของผู้ใช้ ซึ่งช่วยให้ผู้ใช้เปิดไฟล์ใน PWA ได้โดยตรง ต่อไปนี้คือตัวอย่างการตั้งค่าไฟล์ Manifest สำหรับ PWA เพื่ออ่านไฟล์ข้อความ
...
"file_handlers": [
{
"action": "/open-file",
"accept": {
"text/*": [".txt"]
}
}
]
...
การจัดการ URL
การจัดการ URL จะช่วยให้ PWA สามารถจับลิงก์ที่เป็นส่วนหนึ่งของขอบเขตจากระบบปฏิบัติการและแสดงผลภายในหน้าต่าง PWA แทนแท็บของเบราว์เซอร์เริ่มต้น เช่น หากคุณได้รับข้อความที่ลิงก์ไปยัง PWA หรือคลิก Deep Link (URL ที่ชี้ไปยังเนื้อหาที่เฉพาะเจาะจง) ใน PWA เนื้อหาจะเปิดขึ้นในหน้าต่างแบบสแตนด์อโลน
ลักษณะการทำงานนี้จะพร้อมใช้งานโดยอัตโนมัติใน Android เมื่อใช้ WebAPK เช่น เมื่อผู้ใช้ติดตั้ง PWA ด้วย Chrome คุณจะบันทึก URL ใน PWA ที่ติดตั้งใน iOS และ iPadOS จาก Safari ไม่ได้
สําหรับเบราว์เซอร์เดสก์ท็อป ชุมชนเว็บเบราว์เซอร์ได้สร้างข้อกําหนดใหม่ ซึ่งปัจจุบันยังอยู่ในขั้นทดลอง โดยเพิ่มสมาชิกไฟล์ Manifest ใหม่: url_handlers
พร็อพเพอร์ตี้นี้ต้องการอาร์เรย์ของต้นทางที่ PWA ต้องการบันทึก ต้นทางของ PWA จะได้รับสิทธิ์โดยอัตโนมัติ และต้นทางอื่นๆ แต่ละแห่งต้องยอมรับการจัดการดังกล่าวผ่านไฟล์ชื่อ web-app-origin-association
เช่น หากไฟล์ Manifest ของ PWA โฮสต์อยู่ใน web.dev และคุณต้องการเพิ่มต้นทาง app.web.dev ไฟล์ Manifest ดังกล่าวจะมีลักษณะดังนี้
"url_handlers": [
{"origin": "https://app.web.dev"},
]
ในกรณีนี้ เบราว์เซอร์จะตรวจสอบว่ามีไฟล์ที่ app.web.dev/.well-known/web-app-origin-association
หรือไม่ โดยยอมรับการจัดการ URL จาก URL ขอบเขต PWA นักพัฒนาแอปต้องสร้างไฟล์นี้ ในตัวอย่างต่อไปนี้ ไฟล์จะมีลักษณะดังนี้
{
"web_apps": [
{
"manifest": "/mypwa/app.webmanifest",
"details": {
"paths": [ "/*" ]
}
}
]
}
การจัดการโปรโตคอล URL
การจัดการ URL ใช้ได้กับ URL โปรโตคอล https
มาตรฐาน แต่สามารถใช้รูปแบบ URI ที่กําหนดเองได้ เช่น pwa://
ในระบบปฏิบัติการหลายระบบ แอปที่ติดตั้งจะสามารถใช้ความสามารถนี้ได้โดยแอปต้องลงทะเบียนรูปแบบ
สำหรับ PWA ระบบจะเปิดใช้ความสามารถนี้โดยใช้ URL Protocol Handler API ซึ่งใช้ได้เฉพาะในอุปกรณ์เดสก์ท็อปเท่านั้น คุณจะอนุญาตโปรโตคอลที่กำหนดเองสำหรับอุปกรณ์เคลื่อนที่ได้โดยการเผยแพร่ PWA ของคุณใน App Store เท่านั้น
หากต้องการลงทะเบียน ให้ใช้เมธอด registerProtocolHandler() หรือใช้สมาชิก protocol_handlers
ในไฟล์ Manifest ที่มีรูปแบบที่ต้องการและ URL ที่ต้องการโหลดในบริบทของ PWA เช่น
...
{
"protocol_handlers": [
{
"protocol": "web+pwa",
"url": "/from-protocol?value=%s"
},
]
}
...
คุณสามารถกำหนดเส้นทาง URL from-protocol
ไปยังตัวแฮนเดิลที่ถูกต้องและรับสตริงการค้นหา value
ใน PWA ได้ %s
เป็นตัวยึดตําแหน่งสําหรับ URL ที่หลบค่าอักขระพิเศษซึ่งทริกเกอร์การดำเนินการ ดังนั้นหากคุณมีลิงก์ที่ใดที่หนึ่ง เช่น <a href="web+pwa://testing">
PWA จะเปิด /from-protocol?value=testing
การเรียกใช้แอปอื่นๆ
คุณสามารถใช้รูปแบบ URI เพื่อเชื่อมต่อกับแอปอื่นๆ ที่ติดตั้งไว้ (ไม่ว่าจะเป็น PWA หรือไม่ก็ตาม) ในอุปกรณ์ของผู้ใช้ในทุกแพลตฟอร์ม คุณเพียงสร้างลิงก์หรือใช้ navigator.href
แล้วชี้ไปยังรูปแบบ URI ที่ต้องการ โดยส่งอาร์กิวเมนต์ในรูปแบบ URL ที่แปลงแล้ว
คุณสามารถใช้รูปแบบมาตรฐานที่รู้จักกันดี เช่น tel:
สําหรับการโทร mailto:
สําหรับการส่งอีเมล หรือ sms:
สําหรับการรับส่งข้อความ หรือจะดูข้อมูลเกี่ยวกับรูปแบบ URL ของแอปอื่นๆ ก็ได้ เช่น จากการรับส่งข้อความ แผนที่ การนำทาง การประชุมออนไลน์ โซเชียลเน็ตเวิร์ก และ App Store ที่รู้จักกันดี
การแชร์ในเว็บ
Web Share API จะช่วยให้ PWA ส่งเนื้อหาไปยังแอปอื่นๆ ที่ติดตั้งในอุปกรณ์ผ่านแชแนลที่แชร์ได้
API ใช้ได้เฉพาะในระบบปฏิบัติการที่มีกลไก share
ซึ่งรวมถึง Android, iOS, iPadOS, Windows และ ChromeOS
คุณแชร์ออบเจ็กต์ที่มีสิ่งต่อไปนี้ได้
- ข้อความ (พร็อพเพอร์ตี้
title
และtext
) - URL (พร็อพเพอร์ตี้
url
) - ไฟล์ (ที่พัก
files
)
หากต้องการตรวจสอบว่าอุปกรณ์ปัจจุบันแชร์ข้อมูลแบบง่าย เช่น ข้อความ ได้หรือไม่ ให้ตรวจสอบว่ามีวิธีการ navigator.share()
อยู่หรือไม่ หากต้องการตรวจสอบว่าแชร์ไฟล์ได้หรือไม่ ให้ตรวจสอบว่ามีวิธีการ navigator.canShare()
อยู่หรือไม่
คุณขอการดำเนินการแชร์โดยโทรหา navigator.share(objectToShare)
การเรียกดังกล่าวจะแสดงผล Promise ที่แสดงผลเป็น undefined
หรือปฏิเสธด้วยข้อยกเว้น
เป้าหมายการแชร์ในเว็บ
Web Share Target API ช่วยให้ PWA ของคุณเป็นเป้าหมายของการดำเนินการแชร์จากแอปอื่นในอุปกรณ์นั้น ไม่ว่าจะเป็นแอป PWA หรือไม่ก็ตาม PWA ของคุณจะได้รับข้อมูลที่แอปอื่นแชร์
ปัจจุบันฟีเจอร์นี้พร้อมใช้งานใน Android ที่มี WebAPK และ ChromeOS และจะใช้งานได้หลังจากที่ผู้ใช้ติดตั้ง PWA ของคุณแล้วเท่านั้น เบราว์เซอร์จะลงทะเบียนเป้าหมายการแชร์ภายในระบบปฏิบัติการเมื่อติดตั้งแอป
คุณตั้งค่าเป้าหมายการแชร์เว็บในไฟล์ Manifest ด้วยสมาชิก share_target
ที่กําหนดไว้ในข้อกําหนดฉบับร่างของเป้าหมายการแชร์เว็บ share_target
ได้รับการกําหนดให้เป็นออบเจ็กต์ที่มีพร็อพเพอร์ตี้บางอย่าง ดังนี้
action
- URL ที่โหลดในหน้าต่าง PWA ซึ่งคาดว่าจะได้รับข้อมูลที่แชร์
method
- ระบบจะใช้เมธอดคำกริยา HTTP สำหรับการดำเนินการ เช่น
GET
,POST
หรือPUT
enctype
- (ไม่บังคับ) ประเภทการเข้ารหัสสําหรับพารามิเตอร์ โดยค่าเริ่มต้นคือ
application/x-www-form-urlencoded
แต่สามารถตั้งค่าเป็นmultipart/form-data
สําหรับเมธอด เช่นPOST
params
- ออบเจ็กต์ที่จะแมปข้อมูลการแชร์ (จากคีย์
title
,text
,url
และfiles
จากการแชร์ทางเว็บ) กับอาร์กิวเมนต์ที่เบราว์เซอร์จะส่งใน URL (ในmethod: 'GET'
) หรือในเนื้อหาของคำขอโดยใช้การเข้ารหัสที่เลือก
ตัวอย่างเช่น คุณสามารถกำหนดให้ PWA ต้องการรับข้อมูลที่แชร์ (ชื่อและ URL เท่านั้น) ได้โดยเพิ่มลงในไฟล์ Manifest ดังนี้
...
"share_target": {
"action": "/receive-share/",
"method": "GET",
"params": {
"title": "shared_title",
"url": "shared_url"
}
}
...
จากตัวอย่างก่อนหน้านี้ หากแอปใดแอปหนึ่งในระบบแชร์ URL ที่มีชื่อ และผู้ใช้เลือก PWA ของคุณจากกล่องโต้ตอบ เบราว์เซอร์จะสร้างการนําทางใหม่ไปยัง /receive-share/?shared_title=AAA&shared_url=BBB
ของต้นทาง โดยที่ AAA คือชื่อที่แชร์ และ BBB คือ URL ที่แชร์ คุณสามารถใช้ JavaScript เพื่ออ่านข้อมูลจากสตริง window.location
ได้โดยแยกวิเคราะห์ด้วยคอนสตรัคเตอร์ URL
เบราว์เซอร์จะใช้ชื่อและไอคอน PWA จากไฟล์ Manifest เพื่อส่งไปยังรายการการแชร์ของระบบปฏิบัติการ คุณไม่สามารถเลือกชุดอื่นสําหรับวัตถุประสงค์ดังกล่าวได้
ดูตัวอย่างโดยละเอียดเพิ่มเติมและวิธีรับไฟล์ได้ที่การรับข้อมูลที่แชร์ด้วย Web Share Target API
เลือกรายชื่อที่ติดต่อ
Contact Picker API ช่วยให้คุณขอให้อุปกรณ์แสดงผลกล่องโต้ตอบแบบเนทีฟที่มีรายชื่อติดต่อทั้งหมดของผู้ใช้เพื่อให้ผู้ใช้เลือกอย่างน้อย 1 รายการได้ จากนั้น PWA ของคุณจะรับข้อมูลที่คุณต้องการจากผู้ติดต่อเหล่านั้นได้
Contact Picker API พร้อมใช้งานบนอุปกรณ์เคลื่อนที่เป็นหลัก และการดำเนินการทั้งหมดจะทําผ่านอินเทอร์เฟซ navigator.contacts
ในแพลตฟอร์มที่เข้ากันได้
คุณสามารถขอพร็อพเพอร์ตี้ที่ใช้ค้นหาได้โดยใช้ navigator.contacts.getProperties()
และขอเลือกผู้ติดต่อได้ 1 หรือหลายรายพร้อมรายการพร็อพเพอร์ตี้ที่ต้องการ
ตัวอย่างพร็อพเพอร์ตี้บางส่วน ได้แก่ name
, email
, address
และ tel
เมื่อขอให้ผู้ใช้เลือกรายชื่อติดต่ออย่างน้อย 1 รายการ คุณสามารถเรียกใช้ 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: ลดความซับซ้อนในการเข้าถึงไฟล์ในเครื่อง
- อนุญาตให้เว็บแอปพลิเคชันที่ติดตั้งเป็นตัวแฮนเดิลไฟล์
- จัดการไฟล์ใน Progressive Web App
- ผสานรวมกับ UI การแชร์ของ OS ด้วย Web Share API
- แชร์เนื้อหากับแอปอื่นๆ
- การรับข้อมูลที่แชร์ด้วย Web Share Target API
- เครื่องมือเลือกรายชื่อติดต่อสำหรับเว็บ