Beberapa nota tentang SharedWorkers

Baru-baru ini saya perlu melaksanakan pekerja kongsi dalam projek. Walaupun ia sangat berguna, tidak banyak maklumat yang boleh ditemui di tempat biasa, jadi berikut ialah beberapa petunjuk yang mungkin membantu pencari dari masa depan yang misterius.

Latar belakang

SharedWorkers ialah kelas khas WebWorker yang boleh dikongsi merentas berbilang tab, tetingkap atau pekerja web (biasa) lain.

Dalam permohonan saya, saya memerlukan proses yang akan membuat tinjauan untuk acara permohonan baharu (contohnya, pelanggan yang melengkapkan pembelian) dan menunjukkan pemberitahuan (menggunakan API Pemberitahuan) kepada pentadbir log masuk (atau lebih khusus lagi, mereka yang dilog masuk dalam pentadbir yang telah memilih untuk menerima pemberitahuan).

Pentadbir boleh membuka aplikasi dalam beberapa tab atau tetingkap, jadi membazir jika setiap tinjauan tab untuk acara baharu. Saya hanya mahukan satu pemberitahuan setiap acara, tanpa mengira bilangan tab atau tetingkap yang terbuka.

SharedWorker untuk menyelamatkan! Setiap tab atau tetingkap yang terbuka berkongsi satu pekerja, yang membuat tinjauan di latar belakang dan menunjukkan hanya satu pemberitahuan bagi setiap acara baharu.

Mencipta pekerja kongsi dengan Vite

Cabaran pertama ialah memuatkan pekerja kongsi dalam persediaan berasaskan Vite saya.

Jika anda menjalankan Vite dalam mod dev, Vite menyediakan skrip daripada domain dan port yang berbeza (cth http://[::1]:5173/), yang tidak akan berfungsi kerana pekerja kongsi mesti mematuhi dasar asal yang sama.

Saya mencuba pelbagai penyelesaian Vite untuk pekerja web:

• Kaedah rasmi pekerja web Vite tidak berfungsi untuk pekerja kongsi kerana keperluan dasar asal yang sama.
• URL Blob tidak disokong untuk pekerja kongsi.
• Memasukkan pekerja sebagai rentetan base64 tidak berfungsi kerana penyemak imbas menganggap mereka sebagai pekerja yang berbeza: baik untuk pekerja web, tetapi tidak untuk pekerja kongsi.

Akhirnya, saya mencipta laluan baharu untuk menyampaikan skrip sama ada daripada direktori sumber dalam dev atau direktori binaan dalam persekitaran pementasan dan langsung.

Route::addRoute('GET', '/notifications-shared-worker.js', function () {
    // If in dev environment, send the file from the resources folder
    if (app()->environment('local')) {
        return response()->file(resource_path('js/notificationWatcherWorker.js'), ['Content-Type' => 'text/javascript']);
    } else {
        // Otherwise, send the file from the public folder
        return response()->file(public_path('build/assets/notificationWatcherWorker.js'), ['Content-Type' => 'text/javascript']);
    }
});

Saya kemudian mencipta pekerja kongsi dengan laluan itu sebagai URL:

const worker = new SharedWorker('/notifications-shared-worker.js');

Menyahpepijat Pekerja Kongsi

Anda akan segera mendapati bahawa sebarang sintaks atau ralat masa jalan dalam pekerja kongsi anda tidak muncul dalam alat dev anda. Juga tiada sebarang panggilan log/amaran/info konsol.

Yang ini mudah, tampal chrome://inspect/#workers ke dalam bar URL anda, cari pekerja kongsi dan klik pada 'inspect'. Kini anda mempunyai tetingkap devtools hanya untuk pekerja kongsi.

Berkomunikasi kembali ke tab atau tetingkap utama

Untuk berkomunikasi kembali ke tab 'ibu bapa', gunakan kaedah port.postMessage, seperti yang diterangkan dalam dokumentasi MDN SharedWorker.

Walau bagaimanapun, kod contoh hanya membenarkan komunikasi dengan tab/tetingkap 'ibu bapa' terbaharu kerana ia menimpa rujukan port komunikasi setiap kali ibu bapa menyambung.

Sebaliknya, simpan tatasusunan port dan tambahkan setiap port baharu pada tatasusunan apabila 'ibu bapa' baharu bersambung.

Route::addRoute('GET', '/notifications-shared-worker.js', function () {
    // If in dev environment, send the file from the resources folder
    if (app()->environment('local')) {
        return response()->file(resource_path('js/notificationWatcherWorker.js'), ['Content-Type' => 'text/javascript']);
    } else {
        // Otherwise, send the file from the public folder
        return response()->file(public_path('build/assets/notificationWatcherWorker.js'), ['Content-Type' => 'text/javascript']);
    }
});

Kemudian, hantar mesej ke semua halaman induk seperti ini:

const worker = new SharedWorker('/notifications-shared-worker.js');

Atas ialah kandungan terperinci Beberapa nota tentang SharedWorkers. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!