اول آفلاین

از آنجایی که اتصالات اینترنتی ممکن است ورقه‌ای باشند یا وجود نداشته باشند، ابتدا باید آفلاین را در نظر بگیرید: برنامه خود را طوری بنویسید که گویی هیچ اتصال اینترنتی ندارد. هنگامی که برنامه شما به صورت آفلاین کار می کند، هر عملکرد شبکه ای را که نیاز دارید اضافه کنید تا برنامه شما هنگام آنلاین بودن، کارهای بیشتری انجام دهد. نکاتی در مورد اجرای برنامه آفلاین فعال خود را بخوانید.

بررسی اجمالی

برنامه های Chrome موارد زیر را به صورت رایگان دریافت می کنند:

  • فایل‌های برنامه شما - همه جاوا اسکریپت، CSS، و فونت‌های آن، به‌علاوه سایر منابع مورد نیاز (مانند تصاویر) - قبلاً دانلود شده‌اند .
  • برنامه شما می‌تواند با استفاده از Chrome Storage API، مقدار کمی داده را ذخیره و به صورت اختیاری همگام‌سازی کند .
  • برنامه شما می‌تواند با گوش دادن به رویدادهای آنلاین و آفلاین، تغییرات در اتصال را تشخیص دهد .

اما این توانایی ها برای تضمین عملکرد آفلاین برنامه شما کافی نیستند. برنامه آفلاین شما باید از این قوانین پیروی کند:

در صورت امکان از داده های محلی استفاده کنید.
هنگام استفاده از منابع اینترنت، از XMLHttpRequest برای دریافت آن استفاده کنید و سپس داده ها را به صورت محلی ذخیره کنید. می‌توانید از Chrome Storage API، IndexedDB یا Filesystem API برای ذخیره داده‌ها به صورت محلی استفاده کنید.
رابط کاربری برنامه خود را از داده های آن جدا کنید.
جداسازی رابط کاربری و داده ها نه تنها طراحی برنامه شما را بهبود می بخشد و کار فعال کردن استفاده آفلاین را آسان می کند، بلکه به شما امکان می دهد نماهای دیگری از داده های کاربر ارائه دهید. یک چارچوب MVC می تواند به شما کمک کند رابط کاربری و داده ها را جدا نگه دارید.
فرض کنید برنامه شما می تواند در هر زمانی بسته شود.
وضعیت برنامه را ذخیره کنید (چه به صورت محلی و چه از راه دور، در صورت امکان) تا کاربران بتوانند از هر کجا که کار را متوقف کردند، ادامه دهند.
برنامه خود را به طور کامل تست کنید.
مطمئن شوید که برنامه شما هم در سناریوهای رایج و هم در سناریوهای دشوار به خوبی کار می‌کند.

محدودیت های امنیتی

برنامه‌های Chrome در جایی که می‌توانند منابع خود را قرار دهند محدود هستند:

  • از آنجایی که داده های محلی در دستگاه کاربر قابل مشاهده است و نمی توان آنها را به صورت ایمن رمزگذاری کرد، داده های حساس باید روی سرور باقی بمانند . به عنوان مثال، رمز عبور یا شماره کارت اعتباری را به صورت محلی ذخیره نکنید.
  • تمام جاوا اسکریپتی که برنامه اجرا می کند باید در بسته برنامه باشد. نمی تواند درون خطی باشد.

  • همه سبک‌ها ، تصاویر و فونت‌های CSS می‌توانند در ابتدا یا در بسته برنامه یا در یک URL راه دور قرار گیرند. اگر منبع از راه دور است، نمی توانید آن را در HTML خود مشخص کنید. در عوض، داده ها را با استفاده از XMLHttpRequest دریافت کنید ( به ارجاع منابع خارجی مراجعه کنید). سپس به داده‌ها با URL blob مراجعه کنید یا (بهتر است) ذخیره کنید و سپس داده‌ها را با استفاده از Filesystem API بارگیری کنید.

با این حال، می توانید منابع رسانه ای بزرگ مانند فیلم ها و صداها را از سایت های خارجی بارگیری کنید. یکی از دلایل این استثنا از قاعده این است که عناصر <video> و <audio> رفتار بازگشتی خوبی دارند زمانی که یک برنامه اتصال محدود یا بدون اتصال دارد. دلیل دیگر این است که واکشی و ارائه رسانه با URL های XMLHttpRequest و blob در حال حاضر اجازه پخش جریانی یا بافر جزئی را نمی دهد.

برای ارائه یک iframe sandboxed، می توانید یک تگ <webview> ایجاد کنید. محتویات آن می‌تواند از راه دور باشد، اما دسترسی مستقیم به APIهای برنامه 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

فرض بر این است که برنامه شما به خوبی در حالت آفلاین رفتار می کند. اگر اینطور نیست، باید این واقعیت را تبلیغ کنید تا زمانی که کاربر آفلاین است، نماد راه‌اندازی آن کمرنگ شود. برای انجام این کار، offline_enabled در فایل مانیفست برنامه روی false تنظیم کنید:

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

ذخیره داده ها به صورت محلی

جدول زیر گزینه های شما را برای ذخیره داده ها به صورت محلی نشان می دهد (همچنین به مدیریت داده ها مراجعه کنید).

API بهترین استفاده یادداشت
Chrome Storage API مقادیر کمی از داده های رشته ای برای تنظیمات و حالت عالی است. آسان برای همگام سازی از راه دور (اما شما مجبور نیستید). به دلیل سهمیه بندی، برای حجم بیشتری از داده ها خوب نیست.
IndexedDB API داده های ساخت یافته جستجوی سریع روی داده ها را فعال می کند. با مجوز ذخیره نامحدود استفاده کنید.
API سیستم فایل چیز دیگری مد نظر دارید یک منطقه sandbox را فراهم می کند که در آن می توانید فایل ها را ذخیره کنید. با مجوز ذخیره نامحدود استفاده کنید.

ذخیره داده ها از راه دور

به طور کلی، نحوه ذخیره داده ها از راه دور به شما بستگی دارد، اما برخی از چارچوب ها و API ها می توانند کمک کنند (به معماری MVC مراجعه کنید). اگر از Chrome Storage API استفاده می‌کنید، هر زمان که برنامه آنلاین باشد و کاربر به سیستم Chrome وارد شود، همه داده‌های قابل همگام‌سازی به‌طور خودکار همگام‌سازی می‌شوند. اگر کاربر وارد سیستم نشده باشد، از او خواسته می شود که وارد سیستم شود. با این حال، توجه داشته باشید که اگر کاربر برنامه شما را حذف نصب کند، داده های همگام سازی شده کاربر حذف می شود. {سوال: درست است؟}

پس از حذف نصب برنامه، داده های کاربران را حداقل 30 روز ذخیره کنید تا کاربران در صورت نصب مجدد برنامه شما، تجربه خوبی داشته باشند.

جداسازی UI از داده ها

استفاده از فریم ورک MVC می تواند به شما در طراحی و پیاده سازی اپلیکیشن خود کمک کند تا داده ها کاملاً از دید برنامه روی داده ها جدا باشند. برای دیدن لیستی از چارچوب های MVC به معماری MVC مراجعه کنید.

اگر برنامه شما با یک سرور سفارشی صحبت می کند، سرور باید به شما داده بدهد، نه تکه هایی از HTML. به API های RESTful فکر کنید.

هنگامی که داده های شما از برنامه شما جدا می شود، ارائه نماهای متناوب از داده ها بسیار آسان تر است. به عنوان مثال، ممکن است یک نمای وب سایت از هر داده عمومی ارائه دهید. نه تنها وقتی کاربر شما از Chrome دور است، یک نمای وب سایت می تواند مفید باشد، بلکه می تواند موتورهای جستجو را قادر به یافتن داده ها کند.

آزمایش کردن

مطمئن شوید که برنامه شما در شرایط زیر به خوبی کار می کند:

  • برنامه نصب می شود و بلافاصله آفلاین می شود. به عبارت دیگر اولین استفاده از اپلیکیشن آفلاین است.
  • این برنامه بر روی یک رایانه نصب شده و سپس با رایانه دیگری همگام سازی می شود.
  • برنامه حذف نصب می شود و بلافاصله دوباره نصب می شود.
  • این برنامه به طور همزمان روی دو رایانه با نمایه یکسان اجرا می شود. وقتی یک رایانه آفلاین می‌شود، کاربر کارهای زیادی را روی آن رایانه انجام می‌دهد و سپس رایانه دوباره آنلاین می‌شود، برنامه باید رفتار معقولی داشته باشد.
  • این برنامه دارای اتصال متناوب است و اغلب بین آنلاین و آفلاین جابجا می شود.

همچنین مطمئن شوید که برنامه هیچ داده حساس کاربر (مانند رمزهای عبور) را در دستگاه کاربر ذخیره نمی کند.