Hantar mesej Web Push dengan Deno

Kebelakangan ini, saya telah mengusahakan pakej webpush baharu yang dibina dari bawah menggunakan hanya API Web. Ini membolehkan (secara teorinya, sekurang-kurangnya) menghantar mesej Web Push terus daripada penyemak imbas anda.

Catatan blog ini bertujuan untuk menerangkan apakah protokol Web Push, cara ia berfungsi
(RFC 8291) dan cara menghantar mesej Web Push menggunakan pustaka saya.

Apakah protokol Web Push?

Protokol Web Push ialah protokol perantaraan yang membenarkan aplikasi menghantar mesej kepada ejen pengguna (biasanya penyemak imbas).

Ia serupa dengan Peristiwa Dihantar Pelayan (SSE) dalam erti kata bahawa mesej ditolak kepada ejen pengguna tetapi ia mempunyai tujuan yang berbeza. Mesej Tolak Web tidak memerlukan tapak web mempunyai tab terbuka sebagai pekerja perkhidmatan
boleh mendengar mesej push. Ia berfungsi di latar belakang.

Bagaimanakah protokol Web Push berfungsi?

Protokol Tolak Web melibatkan tiga pelakon:

• Ejen Pengguna: pelayar pelawat tapak web anda biasanya
• Perkhidmatan Push: pelayan tolak diselenggara dan dimiliki oleh Google, Mozilla atau Apple bergantung pada penyemak imbas
• Pelayan Aplikasi: pelayan anda

Berikut ialah gambaran keseluruhan interaksi antara mereka:

    +-------+           +--------------+       +-------------+
    |  UA   |           | Push Service |       | Application |
    +-------+           +--------------+       +-------------+
        |                      |                      |
        |        Setup         |                      |
        |<====================>|                      |
        |           Provide Subscription              |
        |-------------------------------------------->|
        |                      |                      |
        :                      :                      :
        |                      |     Push Message     |
        |    Push Message      |<---------------------|
        |<---------------------|                      |
        |                      |                      |

Perkhidmatan tolakan perantaraan diperlukan atas pelbagai sebab.

Pertama, ia mengurangkan lebar jalur dan penggunaan bateri kerana ejen pengguna hanya mengekalkan satu sambungan untuk semua tapak web dan bukannya satu untuk setiap tapak web.

Ia juga meningkatkan kebolehskalaan dan kebolehpercayaan kerana perkhidmatan tolakan penyemak imbas utama direka untuk mengendalikan berjuta-juta pengguna. Oleh kerana mesej tolak mesti dikekalkan jika ejen pengguna berada di luar talian, membina perkhidmatan tolak memerlukan banyak kejuruteraan, infrastruktur yang berdaya tahan dan berlebihan

Akhir sekali, membina, menggunakan dan mengekalkan perkhidmatan tolak tersuai selalunya terlalu kompleks dan intensif sumber untuk syarikat web kecil. Ini akan memberikan syarikat yang lebih besar kelebihan daya saing yang tidak adil, kerana mereka akan mempunyai sumber yang diperlukan untuk membangun dan memperhalusi perkhidmatan push mereka sendiri.

Jika anda pengguna yang mementingkan privasi seperti saya, melihat perkhidmatan perantara
menerima semua mesej menaikkan bendera merah. Untuk menangani kebimbangan ini, Web Push
mesej dijamin melalui Pengekodan Kandungan Dienkripsi HTTP (lihat
saya pakej http-ece), memastikan bahawa
maklumat sensitif kekal dilindungi dan tidak boleh dibaca oleh mana-mana pihak ketiga
perkhidmatan dalam transit.

Persediaan

Anda mungkin perasan bahawa anak panah persediaan berbeza daripada yang lain dalam graf ASCII di atas. Ini kerana fasa persediaan bergantung kepada pelaksanaan. Semua pelayar utama melaksanakan javascript
Tekan API dalam
cara berbeza. Kaedah PushManager.subscribe() yang mengembalikan standard
PushSubscription terdedah.

Langganan sentiasa mengandungi titik akhir URL unik yang dikaitkan dengan langganan tolak dan kunci awam yang digunakan untuk menyulitkan mesej.

Apabila membuat langganan, applicationServerKey pilihan mungkin disediakan untuk mengenal pasti mesej menolak pelayan aplikasi. Ini ialah kaedah pengesahan Pelayan Aplikasi Sukarela (VAPID)
(RFC 8292). Kunci VAPID digunakan untuk mengurangkan serangan DDOS pada perkhidmatan tolak. Juga menambah pengesahan antara pelayan aplikasi dan perkhidmatan tolak mengurangkan risiko titik akhir langganan bocor. Atas sebab ini, ia adalah wajib dalam Firefox.

Menyediakan Langganan

Langkah kedua ialah menghantar langganan ke pelayan Aplikasi supaya ia boleh mula menghantar mesej.

Pelayan aplikasi biasanya akan menyimpan langganan dalam pangkalan data untuk digunakan semula kemudian.

Mesej tolak

Akhir sekali, untuk menolak mesej, pelayan aplikasi menghantar permintaan HTTP yang disulitkan dengan skim pengesahan yang tidak benar jika applicationServerKey disediakan untuk membuat langganan.

Jika ejen pengguna berada dalam talian apabila mesej diterima melalui perkhidmatan push, ia adalah
dimajukan. Jika tidak, ia disimpan sehingga ejen pengguna berada dalam talian atau mesej tamat tempoh.

Apabila ejen pengguna menerima mesej, ia melaksanakan pengendali acara tolak yang kebanyakannya digunakan untuk memaparkan pemberitahuan dan itu sahaja.

Menyediakan pelayan aplikasi menggunakan webpush

Mula-mula anda mesti menjana kunci VAPID kerana sesetengah penyemak imbas menjadikannya wajib:

$ deno run https://raw.githubusercontent.com/negrel/webpush/master/cmd/generate-vapid-keys.ts

Salin output dan simpan pada fail, anda tidak perlu menjana kunci VAPID lagi.

Dalam kod pelayan aplikasi anda, anda boleh memuatkannya seperti berikut:

import * as webpush from "jsr:@negrel/webpush";

// Read generated VAPID file.
const vapidKeysJson = Deno.readTextFileSync("./path/to/vapid.json");

// Import VAPID keys.
webpush.importVapidKeys(JSON.parse(vapidKeysJson));

Kemudian, anda perlu mencipta contoh objek ApplicationServer.

// adminEmail is used by Push services maintainer to contact you in case there
// is problem with your application server.
const adminEmail = "john@example.com";

// Create an application server object.
const appServer = await webpush.ApplicationServer.new({
  contactInformation: "mailto:" + adminEmail,
  vapidKeys,
});

Kemudian untuk menghantar mesej tolak, cuma buat PushSubscriber dan panggilnya
kaedah pushMessage()/pushTextMessage() seperti berikut:

const subsribers = [];

// HTTP handler for user agent sending their subscription.
function subscribeHandler(req) {
  // Extract subscription send by user agent.
  const subscription = await req.json();

  // Store subscription in db.
  // ...

  // Create a subscriber object.
  const sub = appServer.subscribe(subscription);

  // Store subscriber in memory.
  subscribers.push(sub);
}

// Helper method to send message to all subscribers.
function broadcastMessage(msg) {
  for (const sub of subscribes) {
    sub.pushTextMessage(msg, {});
  }
}

Itu sahaja, anda menghantar mesej tolak kepada pelanggan anda!

repositori webpush mengandungi contoh interaktif dengan kod serupa yang boleh anda jalankan secara setempat. Ia juga mengandungi kod javascript sisi pelanggan jadi pastikan anda menyemaknya!

Atas ialah kandungan terperinci Hantar mesej Web Push dengan Deno. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!