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

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

نظرة عامة

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

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

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

استخدِم البيانات المحلية كلما أمكن ذلك.

عند استخدام موارد من الإنترنت، يمكن استخدام XMLHttpRequest للحصول على الخدمة، ثم حفظ البيانات. محليًا. يمكنك استخدام Chrome Storage API أو IndexedDB أو Filesystem API لحفظ البيانات على جهازك.

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

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

لنفترض أنّه يمكن إغلاق تطبيقك في أي وقت.

حفظ حالة التطبيق (محليًا أو عن بُعد، إن أمكن) حتى يتمكن المستخدمون من مواصلة العمل من أي مكان وتوقّفوا عن المشاهدة

اختبِر تطبيقك بدقة.

تأكَّد من أنّ تطبيقك يعمل بشكل جيد في كلّ من السيناريوهات الشائعة والصعبة.

القيود الأمنية

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

• لأنّ البيانات المحلية مرئية على جهاز المستخدم ولا يمكن تشفيرها بأمان، لأنها حساسة أن تظل البيانات على الخادم. على سبيل المثال، لا تخزِّن كلمات المرور أو أرقام بطاقات الائتمان محليًا.
• يجب أن تكون كل JavaScript التي ينفّذها التطبيق ضمن حزمة التطبيق. ولا يمكن أن تكون مضمّنة.

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

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

لتوفير إطار 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:;

جارٍ تحديد الوضع "بلا اتصال بالإنترنت"

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

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

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

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

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

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

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

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

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

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

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

الاختبار

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

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

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