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

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

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

ขั้นตอนการทำงานของผู้ใช้ทั่วไปที่ใช้ไฟล์จะมีลักษณะดังนี้

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

ก่อนที่จะใช้ 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();

ข้อควรระวัง: Safari จะใช้ File System Access API ไม่ใช่ระบบสาธารณะ แต่เป็นแซนด์บ็อกซ์ origin-private คุณจะอ่านและเขียนไฟล์ในระบบไฟล์เสมือนดังกล่าวได้โดยใช้ API นี้เท่านั้น

File Handling

File System Access API อนุญาตให้คุณเปิดไฟล์จากภายในแอป แต่ในทางกลับกัน ผู้ใช้ต้องการตั้งค่าแอปโปรดเป็นแอปเริ่มต้นในการเปิดไฟล์ File handling API เป็น API แบบทดลองซึ่งอนุญาต PWA ที่ติดตั้งไว้ ลงทะเบียนเป็นตัวแฮนเดิลไฟล์ในอุปกรณ์ของผู้ใช้ โดยระบุประเภท MIME และนามสกุลไฟล์ที่ PWA รองรับในไฟล์ Manifest ของเว็บแอป คุณสามารถระบุไอคอนไฟล์ที่กำหนดเองสำหรับส่วนขยายที่สนับสนุนของคุณได้

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

...
"file_handlers": [
     {
         "action": "/open-file",
         "accept": {
             "text/*": [".txt"]
         }
     }
]
...

การจัดการ URL

เมื่อใช้การจัดการ URL แล้ว PWA จะบันทึกลิงก์ที่เป็นส่วนหนึ่งของขอบเขตจากระบบปฏิบัติการและแสดงผลภายในหน้าต่าง PWA แทนแท็บของเบราว์เซอร์เริ่มต้นได้ ตัวอย่างเช่น หากคุณได้รับข้อความที่ลิงก์ไปยัง PWA หรือคลิกลิงก์ในรายละเอียด (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": [ "/*" ]
            }
        }
    ]
}

ใน Android ที่มี WebAPK ระบบจะลงทะเบียน PWA เป็นตัวแฮนเดิลโดยอัตโนมัติสำหรับขอบเขตของไฟล์ Manifest ที่มีตัวกรอง Intent ของ Android และจะเพิ่มต้นทางหรือขอบเขตเพิ่มเติมไม่ได้ สำหรับ iOS และ iPadOS คุณจะจัดการได้เฉพาะ URL ที่มี PWA ที่เผยแพร่ใน App Store เท่านั้น เช่น URL ที่สร้างด้วย PWABuilder

การจัดการโปรโตคอล URL

การจัดการ URL ใช้งานได้กับ URL โปรโตคอล https มาตรฐาน แต่คุณใช้รูปแบบ URI ที่กำหนดเองได้ เช่น pwa:// ในระบบปฏิบัติการหลายระบบ แอปที่ติดตั้งจะได้รับความสามารถนี้จากการลงทะเบียนรูปแบบของแอป

สำหรับ PWA ความสามารถนี้จะเปิดใช้โดยใช้ API เครื่องจัดการโปรโตคอล URL ซึ่งใช้ได้เฉพาะในอุปกรณ์เดสก์ท็อป คุณจะอนุญาตโปรโตคอลที่กำหนดเองสำหรับอุปกรณ์เคลื่อนที่ได้โดยจัดจำหน่าย PWA ใน App Store เท่านั้น

ข้อควรระวัง: สำหรับ PWA ที่ใช้ API เครื่องจัดการโปรโตคอล URL ชื่อโปรโตคอลต้องเป็นรูปแบบที่อยู่ในรายการที่อนุญาตหรือต้องใช้คำนำหน้า web+ ในตัวอย่างของเรา ลิงก์ควรชี้ไปยัง web+pwa:// เพื่อเปิด PWA

ในการลงทะเบียน คุณสามารถใช้เมธอด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 ที่ต้องการโดยการส่งอาร์กิวเมนต์ในรูปแบบที่ Escape URL

คุณสามารถใช้รูปแบบมาตรฐานที่รู้จักกันดี เช่น tel: สำหรับการโทร, mailto: สำหรับการส่งอีเมล หรือ sms: สำหรับการรับส่งข้อความ หรือดูข้อมูลเกี่ยวกับแอปอื่นๆ สคีม URL ตัวอย่างเช่น จากการรับส่งข้อความ แผนที่ การนำทาง การประชุมออนไลน์ โซเชียลเน็ตเวิร์ก และ App Store ซึ่งเป็นที่รู้จักกันดี

หมายเหตุ: คุณสามารถใช้ Web Share API ทั่วไปได้ แทนการใช้รูปแบบ URI ส่วนตัวในการสื่อสารกับแอปรับส่งข้อความและแอปโซเชียลมีเดีย

การแชร์เว็บ

การรองรับเบราว์เซอร์

• 89 คน
• 93
• 
• 12.1

แหล่งที่มา

เมื่อใช้ Web Share API PWA จะส่งเนื้อหาไปยังแอปอื่นๆ ที่ติดตั้งไว้ในอุปกรณ์ผ่านช่องทางที่แชร์ได้

API นี้ใช้ได้เฉพาะกับระบบปฏิบัติการที่มีกลไก share ซึ่งรวมถึง Android, iOS, iPadOS, Windows และ ChromeOS คุณสามารถแชร์ออบเจ็กต์ที่มีสิ่งต่อไปนี้

• ข้อความ (พร็อพเพอร์ตี้ title และ text)
• URL (พร็อพเพอร์ตี้ url รายการ)
• Files (พร็อพเพอร์ตี้ 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 จากการแชร์เว็บ) กับอาร์กิวเมนต์ที่เบราว์เซอร์จะส่งไปใน URL (ใน method: 'GET') หรือในเนื้อหาของคำขอโดยใช้การเข้ารหัสที่เลือก

หมายเหตุ: คุณสามารถแยกวิเคราะห์คำขอ POST จากฝั่งเซิร์ฟเวอร์หรือภายใน Service Worker หากต้องการหลีกเลี่ยงการเดินทางไปยังเครือข่าย ดูรายละเอียดเพิ่มเติมในตัวอย่างนี้

เช่น คุณกำหนดให้กับ 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() และขอตัวเลือกรายชื่อติดต่อรายการเดียวหรือหลายรายการพร้อมรายการพร็อพเพอร์ตี้ที่ต้องการได้

พร็อพเพอร์ตี้ตัวอย่าง ได้แก่ name, email, address และ tel เมื่อขอให้ผู้ใช้เลือกรายชื่อติดต่ออย่างน้อย 1 รายการ คุณจะโทรหา navigator.contacts.select(properties) ได้ ซึ่งจะส่งผ่านอาร์เรย์ของที่พักที่คุณต้องการได้รับ

ข้อควรระวัง: API ไม่รับประกันว่าออบเจ็กต์ที่ส่งคืนจะมีคุณสมบัติที่ขอทั้งหมด ดังนั้นคุณควรตรวจสอบการมีอยู่ของออบเจ็กต์อีกครั้ง

ตัวอย่างต่อไปนี้จะแสดงรายชื่อติดต่อที่เครื่องมือเลือกได้รับ

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
• เครื่องมือเลือกรายชื่อติดต่อสำหรับเว็บ