تشخیص آنلاین/آفلاین بودن اپلیکیشن در انگولار

یکی از مواردی که در اپلیکیشن های کلاینت تحت وب مهمه اینه که تشخیص بدیم آنلاین هستیم یا آفلاین. اپلیکیشن انگولار بر پایه جاوااسکریپت هست . بنابر این اول باید امکاناتمون رو در جاوااسکریپت بیینیم.

متغیر nagivator.onLine

مرورگرها مقدار آنلاین یا آفلاین بودن رو همیشه در navigator.onLine قرار میدهند. اگر true باشه یعنی آنلاین هستیم و اگر false باشه یعنی آفلاین هستیم. بنابر این ما با این متغیر وضعیت مون رو بررسی میکنیم.

رویدادهای online و offline در window

مرورگر در وانیلا جاوااسکریپت به صورت زیر ما رو متوجه آنلاین یا آفلاین شدن مون میکنه:

نوشتن سرویس check-online

شاید شما ترجیح بدید در کامپوننت app.component.ts آنلاین بودن اپلیکیشن رو بررسی کنید. ولی من ترجیح میدم یک سرویس براش درست کنم و هر جایی که باید از آنلاین یا آفلاین بودن اپلیکیشن مطلع بشم، سرویس رو صدا کنم.

در انگولار امکاناتی مثل DI و rxjs و signal و pipe داریم. میتونیم event ها رو از طریق fromEvent بگیریم. میتونیم چند تا Observable رو با هم merge کنیم. میتونیم با الگوی pipe و map نتیجه ها رو به مقدار یک متغیر ( مثلا navigator.onLine) تغییر بدیم و در نهایت منتظر event ها بمونیم تا با اومدن یک جواب، دیگران رو از طریق گوش دادن به Signal یا Subject مطلع کنیم. میتونیم سرویس رو هر جایی که نیاز داشتیم Inject کنیم.

من سرویس رو به صورت زیر پیاده کردم:

یک متغیر public از نوع Signal تعریف کردم.

مقدار فعلی navigator.onLine رو در زمان ساخته شدن آبجکت سرویس، به سیگنال دادم.

بعدش observable های دو تا رویداد online و offline رو با هم merge کردم.

به کمک الگوی pipe و map تعریف کردم که هر رویدادی اتفاق بیفته، متغیر navigator.onLine به عنوان جواب برگرده.

منتظر روی دادن event ها بودم تا با گرفتن مقدار navigator.onLine ، مقدارش رو با سیگنال آپدیت کنم تا دیگران مطلع بشن.

میتونیم بجای سینگال از RxJS Subject هم استفاده کنیم.

موفق باشید :)