كيف تجعل تطبيقك يعمل دون اتصال مع قوة JavaScript

في عالم اليوم ، جعلنا الاتصال أكثر قدرة على الحركة مما يجعلنا (للمفارقة) في وضع عدم الاتصال في بعض الأحيان: عندما نكون في وضع الطائرة ، ولدينا اتصال سيئ ، ولا نملك المزيد من البيانات ، ونكون في مترو الأنفاق ... وهكذا.

التأثير الثاني لهذا التنقل هو التحميل البطيء للمواقع الثقيلة: وجدت أمازون أن 100 مللي ثانية فقط من وقت التحميل الإضافي تكلفها 1٪ من المبيعات.

في هذه الحالات ، نود أن يكون لدينا وصول دون اتصال إلى المحتوى الخاص بنا. لهذا السبب توجد أدوات مثل Instapaper و Pocket. يسمح لك Spotify و Netflix أيضًا بتنزيل الوسائط للاستخدام في وضع عدم الاتصال.

يمكننا أن نرى بسهولة أن هناك طلبًا على هذه الميزة وكيف يمكن أن تفيد عملك.

حان الوقت لأن تصبح شبكة الإنترنت غير متصلة بالإنترنت.

لحسن الحظ ، لم نعد بحاجة إلى إنشاء تطبيقات أصلية لتحقيق هذا الهدف بعد الآن. يمكننا خلق موقع على شبكة اتصال مع قوة جافا سكريبت بفضل جديد العاملين في مجال الخدمات و API ذاكرة التخزين المؤقت الميزات.

ما هو عامل الخدمة (SW)؟

عمال الخدمة عبارة عن كود JavaScript يعمل في خلفية موقع الويب الخاص بك ، حتى عندما تكون الصفحة مغلقة. بالنسبة للاستخدامات في وضع عدم الاتصال ، فإن أحد أهدافهم هو تخزين طلبات الشبكة أو الصور في ذاكرة التخزين المؤقت للمتصفح.

قامت وكالة BETC بإنشاء موقع ويب تجريبي يسمى whentheinternetisdown.com لشركة الاتصالات الفرنسية Bouygues. إنه يعمل فقط في وضع عدم الاتصال ويشعر بأنه نوع من السحر. اذهب جربها :)

إنه التخزين المؤقت الذي يجعل سحر الموقع: يمكنك العودة في غضون 3 أسابيع ، وشهر واحد ، وسنة واحدة ، وما زلت بدون اتصال ، والوصول إلى كل المحتوى. - ماكسيم هويغ ، رئيس BETC Digital Studio

حسنًا ، هذا رائع ، أخبرني كيف أفعل ذلك بعد ذلك.

حسنًا ، لنبدأ ببعض المتطلبات الأساسية:

  • من أجل استخدام SWs ، يجب عليك تمكين https على موقع الويب الخاص بك.
  • يجب أن يكون لديك فهم جيد لكيفية عمل وعود JavaScript.
  • تعمل SWs في جميع المتصفحات الحديثة باستثناء صديقنا IE.
  • حتى لو كانت JavaScript ، فإنها تعمل في سياق العاملين على الويب. مما يعني: لا يوجد DOM ، وتعمل خارج الموضوع الرئيسي.
  • فهم كيفية عمل قواعد البيانات.
  • يجب أن يكون رمز عامل الخدمة في ملف JavaScript منفصل. مثال: service-worker.js

دورة حياة عمال الخدمة

لتتمكن من العمل ، يجب تسجيل البرامج في التطبيق الخاص بك ، ثم تثبيتها. يجب عليك التحقق مما إذا كانت SWs متوافقة مع عميلك قبل القيام بذلك.

1) التسجيل

إذا كان ذلك متاحًا ، فقم بتسجيل ملف SW الخاص بك. سيعود بوعد ، حتى تتمكن من التعامل مع الأخطاء. يمكنك أيضًا تحديد نطاق عناوين url في خيارات التسجيل.

2) التثبيت

عمال الخدمة على أساس الحدث. باختصار ، يجب عليك إرفاق عمليات الاسترجاعات بالأحداث ، كما تفعل مع element.addEventListener. الحدث الأول الذي تحتاج إلى استخدامه هو حدث التثبيت. هذا هو الوقت المناسب لتخزين جميع مواردك الحيوية مؤقتًا مثل Javascript و CSS و HTML و Images ... هذا هو المكان الذي تنضم فيه Cache API إلى الحفلة!

ثم افتح الطريقة أو أنشئ ذاكرة تخزين مؤقت مرتبطة بالاسم المطلوب. يجب أن يتم تغليف الوعد المرتجع في event.waitUntil () ، مما يؤخر تثبيت عامل الخدمة حتى يتم الوفاء بالوعد. خلاف ذلك ، يفشل التثبيت وسيتم تجاهل عامل الخدمة.

الرجاء توخي الحذر مع التخزين المؤقت: مساحة تخزين المستخدم ثمينة ، لذا لا تسيء استخدامها. كن حذرًا أيضًا: لا يمكن استدعاء حدث التثبيت إلا مرة واحدة ، وستحتاج إلى تحديث SW لتعديله.

3) التنشيط

هذا واحد خفي بعض الشيء.

بمجرد اكتمال التثبيت ، لا يكون عامل الخدمة نشطًا بعد: نحن في حالة التثبيت.

في هذه الحالة ، ينتظر للسيطرة على الصفحة. ثم ينتقل إلى المرحلة التالية في دورة الحياة ، وهي مرحلة التنشيط.

تكون مرحلة التنشيط سهلة عند تحديث برنامج SW. الحالة الأكثر شيوعًا هي مسح ذاكرة التخزين المؤقت لبرنامج SW السابق.

يرجى ملاحظة أنه بمجرد التثبيت بنجاح ، سينتظر العامل المحدث حتى يتحكم العامل الحالي في صفر من العملاء (يتداخل العملاء أثناء التحديث).

يمنع self.skipWaiting () الانتظار ، مما يعني أن عامل الخدمة ينشط بمجرد الانتهاء من التثبيت. ميزة هذه الطريقة هي أنه يمكنك استلام أحداث الجلب بشكل أسرع.

لا يهم حقًا عند استدعاء skipWaiting () ، طالما أنه أثناء الانتظار أو قبله. من الشائع تسميتها في حدث التثبيت.

تفو! لنأخذ استراحة ونلخص ما رأيناه:

  • عمال الخدمة هم أجزاء من JavaScript تتيح ميزات غير متصلة بالإنترنت مثل التخزين المؤقت.
  • استكشفنا دورة حياة البرامج: التسجيل ، التثبيت ، التنشيط
  • لقد تعلمنا كيفية تنفيذ حالات الاستخدامات الشائعة مثل: تخزين الموارد مؤقتًا ومسح ذاكرة التخزين المؤقت باستخدام واجهة برمجة تطبيقات ذاكرة التخزين المؤقت.
  • لقد رأينا أن self.skipWaiting و self.clients.claim يسمحان لنا بتنشيط SWs بشكل أسرع من أجل رصد الأحداث بشكل أسرع.

حسنًا ، نتحرك على طول ...

4) الجلب

يسمح لنا حدث الجلب باعتراض طلبات الشبكة وتخزين الردود أو تخصيصها.

الميزة الرئيسية لهذا الخطاف هي إرجاع الموارد المخزنة مؤقتًا بدلاً من إجراء مكالمة طلب. يجب عليك إلقاء نظرة على Fetch API للتعامل مع استدعاءات الطلب.

لا يمكننا تغطية جميع الاحتمالات التي يقدمها عمال الخدمة في مقال واحد. ومع ذلك ، فإنني أشجعك على النظر في ما هو ممكن: مخصص 404 ، واجهة برمجة تطبيقات مزامنة الخلفية للتحليلات غير المتصلة بالإنترنت ، قوالب من جانب ServiceWorker…. المستقبل يبدو مثيرا!

لقد رأينا حتى الآن ما هو عامل الخدمة ، وكيف يعمل خلال دورة حياته ، وحالات الاستخدام الأكثر شيوعًا من خلال اللعب باستخدام Cache and Fetch API. تمنحنا هاتان واجهتا برمجة التطبيقات طريقة جديدة تمامًا لإدارة موارد عناوين URL القابلة للتوجيه في المتصفح. لإكمال هذا الدليل ، دعنا نرى كيف يمكننا تخزين أنواع أخرى من البيانات ، على سبيل المثال JSON للمستخدم من قاعدة البيانات الخاصة بك.

تخزين البيانات المخصصة مع IndexedDB

تتمثل الإرشادات العامة لتخزين البيانات في أنه يجب تخزين موارد URL القابلة للتوجيه مع واجهة ذاكرة التخزين المؤقت ، ويجب تخزين البيانات الأخرى في قاعدة بيانات مفهرسة. على سبيل المثال ، يجب تخزين ملفات HTML و CSS و JS في ذاكرة التخزين المؤقت ، بينما يجب تخزين بيانات JSON في IndexedDB. لاحظ أن هذه مجرد إرشادات وليست قاعدة ثابتة. (مصدر)

باختصار ، سنرى متى لا يجب عليك استخدام Cache API ولكن IndexedDB بدلاً من ذلك. كلاهما غير متزامن ويمكن الوصول إليه في عمال الخدمة والعاملين على الويب وواجهة النافذة. والخبر السار هو أنه مدعوم جيدًا ، حتى في الإصدارات الحديثة من IE.

IndexedDB هي قاعدة بيانات NoSQL. يتم تخزين بيانات IndexedDB كأزواج ذات قيمة رئيسية في مخازن الكائنات بدلاً من الجداول. يمكن أن تحتوي قاعدة بيانات واحدة على أي عدد من مخازن الكائنات. عندما يتم تخزين قيمة في ملف تخزين العناصر ، يتم ربطها بمفتاح. تبدو هكذا:

كلاسيكية جميلة ، أليس كذلك؟ الشيء الرئيسي الذي يجب فهمه هو مفهوم المسار الرئيسي. يخبر المتصفح بالمفتاح الذي يجب استخدامه لاستخراج البيانات من مخزن العناصر أو الفهرس.

في هذا المثال ، يمكننا أن نرى أن مسارنا الرئيسي هو معرف الخاصية ، ويتم تعريفه في السطر 10. ثم نعيد جميع العناصر من قاعدة البيانات. هذه حالة استخدام أساسية جدًا ، لذلك إذا كنت تريد معرفة المزيد حول كيفية عمل قاعدة البيانات المفهرسة ، أنصحك بقراءة هذه المقالة الممتازة.

استنتاج

يعد الاستفادة من الويب دون اتصال بالإنترنت أمرًا رائعًا لتجربة المستخدم ، وقد بدأت بعض الشركات في الاستفادة منه. يعتمد في الغالب على عمال الخدمة ، نصوص JavaScript التي تعمل في خلفية موقع الويب الخاص بك.

لقد رأينا كيفية استخدامها خلال دورة حياة عامل الخدمة وما يمكنك القيام به باستخدام Cache and Fetch API. الاحتمالات لا حدود لها تقريبا. لذا كن مبدعًا ولا تكن جشعًا جدًا في مساحة تخزين الجهاز.

يمكنك حتى استخدام قواعد البيانات في وضع عدم الاتصال: هذا ما تم إنشاء قاعدة البيانات المفهرسة من أجله. تعد إمكانات وضع عدم الاتصال هذه بالتأكيد جزءًا من مستقبل الويب ، لذا فهي تعمل جيدًا مع النوع الجديد من مواقع الويب التي تنشئها Google: تطبيقات الويب التقدمية.

قراءة متعمقة:

  • كتاب الطبخ غير المتصل: //developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/
  • PWA وغير متصل: //developers.google.com/web/ilt/pwa/lab-offline-quickstart
  • معمل: ملفات التخزين المؤقت مع عامل الخدمة: //developers.google.com/web/ilt/pwa/lab-caching-files-with-service-worker
  • دورة حياة عامل الخدمة: //developers.google.com/web/fundamentals/primers/service-workers/lifecycle
  • تبسيط دورة حياة عامل الخدمة: //scotch.io/tutorials/demystifying-the-service-worker-lifecycle
  • تنشيط عمال الخدمة بشكل أسرع: //davidwalsh.name/service-worker-claim
  • البيانات الحية في عامل الخدمة: //developers.google.com/web/ilt/pwa/live-data-in-the-service-worker
  • مفهرسة ديسيبلالمفاهيم الأساسية: //developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB
  • الشروع في العمل مع التخزين المستمر دون اتصال مع قاعدة بيانات مفهرسة: //itnext.io/getting-started-with-persistent-offline-storage-with-indexeddb-1af66727246c