Menampilkan Pemberitahuan dari JavaScript (pengikatan JS)

Panduan ini menunjukkan cara menampilkan pemberitahuan aplikasi SDK Aplikasi Windows langsung dari JavaScript proses utama Electron dengan menggunakan pengikatan JS yang dihasilkan.

Prerequisites

Sebelum memulai panduan ini, pastikan Anda telah:

• Menyelesaikan penyiapan lingkungan pengembangan.

Langkah 1: Tampilkan pemberitahuan dari proses utama Electron

Impor pengikatan yang dihasilkan melalui #winapp/bindings impor paket, buat pemberitahuan aplikasi, dan tampilkan dengan manajer pemberitahuan default:

Memerlukan @microsoft/dynwinrt-codegen ≥ 0.1.0-preview.8. Proyek lama dapat di-upgrade dengan npm i -D @microsoft/dynwinrt-codegen@latest && npx winapp init --add-js-bindings agar winapp init menghubungkan peta impor #winapp/bindings, atau tetap menggunakan bentuk relatif require('../.winapp/bindings/index.js') (jalurnya relatif terhadap src/index.js; sesuaikan jika file entri Anda berada di lokasi lain).

// 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!'
  );
};

Note

AppNotificationManager.default_ memetakan properti SDK Aplikasi Windows Default. Pengikatan yang dihasilkan menambahkan trailing _ karena default merupakan kata kunci JavaScript.

Langkah 2: Jalankan

Sebelum pemberitahuan berfungsi, pastikan aplikasi Anda berjalan dengan identitas:

npx winapp node add-electron-debug-identity

Note

Perintah ini sudah menjadi bagian dari skrip yang postinstall ditambahkan dalam panduan penyiapan, sehingga berjalan secara otomatis setelah npm install. Jalankan secara manual setiap kali Anda memodifikasi Package.appxmanifest, memperbarui aset aplikasi, atau menginstal ulang dependensi.

Sekarang mulai aplikasi:

npm start

Pemberitahuan SDK Aplikasi Windows muncul saat proses utama memanggil showNotification.

Langkah Selanjutnya

Selamat! Anda sekarang menampilkan notifikasi SDK Aplikasi Windows dari aplikasi Electron Anda — tanpa add-on native, tanpa langkah build node-gyp. 🎉

Sekarang Anda siap untuk:

• Kemas Aplikasi Anda untuk Distribusi — buat file MSIX yang siap Anda distribusikan (runtime @microsoft/dynwinrt sudah ada di dependencies Anda).

Atau jelajahi panduan lain:

• Panggil API Windows dari JavaScript — pilih file dan baca dimensi gambarnya menggunakan pengikatan JS.
• Panggil Phi Silica dari JavaScript — ringkas teks dengan AI SDK Aplikasi Windows melalui pengikatan JS.
• Jalankan WinML dari JavaScript — gunakan penemuan penyedia ML SDK Aplikasi Windows dengan onnxruntime-node.
• Membuat addon native C++ — padanan addon native C++ untuk notifikasi.
• Ringkasan Memulai — kembali ke panduan utama.

Sumber Daya Tambahan

• Winapp Dokumentasi CLI — referensi CLI lengkap (init, restore, node generate-bindings).
• Contoh Aplikasi Electron — contoh kerja lengkap, termasuk pengikatan JS.
• @microsoft/dynwinrt — runtime yang mendukung pengikatan yang dihasilkan.
• @microsoft/dynwinrt-codegen — generator kode.