ดูสาเหตุที่โปรเจ็กต์ Excalidraw ตัดสินใจเลิกใช้งาน Wrapper ของ Electron เพื่อหันมาใช้เวอร์ชันเว็บ
ในโปรเจ็กต์ Excalidraw เราได้ตัดสินใจที่จะเลิกใช้งาน Excalidraw Desktop ซึ่งเป็น Wrapper ของ Electron สำหรับ Excalidraw เพื่อประโยชน์เวอร์ชันเว็บที่คุณจะทำได้และมักจะหาได้ที่ excalidraw.com หลังจากวิเคราะห์อย่างละเอียดแล้ว เราได้ตัดสินใจว่า Progressive Web App (PWA) คืออนาคตที่เราต้องการสร้าง อ่านต่อเพื่อดูสาเหตุ
ประวัติความเป็นมาของ Excalidraw Desktop
หลังจากที่ @vjeux สร้าง Excalidraw เวอร์ชันเริ่มต้นในเดือนมกราคม 2020 และเขียนบล็อกเกี่ยวกับเรื่องนี้ เขาได้เสนอสิ่งต่อไปนี้ในฉบับที่ 561
คุณควรรวม Excalidraw ไว้ใน Electron (หรือเทียบเท่า) และเผยแพร่เป็นแอปพลิเคชัน [เฉพาะแพลตฟอร์ม] ไปยัง App Store ต่างๆ
@voluntadpear แนะนำทันทีว่า
เปลี่ยนเป็น PWA แทนดีไหม ปัจจุบัน Android รองรับการเพิ่มกิจกรรมไปยัง Play Store เป็น กิจกรรมบนเว็บที่เชื่อถือได้และหวังว่า iOS จะทำแบบเดียวกันในเร็วๆ นี้ ในเดสก์ท็อป Chrome ให้คุณดาวน์โหลดทางลัดบนเดสก์ท็อปไปยัง PWA ได้
การตัดสินใจที่ @vjeux เลือกทำในท้ายที่สุดนั้นง่ายมาก
เราควรทำทั้ง 2 อย่างเลย :)
ขณะที่การแปลง Excalidraw เวอร์ชันต่างๆ เป็น PWA เริ่มต้นขึ้นโดย @voluntadpear และคนอื่นๆ ต่อมา @lipis ได้ดำเนินการต่อและสร้างรีโปแยกต่างหากสำหรับ Excalidraw เดสก์ท็อป
จนถึงวันนี้ เป้าหมายแรกที่ตั้งไว้โดย @vjeux ซึ่งก็คือการส่ง Excaliburaw ไปยัง App Store ต่างๆ ยังไม่บรรลุ พูดตามตรง ยังไม่มีผู้ใดเริ่มกระบวนการส่งไปยังร้านค้าใดๆ เลย แต่ทำไมจึงเป็นเช่นนั้น ก่อนที่จะตอบ เรามาดู แพลตฟอร์มอิเล็กตรอนกัน
อิเล็กตรอนคืออะไร
จุดขายที่เป็นเอกลักษณ์ของ Electron คือช่วยให้คุณ "สร้างแอปเดสก์ท็อปข้ามแพลตฟอร์มด้วย JavaScript, HTML และ CSS" ได้ แอปที่สร้างด้วย Electron จะ"เข้ากันได้กับ Mac, Windows และ Linux" กล่าวคือ "แอป Electron จะสร้างและทำงานบนแพลตฟอร์ม 3 แพลตฟอร์ม" หน้าแรกระบุว่าสิ่งที่ Electron ทำได้ง่ายขึ้นคือการอัปเดตอัตโนมัติ เมนูและการแจ้งเตือนระดับระบบ การรายงานข้อขัดข้อง การแก้ไขข้อบกพร่องและการสร้างโปรไฟล์ และ โปรแกรมติดตั้งของ Windows แต่ปรากฏว่าฟีเจอร์บางอย่างที่สัญญาไว้ต้องดูรายละเอียดในข้อกำหนดฉบับย่อ
เช่น การอัปเดตอัตโนมัติ "[ปัจจุบัน] [รองรับ] เท่านั้นใน macOS และ Windows ระบบไม่มีตัวอัปเดตอัตโนมัติในตัวใน Linux เราจึงขอแนะนำให้ใช้เครื่องมือจัดการแพ็กเกจของรุ่นเพื่ออัปเดตแอป"
นักพัฒนาแอปสามารถสร้างเมนูระดับระบบได้โดยเรียกใช้
Menu.setApplicationMenu(menu)ใน Windows และ Linux ระบบจะตั้งค่าเมนูเป็นเมนูด้านบนของแต่ละหน้าต่าง ส่วนใน macOS จะมีเมนูมาตรฐานที่ระบบกำหนดไว้มากมาย เช่น เมนูบริการ ในการทำให้เมนูเป็นเมนูมาตรฐาน นักพัฒนาซอฟต์แวร์ควรตั้งค่าroleของเมนูให้สอดคล้องกันและ Electron จะจดจำและเปลี่ยนเป็นเมนูมาตรฐาน ซึ่งหมายความว่าโค้ดที่เกี่ยวข้องกับเมนูจำนวนมากจะใช้การตรวจสอบแพลตฟอร์มต่อไปนี้const isMac = process.platform === 'darwin'คุณสร้างโปรแกรมติดตั้ง Windows ได้ด้วย windows-installer README ของโปรเจ็กต์จะไฮไลต์ว่า "สำหรับแอปเวอร์ชันที่ใช้งานจริง คุณต้องรับรองแอปพลิเคชันของคุณ ตัวกรอง SmartScreen ของ Internet Explorer จะบล็อกไม่ให้ดาวน์โหลดแอป และผู้ให้บริการโปรแกรมป้องกันไวรัสหลายรายจะพิจารณาว่าแอปของคุณเป็นมัลแวร์เว้นแต่คุณจะได้รับใบรับรองที่ถูกต้อง" [sic]
เมื่อดูเพียง 3 ตัวอย่างนี้ จะเห็นได้ชัดว่าอิเล็กตรอนไม่ใช่ "เขียนครั้งเดียว วิ่งไปทุกที่" การเผยแพร่แอปใน App Store ต้องใช้การรับรองโค้ด ซึ่งเป็นเทคโนโลยีด้านความปลอดภัยสำหรับการรับรองการเป็นเจ้าของแอป การสร้างแพ็กเกจแอปต้องใช้เครื่องมืออย่าง electron-forge และพิจารณาว่าจะโฮสต์แพ็กเกจสำหรับการอัปเดตแอปไว้ที่ใด การดำเนินการนี้มีความซับซ้อนค่อนข้างเร็ว โดยเฉพาะเมื่อวัตถุประสงค์คือการรองรับข้ามแพลตฟอร์มอย่างแท้จริง ผมอยากจะทราบว่า เราเป็นไปได้ที่จะสร้างแอปอิเล็กตรอนที่น่าทึ่งได้โดยใช้ความพยายามและความทุ่มเทที่มากพอ สำหรับ Excalidraw Desktop เราไม่ได้เข้าร่วม
ทำงานต่อจากที่ Excalidraw Desktop ค้างไว้
จนถึงตอนนี้ Excalidraw Desktop นั้นเป็นเว็บแอป Excalidraw ที่รวมอยู่ในไฟล์ .asar พร้อมหน้าต่างเกี่ยวกับ Excalidraw รูปลักษณ์ของแอปพลิเคชันเกือบจะเหมือนกับเวอร์ชันเว็บ
ใน macOS ตอนนี้จะมีเมนูระดับระบบที่ด้านบนของแอปพลิเคชัน แต่เนื่องจากการดำเนินการของเมนูทั้งหมด นอกเหนือจากปิดหน้าต่างและเกี่ยวกับ Excalidraw จึงมีการเชื่อมต่อกับสิ่งต่างๆ ทำให้เมนูในสถานะปัจจุบันค่อนข้างไร้ประโยชน์ ในระหว่างนี้ คุณสามารถดำเนินการทั้งหมดผ่านแถบเครื่องมือ Excalidraw ปกติและเมนูตามบริบทได้
เราใช้ electron-builder ซึ่งรองรับการเชื่อมโยงประเภทไฟล์
เมื่อดับเบิลคลิกไฟล์ .excalidraw แอป Excalidraw บนเดสก์ท็อปควรเปิดขึ้น ข้อความที่เกี่ยวข้องซึ่งตัดมาจากไฟล์ electron-builder.json มีลักษณะดังนี้
{
"fileAssociations": [
{
"ext": "excalidraw",
"name": "Excalidraw",
"description": "Excalidraw file",
"role": "Editor",
"mimeType": "application/json"
}
]
}
แต่ในทางปฏิบัติ การดำเนินการนี้อาจไม่เป็นไปตามที่ต้องการเสมอไป เนื่องจากแอปใน Windows 10 ไม่มีสิทธิ์เชื่อมโยงประเภทไฟล์กับตนเอง ทั้งนี้ขึ้นอยู่กับประเภทการติดตั้ง (สำหรับผู้ใช้ปัจจุบันหรือผู้ใช้ทั้งหมด)
ข้อบกพร่องเหล่านี้และงานที่รอดำเนินการเพื่อทำให้ประสบการณ์การใช้งานเหมือนแอปอย่างแท้จริงบนแพลตฟอร์มทั้งหมด (ซึ่งก็เป็นไปได้หากทุ่มเทมากพอ) เป็นเหตุผลที่ทำให้เราต้องพิจารณาการลงทุนใน Excalidraw Desktop ใหม่ แต่ข้อโต้แย้งที่ยิ่งใหญ่กว่าสำหรับเราคือ เราคาดว่า สำหรับกรณีการใช้งานของเรา เราไม่จำเป็นต้องมีฟีเจอร์ทั้งหมดของ Electron ความสามารถของเว็บที่เพิ่มขึ้นและยังคงเพิ่มขึ้นเรื่อยๆ นั้นทํางานได้ดีพอๆ กันหรือดีกว่า
ประโยชน์ของเว็บในปัจจุบันและอนาคต
แม้แต่ในปี 2020 jQuery ก็ยังคงได้รับความนิยมอย่างมาก นักพัฒนาซอฟต์แวร์จํานวนมากติดนิสัยใช้ jQuery แม้ว่าในปัจจุบันอาจไม่จําเป็นต้องใช้ jQuery ก็ตาม มีทรัพยากรที่คล้ายกันสำหรับ Electron ซึ่งเรียกว่าคุณอาจไม่จำเป็นต้องใช้ Electron เราขออธิบายเหตุผลที่เราคิดว่าไม่จำเป็นต้องใช้ Electron
Progressive Web App แบบติดตั้งได้
ปัจจุบัน Excalidraw เป็น Progressive Web App ที่ติดตั้งได้ โดยมี Service Worker และ ไฟล์ Manifest ของเว็บแอป โดยจะแคชทรัพยากรทั้งหมดไว้ในแคช 2 รายการ แคชหนึ่งสำหรับแบบอักษรและ CSS ที่เกี่ยวข้องกับแบบอักษร และอีกแคชหนึ่งสำหรับทุกอย่างที่เหลือ
ซึ่งหมายความว่าแอปพลิเคชันสามารถทำงานแบบออฟไลน์ได้อย่างเต็มที่และทำงานได้โดยไม่ต้องเชื่อมต่อเครือข่าย เบราว์เซอร์ที่ใช้ Chromium ทั้งบนเดสก์ท็อปและอุปกรณ์เคลื่อนที่จะแจ้งให้ผู้ใช้ติดตั้งแอป คุณจะเห็นข้อความแจ้งให้ติดตั้งในภาพหน้าจอด้านล่าง
Excalidraw ได้รับการกําหนดค่าให้ทํางานเป็นแอปพลิเคชันแบบสแตนด์อโลน เมื่อติดตั้งแล้ว คุณจะได้รับแอปที่ทํางานในหน้าต่างของตัวเอง โดยมีการผสานรวมอย่างสมบูรณ์ใน UI การทำงานหลายอย่างพร้อมกันของระบบปฏิบัติการ และมีไอคอนแอปของตัวเองในหน้าจอหลัก แถบแอป หรือแถบงาน ทั้งนี้ขึ้นอยู่กับแพลตฟอร์มที่คุณติดตั้ง
การเข้าถึงระบบไฟล์
Excalidraw ใช้ browser-fs-access เพื่อเข้าถึงระบบไฟล์ของระบบปฏิบัติการ ในเบราว์เซอร์ที่รองรับ การดำเนินการนี้จะเปิดใช้เวิร์กโฟลว์ที่แท้จริงของ "เปิด" → "แก้ไข" → "บันทึก" และ "บันทึกเป็น" รวมถึงมีทางเลือกสำรองที่ชัดเจนสำหรับเบราว์เซอร์อื่นๆ ดูข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์นี้ได้ในบล็อกโพสต์ของเราเรื่องการอ่านและเขียนไฟล์และไดเรกทอรีด้วยไลบรารี browser-fs-access
การรองรับการลากและวาง
คุณสามารถลากและวางไฟล์ลงในหน้าต่าง Excalidraw ได้เช่นเดียวกับในแอปพลิเคชันเฉพาะแพลตฟอร์ม ในเบราว์เซอร์ที่รองรับ File System Access API คุณสามารถแก้ไขไฟล์ที่วางได้ทันทีและระบบจะบันทึกการแก้ไขลงในไฟล์ต้นฉบับ เครื่องมือนี้ใช้งานง่ายจนบางครั้งคุณอาจลืมไปว่ากำลังใช้เว็บแอป
การเข้าถึงคลิปบอร์ด
Excalidraw ทำงานได้ดีกับคลิปบอร์ดของระบบปฏิบัติการ คุณสามารถคัดลอกและวางภาพวาด Excalidraw ทั้งหมดหรือแค่ออบเจ็กต์แต่ละรายการในรูปแบบ image/png และ image/svg+xml ซึ่งช่วยให้ผสานรวมกับเครื่องมืออื่นๆ สำหรับแพลตฟอร์มเฉพาะ เช่น Inkscape หรือเครื่องมือบนเว็บ เช่น SVGOMG ได้อย่างง่ายดาย
การจัดการไฟล์
Excalidraw รองรับ File Handling API แบบทดลองอยู่แล้ว ซึ่งหมายความว่าจะดับเบิลคลิกไฟล์ .excalidraw ในโปรแกรมจัดการไฟล์ของระบบปฏิบัติการและเปิดในแอป Excalidraw โดยตรง เนื่องจาก Excalidraw ลงทะเบียนเป็นตัวแฮนเดิลไฟล์สำหรับไฟล์ .excalidraw ในระบบปฏิบัติการ
การบันทึกลิงก์แบบประกาศ
คุณสามารถแชร์ภาพวาด Excalidraw โดยใช้ลิงก์ ลองดูตัวอย่างนี้ ในอนาคต หากผู้ใช้ติดตั้ง Excalidraw เป็น PWA ลิงก์ดังกล่าวจะไม่เปิดในแท็บเบราว์เซอร์ แต่จะเปิดหน้าต่างใหม่แบบสแตนด์อโลน การติดตั้งใช้งานที่รอดำเนินการซึ่งเป็นผลดีต่อการบันทึกลิงก์แบบประกาศ ซึ่งเป็นข้อเสนอใหม่ที่ล้ำสมัยสำหรับแพลตฟอร์มเว็บในขณะที่เขียน
บทสรุป
อินเทอร์เน็ตได้รับการพัฒนามาไกลมาก โดยมีฟีเจอร์มากขึ้นเรื่อยๆ ในเบราว์เซอร์ที่ใช้เวลา 2-3 ปีหรือหลายเดือนก่อนซึ่งเป็นสิ่งที่ไม่สามารถคิดได้บนเว็บและมีความเฉพาะตัวสำหรับแอปพลิเคชันเฉพาะแพลตฟอร์มเท่านั้น Excalidraw เป็นผู้นำด้านสิ่งที่เป็นไปได้ในเบราว์เซอร์ โดยตระหนักดีว่าเบราว์เซอร์บางรุ่นในบางแพลตฟอร์มอาจไม่รองรับฟีเจอร์ที่เราใช้ การวางเดิมพันในกลยุทธ์การปรับปรุงอย่างต่อเนื่องช่วยให้เราได้รับสิ่งใหม่ๆ ที่ดีที่สุดทุกครั้งที่ทำได้ โดยไม่ทิ้งใครไว้ข้างหลัง ดูได้ดีที่สุดในเบราว์เซอร์ทุกรุ่น
Electron ทำงานได้ดี แต่ในปี 2020 และหลังจากนั้น เราไม่จำเป็นต้องใช้ Electron อีกต่อไป และสำหรับวัตถุประสงค์ของ @vjeux ตอนนี้ Android Play Store ยอมรับ PWA ในรูปแบบคอนเทนเนอร์ที่เรียกว่า Trusted Web Activity แล้ว และเนื่องจาก Microsoft Store รองรับ PWA ด้วย คุณจึงจะเห็น Excalidraw ในร้านค้าเหล่านี้ในอนาคตอันใกล้ ในระหว่างนี้ คุณจะใช้และติดตั้ง Excalidraw ในและจากเบราว์เซอร์ได้ทุกเมื่อ
ขอขอบคุณ
บทความนี้ได้รับการตรวจสอบโดย @lipis, @dwelle และ Joe Medley