이 기사의 목적

Node.js를 통해 Windows 10 진행률 표시 줄이있는 토스트 디스플레이를 표시합니다.

전제 조건

다음 모듈이 설치되어 있다고 가정합니다.

@nodert-win10-rs4/windows.ui.notifications

@nodert-win10-rs4/windows.data.xml.dom

이번은 nodert-win10-rs4로 테스트하고 있습니다만, nodert-win10-20h1 등, 다른 버젼에서도 움직인다고 생각합니다.
NodeRT의 인스톨은 일근줄에서는 가지 않는 일이 있습니다만, 다른 Qiita 기사등을 참조하는 것으로 해결할 수 있습니다.

코드

토스트 만들기

  const xml = require("@nodert-win10-rs4/windows.data.xml.dom");
  const {
    ToastNotification,
    ToastNotificationManager,
    NotificationData,
  } = require("@nodert-win10-rs4/windows.ui.notifications");

  /* トーストのXML　参照： https://docs.microsoft.com/en-us/uwp/schemas/tiles/toastschema/schema-root */
  const msgTemplate = `<toast>
    <visual>
        <binding template="ToastGeneric">
            <text>通知テスト</text>
            <progress value="{progressValue}" valueStringOverride="{progressValueString}" status="{progressStatus}"/>
        </binding>
    </visual>
</toast>`;
  /* アプリケーションID */
  const appId =
    "{1AC14E77-02E7-4E5D-B744-2EB1AE5198B7}\\WindowsPowerShell\\v1.0\\powershell.exe";

  /* トーストのTag, Group */
  let tag = "tag";
  let group = "group";

  let toastXml = new xml.XmlDocument();
  toastXml.loadXml(msgTemplate);
  let toast = new ToastNotification(toastXml);
  toast.tag = tag;
  toast.group = group;
  /* 作成したトーストのイベント */
  toast.on("activated", function (sender, eventArgs) {
    // onActiviation();
  });

  toast.on("dismissed", function () {
    //  onDismissal();
  });

  /* プログレスバーの設定*/
  let d = {};
  d["progressValue"] = 0.2;
  d["progressValueString"] = "文字";
  d["progressStatus"] = "ステータス";
  toast.data = new NotificationData(d, 1);
  /* トースト表示 */
  ToastNotificationManager.createToastNotifier(appId).show(toast);

msgTemplate는 토스트의 내용을 정의하는 XML입니다. XML을 변경하면 이미지와 버튼을 추가할 수 있습니다.
htps : // / cs. 미 c 로소 ft. 코 m / 엔 - s / 우 wp / s chima s / chi s / 그리고 sts chima / s chimaro t 등을 보면서 XML을 만들 수 있지만 Visual Studio에서 ToastContentBuilder를 사용하여 토스트를 만든 후 GetXml() 응.
appId 는 アプリケーションユーザーモデル ID 를 전달합니다. 이 ID는 실제로 Windows 10에 설치된 응용 프로그램의 ID를 전달하지 않으면 알려지지 않는 것 같습니다.
이 ID는 Powershell에서 get-AppxPackage 명령을 실행하여 얻을 수 있습니다. 앞의 코드 예제에서는 Powershell ID를 설정합니다.

토스트 업데이트

다음 코드를 호출하여 토스트를 업데이트할 수 있습니다.

  let d = {};
  d["progressValue"] = 0.9;
  d["progressValueString"] = "文字2";
  d["progressStatus"] = "ステータス2";
  ToastNotificationManager.createToastNotifier(appId).update(
    new NotificationData(d, 2),
    tag,
    group
  );

Electron의 알림

예를 들어 Electron에서는 OS에서 구현된 알림 기능을 사용하여 알림을 만들 수 있습니다. 실제로 알림을 해 보면 Windows 10에서는 다음과 같은 토스트 표시가 이루어집니다.


그러나 더 이상 기능을 확장한 토스트를 볼 수는 없습니다. 이미지나 진행률 표시줄을 추가한 토스트를 표시하고 싶다면 이번과 같은 방법으로 실현 가능합니다.
그러나 electron-rebuild 를 사용하여 토스트 표시에 필요한 모듈을 다시 빌드해야 합니다.