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

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

Thomas Steiner

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

ในโครงการ Excalidraw เราได้ตัดสินใจที่จะ เลิกใช้งาน Excalidraw Desktop Electron Wrapper สำหรับ Excalidraw แทนที่จะเป็นเวอร์ชันเว็บ และสามารถค้นหาได้เสมอที่ excalidraw.com หลังจากการวิเคราะห์อย่างถี่ถ้วนแล้ว เรา ได้ตัดสินใจแล้วว่า Progressive Web App (PWA) เป็นอนาคตที่เราต้องการสร้าง ตาม อ่านต่อเพื่อดูสาเหตุ

เดสก์ท็อปของ Excalidraw

หลังจากที่ @vjeux สร้างเวอร์ชันเริ่มต้นของ Excalidraw ได้ไม่นาน มกราคม 2020 และเขียนบล็อกเกี่ยวกับเรื่องนี้ เขาเสนอสิ่งต่อไปนี้ใน ปัญหา #561:

คงจะดีไม่น้อยถ้ารวม Excalidraw ภายในอิเล็กตรอน (หรือเทียบเท่า) และเผยแพร่เป็น [เฉพาะแพลตฟอร์ม] กับ App Store ต่างๆ

รีแอ็กชันทันทีของ @voluntadpear คือการแนะนำดังนี้

หากสนใจเปลี่ยนให้เป็น PWA แทน ปัจจุบัน Android รองรับการเพิ่มแอปไปยัง Play Store เป็น กิจกรรมบนเว็บที่เชื่อถือได้และหวังว่า iOS จะทำแบบเดียวกันในเร็วๆ นี้ บนเดสก์ท็อป Chrome ช่วยให้คุณทำสิ่งต่อไปนี้ได้ ดาวน์โหลดทางลัดบนเดสก์ท็อปไปยัง PWA

การตัดสินใจที่ @vjeux ตัดสินใจในตอนจบนั้นไม่มีอะไรซับซ้อน นั่นคือ

เราควรดำเนินการทั้ง 2 อย่าง :)

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

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

อิเล็กตรอนคืออะไร

จุดขายที่เป็นเอกลักษณ์ของ Electron คือช่วยให้คุณสามารถ "สร้าง แอปบนเดสก์ท็อปข้ามแพลตฟอร์มที่มี JavaScript, HTML และ CSS" แอปที่สร้างด้วย Electron "เข้ากันได้กับ Mac, Windows และ Linux" ซึ่งก็คือ "แอปอิเล็กตรอนสร้างและทำงานบน แพลตฟอร์ม" จากหน้าแรก ส่วนที่ยากที่อิเล็กตรอนทำให้ง่ายมีดังนี้ การอัปเดตอัตโนมัติ เมนูและการแจ้งเตือนระดับระบบ การรายงานข้อขัดข้อง การแก้ไขข้อบกพร่องและการสร้างโปรไฟล์ และ โปรแกรมติดตั้ง Windows ปรากฏว่า บางส่วน คุณลักษณะตามที่สัญญาไว้จำเป็นต้องมีรายละเอียดปลีกย่อย

• เช่น การอัปเดตอัตโนมัติ "[ปัจจุบัน] [รองรับ] เท่านั้นใน macOS และ Windows มี ไม่มีการสนับสนุนในตัวสำหรับโปรแกรมอัปเดตอัตโนมัติบน Linux ดังนั้นขอแนะนำให้ใช้ โปรแกรมจัดการแพ็กเกจเพื่ออัปเดตแอปของคุณ"

• นักพัฒนาซอฟต์แวร์สามารถสร้างเมนูระดับระบบได้โดยโทรไปที่ Menu.setApplicationMenu(menu) ใน Windows และ Linux ระบบจะตั้งค่าเมนูเป็นเมนูด้านบนของแต่ละหน้าต่าง ส่วนใน macOS จะมี เมนูมาตรฐานที่ระบบกำหนด เช่น บริการ เมนู หากต้องการทำให้เมนูเป็นเมนูมาตรฐาน นักพัฒนาซอฟต์แวร์ควรตั้งค่า role ของเมนูให้สอดคล้องกัน แล้ว Electron จะจดจำและทำให้กลายเป็นเมนูมาตรฐาน ซึ่งหมายความว่า โค้ดที่เกี่ยวข้องกับเมนูจะใช้การตรวจสอบแพลตฟอร์มต่อไปนี้ const isMac = process.platform === 'darwin'

• โปรแกรมติดตั้ง Windows อาจสร้างด้วย windows-installer README ของโปรเจ็กต์ ไฮไลต์ว่า "สำหรับแอปเวอร์ชันที่ใช้งานจริง คุณต้องรับรองใบสมัคร ของ Internet Explorer ตัวกรอง SmartScreen จะบล็อกไม่ให้ดาวน์โหลดแอปของคุณ และผู้ให้บริการป้องกันไวรัสหลายราย ให้พิจารณาว่าแอปของคุณเป็นมัลแวร์ เว้นแต่คุณจะได้รับใบรับรองที่ถูกต้อง" [sic]

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

จุดที่เดสก์ท็อปของ Excalidraw ค้างไว้

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

วันที่

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

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

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

วันที่

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

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

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

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

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

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

แม้ในปี 2020 แต่ jQuery ก็ยังคง ได้รับความนิยมอย่างน่าเหลือเชื่อ สำหรับหลายคน จนกลายเป็นนิสัยในการใช้ แม้ว่าในความเป็นจริงทุกวันนี้พวกเขา อาจไม่ต้องใช้ jQuery มีแหล่งข้อมูลที่คล้ายกันสำหรับ อิเล็กตรอนอาจเรียกว่าคุณอาจไม่จำเป็นต้องใช้อิเล็กตรอน ให้ฉัน อธิบายเหตุผลที่เราคิดว่าไม่จำเป็นต้องใช้อิเล็กตรอน

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

ปัจจุบัน Excalidraw เป็น Progressive Web App แบบติดตั้งได้พร้อมด้วย โปรแกรมทำงานของบริการ ไฟล์ 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 ทำงานได้ดีกับคลิปบอร์ดของระบบปฏิบัติการ ภาพวาดของ Exalidraw ทั้งหมดหรือเพียงแค่ คุณสามารถคัดลอกและวางออบเจ็กต์แต่ละรายการในรูปแบบ image/png และ image/svg+xml สามารถผสานรวมกับเครื่องมือเฉพาะแพลตฟอร์มอื่นๆ ได้อย่างง่ายดาย เช่น Inkscape หรือเครื่องมือบนเว็บ เครื่องมืออย่าง SVGOMG

วันที่

เมนูตามบริบทของ Excalidraw จะแสดงการทำงานของคลิปบอร์ด

File Handling

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

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

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

บทสรุป

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

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

กิตติกรรมประกาศ

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