Bagaimana cara mendeteksi ketika browser mencekil timer dan koneksi websockets setelah pengguna meninggalkan tab atau mematikan layar? (javascript)

12

Konteks

Sebuah game dikirimkan sebagai aplikasi web progresif yang memiliki penghitung waktu ( setTimeout, setInterval) dan websocket untuk mendapatkan komunikasi waktu nyata.

Apa yang terjadi

Semuanya baik-baik saja selama pengguna tetap di aplikasi. Tetapi ketika pengguna pergi ke tab lain, atau aplikasi lain atau mematikan layar (jika ponsel), itu menjadi "dunia tidak dikenal yang jahat".

  • Soket web mungkin atau mungkin tidak menjadi "dijeda" atau "dimatikan"
  • Pengatur waktu terlihat seperti dicekik atau dilemahkan.

Perilaku ini tampaknya tergantung pada browser dan platform dan, mungkin, bahkan tergantung pada perilaku pengguna tertentu. Saya kira browser dan OS memiliki siklus / mekanisme sendiri untuk menghemat baterai dan / atau komputasi.

Ketika pengguna kembali, aplikasi berada dalam kondisi yang tidak diketahui dan saya berjuang untuk memulihkan keadaan dengan benar.

Mengenai websockets saya memiliki koneksi ulang otomatis dengan socket.io dan menghubungkan kembali-websocket tetapi tidak cukup untuk menyelesaikan semuanya.

Mencari jawaban

  • Apa "siklus hidup" dari berbagai browser tentang ini? Apakah ini didokumentasikan? Kapan mereka memutuskan untuk mematikan dan mencekik?
  • Apa yang mereka lakukan persis ke soket web? Browser baru saja memutusnya?
  • Apa yang mereka lakukan tepat pada timer? Mereka mencekik mereka atau melonggarkan mereka atau sesuatu yang lain?
  • Apa yang terjadi pada eksekusi javascript secara umum? Dijeda / dihancurkan / dicekik?
  • Apakah ada cara untuk menghubungkan ke beberapa jenis siklus hidup browser saat itu akan mematikan segalanya? Satu-satunya hal yang bisa saya temukan adalah API visibilitas

  • Apakah ada cara untuk mereproduksi perilaku ini secara artifisial untuk dapat menguji solusi? Ini sangat sulit di desktop. Soket web tidak dapat dimatikan dan pengembang kromium tampaknya tidak terburu-buru untuk membantu masalah mulai 2014 (!): Soket web tidak disertakan saat menggunakan penghambat koneksi

  • Terlepas dari hal di atas, apakah ada solusi lintas-browser pragmatis untuk mendeteksi / menyelesaikan masalah ini? (misalnya dari pengalaman, Firefox di desktop tampaknya berperilaku sangat berbeda dibandingkan dengan Chrome, dan iPhone akan terputus jauh lebih sering daripada Android)

tautan yang berhubungan

javascript websocket cross-browser progressive-web-apps Kev
sumber
1
Ini hanya konsep wicg.github.io/page-lifecycle .
norbertpy

Jawaban:

7

Tidak yakin, tetapi Anda bisa menggunakan pekerja layanan. Seperti yang saya tahu, mereka berjalan di latar belakang bahkan jika tab Anda tidak dibuka dan dihentikan jika tab Anda ditutup.

Btw. siklus hidup tab browser tampaknya berbeda di setiap browser, karena setiap browser menanganinya berbeda. Dari apa yang saya lihat bahwa browser dapat membekukan tab jika browser membutuhkan lebih banyak memori untuk hal-hal lain.

Ini dokumen dari Chrome .

Saya ingat ada beberapa peristiwa, seperti onload yang memberi tahu Anda jika pengguna telah meninggalkan atau membuka kembali tab. Anda dapat menggunakan acara ini untuk menghubungkan kembali dll.

Mointy
sumber
Ini adalah ide yang menarik. Apakah ini sesuatu yang telah Anda lakukan dengan beberapa kode untuk dibagikan?
Kev
Maaf, saya tidak punya kode contoh sekarang, tetapi jika Anda mencari pekerja layanan, ada banyak tutorial cara mengaturnya. Satu-satunya hal yang harus Anda lakukan adalah meletakkan hanya kode kecil di mana Anda terhubung ke server ws Anda dan console.log()ketika Anda mendapatkan pesan dari server ws. Di chrome, Anda dapat membuka konsol pekerja layanan Anda sehingga Anda dapat menguji apakah pesan-pesan itu dihidupkan kembali ketika Anda meninggalkan tab.
Mointy
0

Saya akan memberikan saran berbeda tentang cara mendesain aplikasi Anda. Dari apa yang saya pahami, maksud Anda adalah menambahkan lebih banyak logika untuk memahami jika pengguna tidak lagi aktif di browser. Ini memerlukan masalah berbeda yaitu browser spesifik untuk mengimplementasikan logika itu. Dengan pemikiran itu, saya akan berinvestasi dalam memiliki penanganan kesalahan yang lebih baik , baik di server dan klien.

Kesalahan tidak akan spesifik peramban. Menangani itu akan membuat aplikasi Anda lebih tangguh dan agnostik terhadap perubahan peramban, yang pada akhirnya bisa berubah, katakanlah, cara mereka hibernasi tab, fitur lain yang mungkin diterapkan vendor di masa depan.

Ini adalah gagasan yang dapat Anda temukan dalam arsitektur layanan, tetapi pola yang sama berlaku untuk aplikasi web apa pun. Anda mungkin ingin mencari Design-for-Failkonsep:

Kompleksitas membuatnya tidak mungkin untuk mengasumsikan ketahanan pada bagian sistem yang menjadi sandarannya. Sebagai gantinya, seseorang perlu merancang sistem dan aplikasi pada setiap lapisan tertentu dalam tumpukan berbasis TI untuk mengasumsikan kemungkinan kegagalan pada level yang lebih rendah. Desain-untuk-kegagalan mengharuskan pemikiran tentang toleransi kesalahan di semua lapisan. Pengembang aplikasi tidak lagi dapat membatasi diri untuk memikirkan fungsionalitas.

https://www.oreilly.com/library/view/designing-delivery/9781491903742/ch04.html

saya
sumber
"Penanganan kesalahan yang lebih baik" seperti apa yang Anda pikirkan?
Kev