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

เรียนรู้ว่าเหตุใดโครงการ Excalidraw จึงตัดสินใจเลิกใช้งาน Wrapper อิเล็กตรอนเพื่อให้สอดคล้องกับเวอร์ชันเว็บ

Thomas Steiner

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

ในโปรเจ็กต์ 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 Desktop

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

ต่อจากที่ Excalidraw Desktop

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

Excalidraw Desktop แทบจะแยกแยะความแตกต่างจากเวอร์ชันเว็บไม่ได้

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

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

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

เราใช้เครื่องมือสร้างอิเล็กตรอน ซึ่งรองรับการเชื่อมโยงประเภทไฟล์ การดับเบิลคลิกไฟล์ .excalidraw จะเป็นการเปิดแอป Excalidraw Desktop ขึ้นมา ข้อความที่ตัดตอนมาที่เกี่ยวข้องในไฟล์ electron-builder.json มีลักษณะดังนี้

{
  "fileAssociations": [
    {
      "ext": "excalidraw",
      "name": "Excalidraw",
      "description": "Excalidraw file",
      "role": "Editor",
      "mimeType": "application/json"
    }
  ]
}

แต่ในทางปฏิบัติ แอปใน Windows 10 ไม่มีสิทธิ์เชื่อมโยงประเภทไฟล์กับตนเอง ทั้งนี้ขึ้นอยู่กับประเภทการติดตั้ง (สำหรับผู้ใช้ปัจจุบันของผู้ใช้ทั้งหมด) ด้วย

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

เว็บให้บริการแก่เราทั้งในปัจจุบันและอนาคตอย่างไร

แม้แต่ในปี 2020 jQuery ยังคงได้รับความนิยมอย่างมาก นักพัฒนาซอฟต์แวร์จำนวนมากใช้ jQuery จนเคยชินแม้ว่าในปัจจุบันจะอาจไม่จำเป็นต้องใช้ jQuery แล้ว มีทรัพยากรที่คล้ายกับอิเล็กตรอน ซึ่งเรียกว่า You Might Might With Electron ขออธิบายเหตุผลที่เราไม่จำเป็นต้องมี Electron

Progressive Web App ที่ติดตั้งได้

ปัจจุบัน Excalidraw เป็น Progressive Web App ที่ติดตั้งได้ โดยมี Service Worker และไฟล์ Manifest ของเว็บแอป โดยจะแคชทรัพยากรทั้งหมดไว้ในแคช 2 แบบ แบบแรกสำหรับแบบอักษรและ CSS ที่เกี่ยวข้องกับแบบอักษร และอีกชุดหนึ่งสำหรับแบบอื่นๆ

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

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

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

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

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

ไอคอน Excalidraw บนแท่นชาร์จ 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 ลิงก์ดังกล่าวจะไม่เปิดในแท็บเบราว์เซอร์ แต่จะเปิดหน้าต่างใหม่แบบสแตนด์อโลน อยู่ระหว่างรอการติดตั้งใช้งาน ซึ่งจะได้ผลเพราะการบันทึกลิงก์ประกาศ ซึ่งเป็นข้อเสนอ Bleeding - Edge ขณะเขียนสำหรับฟีเจอร์ใหม่ของแพลตฟอร์มเว็บ

บทสรุป

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

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

ข้อความแสดงการยอมรับ

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