بلا اتصال بالإنترنت أولاً

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

نظرة عامة

تحصل تطبيقات Chrome على ما يلي مجانًا:

  • سيتم تنزيل ملفات تطبيقك، وجميع برامج JavaScript وCSS والخطوط، بالإضافة إلى الموارد الأخرى التي يحتاجها التطبيق (مثل الصور).
  • يمكن لتطبيقك حفظ كميات صغيرة من البيانات ومزامنتها اختياريًا باستخدام Chrome Storage API.
  • يمكن لتطبيقك اكتشاف التغييرات في الاتصال من خلال الاستماع إلى الأحداث سواء على الإنترنت أو بلا إنترنت.

ولكن هذه الإمكانات ليست كافية لضمان عمل تطبيقك بلا اتصال بالإنترنت. يجب أن يتّبع التطبيق الذي تم تفعيل وضع عدم الاتصال به القواعد التالية:

استخدِم البيانات المحلية كلما أمكن ذلك.
عند استخدام موارد من الإنترنت، استخدِم XMLHttpRequest للحصول عليها، ثم احفظ البيانات محليًا. يمكنك استخدام واجهة برمجة التطبيقات Chrome Storage API أو IndexedDB أو Filesystem API لحفظ البيانات على الجهاز.
فصل واجهة مستخدم التطبيق عن بياناتها:
لا يؤدي الفصل بين واجهة المستخدم والبيانات إلى تحسين تصميم التطبيق وتسهيل مهمة تفعيل الاستخدام بلا إنترنت فحسب، بل يتيح لك أيضًا توفير طرق عرض أخرى لبيانات المستخدم. يمكن أن يساعدك إطار عمل MVC في الفصل بين واجهة المستخدم والبيانات.
لنفترض أنّه يمكن إغلاق تطبيقك في أي وقت.
احفظ حالة التطبيق (محليًا أو عن بُعد إن أمكن) حتى يتمكّن المستخدمون من المتابعة من حيث توقّفوا.
اختبِر تطبيقك بدقة.
تأكَّد من أنّ تطبيقك يعمل بشكل جيد في السيناريوهات الشائعة والصعبة.

قيود الأمان

يقتصر استخدام تطبيقات Chrome على الأماكن التي يمكنهم فيها وضع مواردهم:

  • نظرًا لأن البيانات المحلية مرئية على جهاز المستخدم ولا يمكن تشفيرها بأمان، يجب أن تظل البيانات الحساسة على الخادم. على سبيل المثال، يُحظر تخزين كلمات المرور أو أرقام بطاقات الائتمان على الجهاز.
  • يجب أن تكون جميع JavaScript التي ينفّذها التطبيق في حزمة التطبيق. ولا يمكن أن يكون مضمَّنًا.
  • يمكن وضع جميع أنماط CSS والصور والخطوط في البداية إما في حزمة التطبيق أو في عنوان URL بعيد. إذا كان المورد بعيدًا، فلا يمكنك تحديده في HTML. بدلاً من ذلك، احصل على البيانات باستخدام XMLHttpRequest (انظر الإشارة إلى الموارد الخارجية). بعد ذلك، يمكنك إما الرجوع إلى البيانات باستخدام عنوان URL ذي كائن ثنائي كبير (blob) أو (الأفضل من ذلك) حفظ البيانات ثم تحميلها باستخدام Filesystem API.

ومع ذلك، يمكنك تحميل موارد الوسائط الكبيرة، مثل الفيديوهات والمقاطع الصوتية من مواقع إلكترونية خارجية. أحد أسباب هذا الاستثناء من القاعدة هو أنّ العنصرَين <video> و<audio> يتّبعان سلوكًا احتياطيًا جيدًا عندما يكون الاتصال محدودًا أو غير متوفّر في التطبيق. هناك سبب آخر هو أنّ استرجاع الوسائط وعرضها باستخدام عناوين URL ذات الصلة بسياسة XMLHttpRequest وblob لا يسمح في الوقت الحالي بالبث أو بالتخزين المؤقت الجزئي.

لتوفير إطار iframe في وضع الحماية، يمكنك إنشاء علامة <webview>. ويمكن أن يكون محتواه عن بُعد، ولكن لا يمكنه الوصول مباشرةً إلى واجهات برمجة تطبيقات تطبيقات Chrome (راجِع تضمين صفحات الويب الخارجية).

يتم فرض بعض القيود على تطبيقات Chrome من خلال سياسة أمان المحتوى (CSP) التي تكون دائمًا كما يلي ولا يمكن تغييرها لتطبيقات Chrome:

default-src 'self';
connect-src * data: blob: filesystem:;
style-src 'self' blob: data: filesystem: 'unsafe-inline';
img-src 'self' blob: data: filesystem:;
frame-src 'self' blob: data: filesystem:;
font-src 'self' blob: data: filesystem:;
media-src * data: blob: filesystem:;

جارٍ تحديد بلا اتصال_enabled

من المفترض أنّ تطبيقك يعمل بشكل جيد بلا اتصال بالإنترنت. وإذا لم يكن الأمر كذلك، يجب عليك الإعلان عن هذه الحقيقة، بحيث يتم تعتيم أيقونة الإطلاق عندما يكون المستخدم غير متصل. لإجراء ذلك، اضبط offline_enabled على false في ملف بيان التطبيق:

{
  "name": "My app",
  ...
  "offline_enabled": false,
  ...
}

حفظ البيانات محليًا

يعرض الجدول التالي خيارات حفظ البيانات محليًا (راجع أيضًا إدارة البيانات).

APIأفضل استخدامNotes
واجهة برمجة تطبيقات Chrome Storageكميات صغيرة من بيانات السلسلةوهو مثالي للإعدادات والحالة. يمكنك المزامنة بسهولة عن بُعد (ولكن لا داعي للقلق). غير مناسب لكمية أكبر من البيانات، بسبب الحصص.
واجهة برمجة التطبيقات IndexedDBالبيانات المنظَّمةتفعيل عمليات البحث السريع على البيانات. استخدِم التطبيق من خلال إذن تخزين غير محدود.
واجهة برمجة تطبيقات نظام الملفاتأي نفقات أخرىيوفّر هذا الإعداد منطقة ذات وضع حماية، حيث يمكنك تخزين الملفات. استخدِم التطبيق من خلال إذن تخزين غير محدود.

حفظ البيانات عن بُعد

بشكل عام، يعود إليك تحديد طريقة حفظ البيانات عن بُعد، ولكن يمكن أن تساعدك بعض أطر العمل وواجهات برمجة التطبيقات (راجِع بنية MVC). إذا كنت تستخدم Chrome Storage API، ستتم مزامنة جميع البيانات القابلة للمزامنة تلقائيًا عندما يكون التطبيق متصلاً بالإنترنت وسجَّل المستخدم الدخول إلى Chrome. إذا لم يكن المستخدم مسجّلاً الدخول، ستتم مطالبته بتسجيل الدخول. ومع ذلك، يُرجى ملاحظة أنّه يتم حذف بيانات المستخدم التي تمت مزامنتها إذا ألغى المستخدم تثبيت تطبيقك. {QUESTION: true?}

احرص على حفظ بيانات المستخدمين لمدة 30 يومًا على الأقل بعد إلغاء تثبيت تطبيقك، حتى يحصل المستخدمون على تجربة جيدة في حال إعادة تثبيت التطبيق.

فصل واجهة المستخدم عن البيانات

يمكن أن يساعدك استخدام إطار عمل MVC في تصميم تطبيقك وتنفيذه بحيث تكون البيانات منفصلة تمامًا عن طريقة عرض التطبيق على البيانات. راجِع بنية MVC للحصول على قائمة بأُطر عمل MVC.

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

بعد فصل بياناتك عن تطبيقك، يصبح من الأسهل توفير طرق عرض بديلة للبيانات. على سبيل المثال، يمكنك توفير طريقة عرض للموقع الإلكتروني لأي بيانات علنية. لا يمكن أن تكون طريقة عرض الموقع الإلكتروني مفيدة فقط عندما يكون المستخدم بعيدًا عن Chrome، ولكن يمكنها أيضًا تمكين محرّكات البحث من العثور على البيانات.

الاختبار

عليك التأكّد من أنّ تطبيقك يعمل بشكل جيد في ظل الظروف التالية:

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

التأكّد أيضًا من أنّ التطبيق يحفظ أي بيانات حساسة للمستخدم (مثل كلمات المرور) على جهاز المستخدم