JavaScript에서 알림 표시(JS 바인딩)

이 가이드에서는 생성된 JS 바인딩을 사용하여 Electron 주 프로세스 JavaScript에서 직접 Windows 앱 SDK 앱 알림을 표시하는 방법을 보여 줍니다.

사전 요구 사항

이 가이드를 시작하기 전에 다음을 수행했는지 확인합니다.

1단계: Electron 주 프로세스의 알림 표시

패키지 가져오기를 통해 생성된 바인딩을 #winapp/bindings 가져오고, 앱 알림을 빌드하고, 기본 알림 관리자와 함께 표시합니다.

@microsoft/dynwinrt-codegen ≥ 0.1.0-preview.8이(가) 필요합니다. 이전 프로젝트는 npm i -D @microsoft/dynwinrt-codegen@latest && npx winapp init --add-js-bindings로 업그레이드하여 winapp init가 #winapp/bindings import 맵을 연결하도록 하거나, 상대 경로 형식인 require('../.winapp/bindings/index.js')을 그대로 유지할 수 있습니다(경로는 src/index.js를 기준으로 한 상대 경로이므로 엔트리 파일이 다른 위치에 있으면 그에 맞게 조정하세요).

// src/index.js (Electron main, CommonJS)
const {
  AppNotificationBuilder,
  AppNotificationManager,
} = require('#winapp/bindings');

function showNotification(title, message) {
  const notification = AppNotificationBuilder
    .create()
    .addText(title)
    .addText(message)
    .buildNotification();

  AppNotificationManager.default_.show(notification);
}

const createWindow = () => {
  // ... existing window creation code ...

  // Test the Windows App SDK notification
  showNotification(
    'Hello from Electron!',
    'This notification is powered by the Windows App SDK!'
  );
};

메모

AppNotificationManager.default_는 Windows 앱 SDK Default 속성을 매핑합니다. 생성된 바인딩은 JavaScript 키워드이므로 후행 _default 을 추가합니다.

2단계: 실행

알림이 작동하기 전에 앱이 ID로 실행되는지 확인합니다.

npx winapp node add-electron-debug-identity

메모

이 명령은 설치 가이드에 추가된 스크립트의 postinstall 일부이므로 이후에 자동으로 npm install실행됩니다. Package.appxmanifest을 수정하거나, 앱 에셋을 업데이트하거나, 의존성을 다시 설치할 때마다 수동으로 실행합니다.

이제 앱을 시작합니다.

npm start

주 프로세스가 호출showNotification되면 Windows 앱 SDK 알림이 나타납니다.

다음 단계

축하합니다! 이제 Electron 앱의 Windows 앱 SDK 알림(네이티브 추가 기능 없음, 빌드 단계 없음node-gyp)이 표시됩니다. 🎉

이제 다음을 수행할 준비가 되었습니다.

  • 배포용 앱 패키지 - 배송할 수 있는 MSIX를 생성합니다( @microsoft/dynwinrt 런타임은 이미 사용자 dependencies에 있습니다).

또는 다른 가이드를 살펴보세요.

추가 리소스

  • Last updated on