Excalidraw 프로젝트에서 웹을 위해 Electron 래퍼를 지원 중단하기로 결정한 이유를 알아보세요. 있습니다.
Excalidraw 프로젝트는 데스크톱 버전인 Excalidraw Desktop을 Excalidraw용 Electron 래퍼로, 사용 중인 웹 버전을 사용합니다. excalidraw.com에서 찾을 수 있습니다. 신중한 분석 끝에 프로그레시브 웹 앱 (PWA)이 Google에서 빌드하고 싶은 미래라고 결정함 시작하겠습니다. 이유를 알아보려면 계속 읽어 보세요.
Excalidraw Desktop은 어떻게 탄생하게 되었나요?
@vjeux가 Excalidraw의 초기 버전을 만든 직후 2020년 1월에 블로그에 게시한 결과 다음과 같이 제안했습니다. 문제 #561:
Electron (또는 이와 동등한 버전) 내에서 Excalidraw를 래핑하여 [플랫폼별]로 게시하는 것이 좋습니다. 다양한 앱 스토어에 배포하도록 했습니다.
@voluntadpear의 즉각적인 반응은 다음과 같은 것이었습니다.
대신 PWA로 만들면 어떨까요? Android는 현재 다음과 같이 Play 스토어에 이를 추가할 수 있도록 지원합니다. 신뢰할 수 있는 웹 활동과 iOS에서도 곧 같은 작업을 수행할 수 있기를 바랍니다. 데스크톱에서 Chrome을 사용하면 PWA 바탕화면 바로가기를 다운로드합니다.
결국 @vjeux가 내린 결정은 간단했습니다.
둘 다 해야 해요 :)
Excalidraw 버전을 PWA로 변환하는 작업은 @voluntadpear 이상 독립적으로 @lipis 앞서 Excalidraw 데스크톱을 위한 별도의 저장소가 있습니다.
지금까지 @vjeux가 설정한 초기 목표는 아직 다양한 앱 스토어로의 Excalidraw를 사용할 수 없습니다. 솔직히 말하면 아무도 시작조차 하지 않았어 제출할 수 있습니다. 왜 그럴까요? 답변하기 전에 Electron을 살펴보겠습니다.
Electron이란?
Electron의 차별화된 장점은 ' 크로스 플랫폼 데스크톱 앱인 경우'라는 질문을 하는 것이 좋습니다. Electron으로 빌드된 앱은 'Mac, Windows, Linux와 호환'하는 경우, 'Electron 앱은 플랫폼'이라고 합니다. 홈페이지에 따르면 Electron이 쉽게 만드는 어려운 부분은 자동 업데이트 시스템 수준 메뉴 및 알림 비정상 종료 보고 디버깅 및 프로파일링 Windows 설치 프로그램. 알고 보니 약속된 기능은 작은 글씨로 자세히 살펴봐야 합니다.
예를 들어 자동 업데이트는 "macOS와 Windows에서만 [현재] [지원됨] 있습니다. 현재 Linux에서는 자동 업데이터 기능이 기본 지원되지 않으므로, 배포판의 패키지 관리자를 사용하여 앱을 업데이트하세요.'라는 메시지가 표시됩니다.
개발자는
Menu.setApplicationMenu(menu)를 호출하여 시스템 수준 메뉴를 만들 수 있습니다. Windows 및 Linux에서는 메뉴가 각 창의 상단 메뉴로 설정되는 반면, macOS에는 시스템 정의 표준 메뉴(예: 서비스 선택합니다. 메뉴를 표준 메뉴로 만들려면 개발자는 그에 따라 메뉴의role를 설정해야 합니다. Electron은 이를 인식하고 표준 메뉴가 되도록 만듭니다. 이것은 많은 양의 메뉴 관련 코드는 다음 플랫폼 검사를 사용합니다.const isMac = process.platform === 'darwin'Windows 설치 프로그램은 windows-installer를 사용하세요. 프로젝트의 README '프로덕션 앱의 경우 애플리케이션에 서명해야 합니다. Internet Explorer의 스마트 스크린 필터는 앱의 다운로드를 차단하고 많은 바이러스 백신 공급업체가 유효한 인증서를 받지 않는 한 앱을 멀웨어로 간주' [sic].
이 세 가지 예를 보면 Electron이 "한 번 쓰고, 실행하고, 모든 위치 등. 앱 스토어에 앱을 배포하려면 코드 서명은 앱 소유권 인증 앱을 패키징하려면 전자장비를 운반하면서 앱 업데이트를 위한 호스트 패키지 상대적으로 빨리 복잡해집니다. 특히 목표가 크로스 플랫폼 지원입니다. Google은 절대 멋진 콘텐츠를 만들 수 있음을 충분한 노력과 헌신을 갖춘 전자 앱. Excalidraw 데스크톱은 그렇지 않았습니다.
Excalidraw 데스크톱이 중단된 위치
지금까지 Excalidraw Desktop은 기본적으로
Excalidraw 정보 창이 추가된 .asar 파일 디자인
웹 버전과 거의 동일하다는 것을 알 수 있습니다.
macOS에서는 이제 애플리케이션 상단에 시스템 수준 메뉴가 있지만, 창 닫기 및 엑스칼리드로 정보를 제외한 나머지 작업은 모든 작업, 즉 메뉴 현재 상태에서는 꽤 쓸모가 없습니다. 한편 모든 작업은 당연히 일반 Excalidraw 툴바와 컨텍스트 메뉴.
<ph type="x-smartling-placeholder">
Google에서는 다음을 지원하는 electron-builder를 사용합니다.
파일 형식 연결을 참조하세요.
.excalidraw 파일을 더블클릭하면 Excalidraw Desktop 앱이 열립니다. 이
electron-builder.json 파일의 관련 발췌 부분은 다음과 같습니다.
{
"fileAssociations": [
{
"ext": "excalidraw",
"name": "Excalidraw",
"description": "Excalidraw file",
"role": "Editor",
"mimeType": "application/json"
}
]
}
안타깝게도 실제로 이는 항상 의도한 대로 작동하지는 않습니다. 왜냐하면 설치 유형 (현재 사용자, 모든 사용자에 대해)과 Windows 10의 앱에는 파일 형식을 자신에 연결할 수 있는 권한이 없습니다.
이러한 단점과 미해결 작업 덕분에 모든 플랫폼에서 진정한 앱 같은 경험을 선사할 수 있습니다. 충분히 노력하면 가능합니다. 투자할 수 있었습니다. 그러나 우리에게 가장 큰 논쟁은 우리 사용 사례에는 Electron이 제공하는 모든 기능이 필요하지는 않습니다. 성장세를 이어가는 세트장 웹 기능이 동등하게 더 나은 서비스를 제공하는 것으로 나타났습니다.
웹이 현재와 미래에 서비스를 제공하는 방식
2020년에도 jQuery는 엄청난 인기를 얻고 있습니다. 여러 사용자 오늘날 개발자들이 그것을 사용하는 것이 jQuery가 필요하지 않을 수도 있습니다. 이 글에 나온 것처럼 You Might Not Need Electron이라는 별칭도 있습니다. CANNOT TRANSLATE Electron이 필요하지 않다고 생각하는 이유를 간략히 살펴보겠습니다.
설치 가능한 프로그레시브 웹 앱
Excalidraw는 현재 설치 가능한 프로그레시브 웹 앱으로, 서비스 워커와 웹 앱 매니페스트를 생성합니다. 모든 리소스를 두 개의 캐시에 캐시하고 하나는 글꼴 및 글꼴 관련 CSS에, 다른 하나는 다른 모든 것을 위한 것입니다.
<ph type="x-smartling-placeholder">
이는 애플리케이션이 완전히 오프라인에서 작동하고 네트워크 연결 없이도 실행할 수 있음을 의미합니다. 데스크톱과 모바일의 Chromium 기반 브라우저에서 사용자에게 앱을 설치하라는 메시지를 표시합니다. 아래 스크린샷에서 설치 프롬프트를 볼 수 있습니다.
<ph type="x-smartling-placeholder">
Excalidraw는 독립형 애플리케이션으로 실행되도록 구성되어 있으므로 설치하면 앱을 얻을 수 있습니다. 자체 창에서 실행되는 것을 볼 수 있습니다 운영체제의 멀티태스킹 UI에 완전히 통합되어 있으며 홈 화면, 도크 또는 작업 표시줄에 자체 앱 아이콘이 표시됩니다. 설치 플랫폼에 따라 있습니다.
<ph type="x-smartling-placeholder">
파일 시스템 액세스
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로 설치한 경우 이러한 링크는 브라우저 탭에서 열리지 않고 새 독립형 창을 엽니다 구현 대기 중입니다. 다음 방법을 통해 정상적으로 작동합니다. 선언적 링크 캡처 이 문서 작성 당시에는 새로운 웹 플랫폼 기능에 대한 최첨단 제안이었습니다.
결론
웹은 오랫동안 성장했으며, 앞으로 더 많은 기능이 브라우저에 탑재되어 웹에서는 상상조차 하지 못했으며 플랫폼별 애플리케이션에만 국한되었습니다. Excalidraw는 브라우저에서 가능한 것의 최전선에 있으며, 동시에 플랫폼에 관계없이 모든 브라우저는 Google에서 사용하는 각 기능을 지원합니다. 진보적인 경향에 베팅하여 개선 전략에 따라, 저희는 항상 가능한 한 최고의 최신 제품을 즐깁니다. 있습니다. 모든 브라우저에서 가장 잘 볼 수 있습니다.
Electron은 우리에게 큰 도움을 주었지만 2020년과 그 이후에도 전자가 없어도 살 수 있습니다. 그리고 목표: @vjeux: 이제 Android Play 스토어는 컨테이너 형식(신뢰할 수 있는 웹 활동)과 이후 Microsoft Store는 PWA를 지원합니다. 머지않아 이 매장에서 엑스칼리드로를 만나 볼 수 있을 것입니다. 그동안 항상 브라우저에서 Excalidraw를 사용하고 설치합니다.