การผสานรวมระบบปฏิบัติการ

เว็บแอปมีการเข้าถึงจำนวนมาก ทำงานบนหลายแพลตฟอร์ม สามารถแชร์ได้ง่ายผ่านลิงก์ แต่เดิมที ระบบเหล่านี้เข้ากันไม่ได้กับระบบปฏิบัติการ เมื่อไม่นานมานี้ อุปกรณ์ไม่สามารถติดตั้งได้ด้วยซ้ำ โชคดีที่มีการเปลี่ยนแปลง และตอนนี้เราสามารถใช้ประโยชน์จากการผสานรวมดังกล่าวเพื่อเพิ่มฟีเจอร์ที่เป็นประโยชน์ลงใน PWA ของเรา มาลองดูตัวเลือกเหล่านั้นกัน

การทำงานกับระบบไฟล์

เวิร์กโฟลว์ทั่วไปของผู้ใช้ที่ใช้ไฟล์มีลักษณะดังนี้

• เลือกไฟล์หรือโฟลเดอร์จากอุปกรณ์และเปิดโดยตรง
• ทำการเปลี่ยนแปลงในไฟล์หรือโฟลเดอร์เหล่านั้น แล้วบันทึกการเปลี่ยนแปลงกลับไปโดยตรง
• สร้างไฟล์และโฟลเดอร์ใหม่

ก่อนที่จะใช้ File System Access API เว็บแอปจะทำแบบนี้ไม่ได้ การเปิดไฟล์จำเป็นต้องมีการอัปโหลดไฟล์ การบันทึกการเปลี่ยนแปลงกำหนดให้ผู้ใช้ต้องดาวน์โหลดไฟล์ และเว็บไม่มีสิทธิ์เข้าถึงใดๆ เพื่อสร้างไฟล์และโฟลเดอร์ใหม่ในระบบไฟล์ของผู้ใช้เลย

การเปิดไฟล์

เราใช้วิธี window.showOpenFilePicker() เพื่อเปิดไฟล์ โปรดทราบว่าวิธีนี้ต้องใช้ท่าทางสัมผัสของผู้ใช้ เช่น การคลิกปุ่ม การตั้งค่าส่วนที่เหลือสำหรับการเปิดไฟล์มีดังนี้

1. บันทึกแฮนเดิลไฟล์จาก API เครื่องมือเลือกไฟล์ของการเข้าถึงระบบไฟล์ ซึ่งจะให้ข้อมูลพื้นฐานเกี่ยวกับไฟล์
2. เมื่อใช้เมธอด 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();

กำลังบันทึกการเปลี่ยนแปลง

หากต้องการบันทึกการเปลี่ยนแปลงไปยังไฟล์ คุณต้องใช้ท่าทางสัมผัสของผู้ใช้ด้วย จากนั้นให้ทำดังนี้

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 ได้ ลงทะเบียนเป็นตัวแฮนเดิลไฟล์ในอุปกรณ์ของผู้ใช้ โดยระบุประเภท MIME และนามสกุลไฟล์ที่ PWA รองรับในไฟล์ Manifest ของเว็บแอป คุณสามารถระบุไอคอนไฟล์ที่กำหนดเองสำหรับส่วนขยายที่สนับสนุน

เมื่อลงทะเบียนแล้ว 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 หน้าตาจะมีลักษณะดังนี้

"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 ความสามารถนี้จะเปิดใช้โดยใช้ API ตัวแฮนเดิลโปรโตคอล URL ซึ่งใช้ได้เฉพาะในอุปกรณ์เดสก์ท็อป คุณอนุญาตให้ใช้โปรโตคอลที่กำหนดเองสำหรับอุปกรณ์เคลื่อนที่ได้โดยเผยแพร่ 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 ที่ใช้ Escape ซึ่งทริกเกอร์การดำเนินการ ดังนั้นหากคุณมีลิงก์อยู่ที่ตำแหน่งใดตำแหน่งหนึ่ง เช่น <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) การโทรดังกล่าวส่งคืนคำสัญญาที่แปลค่าด้วย 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 จาก Web Share) ไปยังอาร์กิวเมนต์ที่เบราว์เซอร์จะส่งผ่านใน 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 คุณจะสามารถขอให้อุปกรณ์แสดงกล่องโต้ตอบเนทีฟกับรายชื่อติดต่อทั้งหมดของผู้ใช้ เพื่อให้ผู้ใช้สามารถเลือกอย่างน้อยหนึ่งรายการ จากนั้น PWA จะรับข้อมูลที่คุณต้องการจากรายชื่อติดต่อเหล่านั้นได้

Contact Picker API มีให้บริการสำหรับอุปกรณ์เคลื่อนที่เป็นหลัก และทุกอย่างจะดำเนินการผ่านอินเทอร์เฟซ navigator.contacts บนแพลตฟอร์มที่เข้ากันได้

คุณขอพร็อพเพอร์ตี้ที่มีอยู่เพื่อค้นหาด้วย navigator.contacts.getProperties() ได้ และขอรายชื่อติดต่อรายการเดียวหรือหลายรายการพร้อมรายการพร็อพเพอร์ตี้ที่ต้องการ

ตัวอย่างพร็อพเพอร์ตี้บางรายการ ได้แก่ 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 การแชร์ระบบปฏิบัติการด้วย Web Share API
• แชร์เนื้อหากับแอปอื่นๆ
• การรับข้อมูลที่แชร์กับ Web Share Target API
• เครื่องมือเลือกรายชื่อติดต่อสำหรับเว็บ