เลิกใช้งาน Excalidraw Electron เพื่อใช้เวอร์ชันเว็บ

ดูสาเหตุที่โปรเจ็กต์ Excalidraw ตัดสินใจเลิกใช้งาน Wrapper ของ Electron เพื่อหันมาใช้เวอร์ชันเว็บ

Thomas Steiner

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

ในโปรเจ็กต์ Excalidraw เราตัดสินใจที่จะเลิกใช้งาน Excalidraw Desktop ซึ่งเป็น Electron Wrapper สำหรับ 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 อย่างเลย :)

ขณะที่ @voluntadpear และคนอื่นๆ ได้เริ่มการแปลง Excalidraw เวอร์ชันต่างๆ เป็น PWA @lipis ก็ได้ดำเนินการต่อและสร้างรีโปแยกต่างหากสำหรับ Excalidraw เดสก์ท็อป

จนถึงวันนี้ เป้าหมายแรกที่ตั้งไว้โดย @vjeux ซึ่งก็คือการส่ง Excaliburaw ไปยัง App Store ต่างๆ ยังไม่บรรลุ ความจริงแล้ว ยังไม่มีผู้ใดเริ่มกระบวนการส่งไปยังร้านค้าใดๆ เลย แต่ทำไมจึงเป็นเช่นนั้น ก่อนตอบ เรามาลองดูแพลตฟอร์ม Electron กัน

Electron คืออะไร

จุดขายที่โดดเด่นของ 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 ตัวอย่างนี้ ก็เห็นได้ชัดว่า Electron อยู่ไกลจาก "เขียนครั้งเดียว ใช้งานได้ทุกที่" การเผยแพร่แอปใน App Store ต้องใช้การรับรองโค้ด ซึ่งเป็นเทคโนโลยีด้านความปลอดภัยสำหรับการรับรองการเป็นเจ้าของแอป การสร้างแพ็กเกจแอปต้องใช้เครื่องมืออย่าง electron-forge และพิจารณาว่าจะโฮสต์แพ็กเกจสำหรับการอัปเดตแอปไว้ที่ใด การดำเนินการนี้มีความซับซ้อนค่อนข้างเร็ว โดยเฉพาะเมื่อวัตถุประสงค์คือการรองรับข้ามแพลตฟอร์มอย่างแท้จริง เราขอแจ้งให้ทราบว่าการสร้างแอป Electron ที่ยอดเยี่ยมเป็นไปได้อย่างแน่นอนเมื่อคุณมีความพยายามและทุ่มเทมากพอ สำหรับ Excalidraw Desktop เราไม่อยู่

ทำงานต่อจากที่ค้างไว้ใน Excalidraw Desktop

จนถึงตอนนี้ Excalidraw Desktop นั้นเป็นเว็บแอป Excalidraw ที่รวมอยู่ในไฟล์ .asar พร้อมหน้าต่างเกี่ยวกับ Excalidraw รูปลักษณ์ของแอปพลิเคชันเกือบจะเหมือนกับเวอร์ชันเว็บ

Excalidraw เดสก์ท็อปแทบจะแยกไม่ออกจากเวอร์ชันเว็บ

เมนูเกี่ยวกับ Excalibur ให้ข้อมูลเชิงลึกเกี่ยวกับเวอร์ชันต่างๆ

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

แถบเมนูของ Excalidraw Desktop ใน macOS

เราใช้ 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 ที่เกี่ยวข้องกับแบบอักษร และอีกแคชสำหรับทุกอย่างที่เหลือ

เนื้อหาแคชของ Excalidraw

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

กล่องโต้ตอบการติดตั้ง Excalidraw ใน Chrome

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

PWA ของ Excalidraw ในหน้าต่างสแตนด์อโลน

ไอคอน Excalidraw ใน Dock ของ macOS

การเข้าถึงระบบไฟล์

Excalidraw ใช้ browser-fs-access เพื่อเข้าถึงระบบไฟล์ของระบบปฏิบัติการ ในเบราว์เซอร์ที่รองรับ การดำเนินการนี้จะเปิดใช้เวิร์กโฟลว์ที่แท้จริงของ "เปิด" → "แก้ไข" → "บันทึก" และ "บันทึกเป็น" รวมถึงมีทางเลือกสำรองที่ชัดเจนสำหรับเบราว์เซอร์อื่นๆ ดูข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์นี้ได้ในบล็อกโพสต์ของเราเรื่องการอ่านและเขียนไฟล์และไดเรกทอรีด้วยไลบรารี browser-fs-access

การรองรับการลากและวาง

คุณลากและวางไฟล์ลงในหน้าต่าง Excalidraw ได้เช่นเดียวกับในแอปพลิเคชันเฉพาะแพลตฟอร์ม ในเบราว์เซอร์ที่รองรับ File System Access API คุณสามารถแก้ไขไฟล์ที่วางได้ทันทีและระบบจะบันทึกการแก้ไขลงในไฟล์ต้นฉบับ เครื่องมือนี้ใช้งานง่ายจนบางครั้งคุณอาจลืมไปว่ากำลังใช้เว็บแอป

การเข้าถึงคลิปบอร์ด

Excalidraw ทำงานร่วมกับคลิปบอร์ดของระบบปฏิบัติการได้ดี คุณสามารถคัดลอกและวางภาพวาด Excalidraw ทั้งหมดหรือแค่ออบเจ็กต์แต่ละรายการในรูปแบบ image/png และ image/svg+xml ซึ่งช่วยให้ผสานรวมกับเครื่องมืออื่นๆ สำหรับแพลตฟอร์มเฉพาะ เช่น Inkscape หรือเครื่องมือบนเว็บ เช่น SVGOMG ได้อย่างง่ายดาย

เมนูตามบริบทของ Excalidraw ที่เสนอการดำเนินการกับคลิปบอร์ด

การจัดการไฟล์

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

การบันทึกลิงก์แบบประกาศ

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

บทสรุป

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

Electron ทำงานได้ดี แต่ในปี 2020 และหลังจากนั้น เราไม่จำเป็นต้องใช้ Electron อีกต่อไป และสำหรับวัตถุประสงค์ของ @vjeux ตอนนี้ Android Play Store ยอมรับ PWA ในรูปแบบคอนเทนเนอร์ที่เรียกว่า Trusted Web Activity แล้ว และเนื่องจาก Microsoft Store รองรับ PWA ด้วย คุณจึงจะเห็น Excalidraw ในร้านค้าเหล่านี้ในอนาคตอันใกล้ ในระหว่างนี้ คุณจะใช้และติดตั้ง Excalidraw ในและจากเบราว์เซอร์ได้ทุกเมื่อ

ขอขอบคุณ

บทความนี้ได้รับการตรวจสอบโดย @lipis, @dwelle และ Joe Medley