كيفية بناء مواقع الويب التي تعمل دون الإنترنت باستخدام الزاوي وعمال الخدمة

المقدمة

في هذه المقالة ، سوف تتعلم نظرية كيفية عمل عمال الخدمة. أقدم تعليميًا قصيرًا لتطبيق هذه النظرية لإنشاء موقع ويب يعمل بدون الإنترنت. أخيرًا ، سأناقش ما يعنيه هذا بالنسبة لك ومستقبل الإنترنت.

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

هذا بلوق وظيفة متاحة أيضا على النحو التالي:

  • فيديو يوتيوب
  • سطح السفينة
  • تدوين صوتي

جدول المحتويات

  • المواقع غريبة
  • النظرية: كيف يعمل عمال الصيانة
  • التطبيق: البرنامج التعليمي حول كيفية بناء المواقع دون اتصال
  • المتطلبات الأساسية
  • تثبيت عامل الخدمة
  • الجزء 1 أ: بناء عامل الخدمة
  • إخراج عامل الخدمة
  • الجزء 1 ب: اختبار عامل الخدمة (# 2001441)
  • إنشاء خادم صغير
  • فحص طلبات الخادم
  • أين يتم حفظ الملفات؟
  • الجزء 2: حفظ البيانات الخارجية (الجزء الأول بوابة الوسم: pwa-tutorial-0.1)
  • حفظ مكالمات API الخارجية: # 8593ada
  • الجزء 3: إخطار المستخدمين بالتحديثات الجديدة (الجزء الثاني من Git Tag: pwa-tutorial-0.2)
  • الجزء 4: النشر (الجزء الثالث من Git Tag: pwa-tutorial-0.3)
  • خاتمة
  • الذي يحتاج تطبيقات المحمول
  • مستقبل المواقع
  • قراءة متعمقة

المواقع غريبة

أدركت شيئًا مؤخرًا جعلني أدرك حقًا مدى قوة العاملين في الخدمة. عندما يكون لديّ إنترنت ، يبدو أن هناك العديد من الأشياء التي لا نهاية لها تتنافس على انتباهي.

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

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

لنبدأ برسم تخطيطي بسيط. ما الذي تمثله الدائرتان في مخطط فين؟

دعني أعطيك تلميح. تعد Amazon و Alibaba و Facebook بعضًا من أكبر مواقع الويب في العالم ، حيث تخدم ملايين المستخدمين يوميًا. إليك بعض الإحصائيات لوضع الأشياء في سياقها المناسب لك:

  • علي بابا 25 مليار دولار في المبيعات في يوم واحد (يوم الفردي)
  • يستخدم 40٪ من عملاء الحوسبة السحابية خدمات Amazon Web Services بما في ذلك Apple و Netflix و CIA
  • 2.2 مليار شخص يستخدمون Facebook كل شهر ، و 700 مليون مستخدم على Instagram

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

قارن الآن بمواقع مثل Google Drive أو Atila.ca. لا يوجد لدى Atila.ca مليون مستخدم ، ولكن حتى إذا لم يكن لديك اتصال بالإنترنت ، فلا يزال بإمكانك استخدام الموقع. Google Drive هو موقع ويب آخر يعمل بشكل جيد. يمكنك بالفعل استخدام Google Drive حتى بدون الإنترنت. أعجبك كيفية استخدام تطبيق سطح المكتب مثل Microsoft Word. تعلم شيئا جديدا كل يوم على حق؟

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

تخيل لو كنت في مترو الانفاق للعمل دون الإنترنت. ليس لديك أي خدمة هاتف محمول. ولكن لا يزال بإمكانك مراجعة مراجعات المنتجات للعناصر الموجودة في عربة التسوق الخاصة بـ Amazon. أو أنت في رحلة طويلة بالطائرة. أثناء وجود هاتفك في وضع الطائرة ، يمكنك قراءة المقالات الأكثر شيوعًا من The New York Times. أو مقالاتك المفضلة في قائمة اخترت حفظها لاحقًا.

يمكنك أن ترى أن الإمكانات كبيرة وسهلة لبدء أحلام اليقظة. دعنا نعود إلى الواقع ونتعمق في نظرية كيف أن كل هذا ممكن.

النظرية: كيف يعمل عمال الصيانة

عامل الخدمة هو وكيل أو مراسلة بين متصفحك والإنترنت. عندما يسأل تطبيق الويب الخاص بك عن الموارد (الصور وملفات html و json API وغيرها) ، يحصل عامل الخدمة على ذلك نيابةً عنك دون الحاجة إلى طلب الإنترنت. من الناحية الحرفية ، إنه ملف Javascript يتم شحنه مع باقي التطبيق. يحتوي هذا الملف على رمز يخبر تطبيقك بكيفية اعتراض طلبات الشبكة والحصول عليها من ذاكرة التخزين المؤقت للشبكة.

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

  • أتش تي أم أل الملفات لعرض المحتوى
  • ملفات CSS للتصميم
  • شبيبة الملفات لمنطق التطبيق
  • الصور وغيرها من الأصول

عندما لا يعمل الإنترنت الخاص بك ، لا توجد وسيلة للمتصفح للاتصال بالشبكة لاسترداد الملفات اللازمة لعرض موقع الويب. لذلك فشلت وتحصل على "القفز الديناصورات" سيئة السمعة على جوجل كروم.

مع عمال الخدمة. في المرة الأولى التي تزور فيها موقعًا ، بالإضافة إلى المجموعة المعتادة من ملفات index.html ، و Styles.css ، و main.js ، إلخ ، التي يطلب منك ذلك ، يطلب المتصفح أيضًا ملف جافا سكريبت عامل خدمة من موقع الويب الخاص بك. ثم يتم تنزيل هذا الملف وحفظه في ذاكرة التخزين المؤقت للمتصفح. ثم يقوم ملف serviceworker بتنزيل جميع الملفات الموجودة في التطبيق الخاص بك وإصداراتها وتخزينها مؤقتًا لعرضها في وقت لاحق.

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

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

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

المتطلبات الأساسية

قبل البدء ، تأكد من تثبيت ما يلي

  • Node.js® و npm
  • تأكد من أن لديك عقدة 8.X أو أكبر (عقدة -v) و npm 5.x أو أكبر (npm -v)
  • تثبيت عالمي الزاوي CLI:
  • تثبيت npm -g @ angular / cli
  • متصفح Google Chrome (اختياري ، لكن مستحسن)
  • حساب Google (اختياري ، فقط إذا كنت تريد النشر إلى Firebase)

إطلاق المشروع

  • انتقل إلى https://github.com/atilatech/atila-web-app
  • قم بنسخ تطبيق الويب demo.atila.ca من Github: atila-web-app
  • تحقق من فرع pwa- تعليمي: git checkout pwa-tutorial
  • تحقق من التزام بدء البرنامج التعليمي: git checkout pwa-tutorial-0.0
  • تثبيت وحدات npm: تثبيت npm
  • بدء التطبيق !: نانوغرام تخدم -o

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

تثبيت عامل الخدمة

لتثبيت "عامل الخدمة" والوصول إلى كائنات "عامل الخدمة" المختلفة في تطبيقنا ، نحتاج إلى القيام بما يلي.

  1. تثبيت الوحدة النمطية الزاوي / serviceworker: تثبيت npm @ الزاوي / serviceworker
  2. يؤدي هذا إلى تثبيت حزمة npm تتضمن كائنات Javascript للعاملين في الخدمة والتي سنستخدمها في الخطوات المستقبلية
  3. أخبر angular-cli لبناء المشروع مع عامل الخدمة: ng set apps.0.serviceWorker = true
  4. أخبر CLI الزاوي بإنتاج ملف Javascript تلقائيًا يحتوي على الكود الخاص بعامل الخدمة عند إنشاء مشروع موضح في الخطوة التالية.
  5. تكوين عامل الخدمة الخاص بك في ngsw-config.json
  6. هذا يخبر عامل الخدمة لديك ، بالضبط ما هي الملفات التي ينبغي حفظها وكيف ينبغي حفظها
  7. الأصول: هي الملفات التي يتم تضمينها كجزء من التطبيق
  8. عند تحديث التطبيق ، يتم تحديث هذه الموارد أيضًا
  9. dataGroups: موارد خارجية لا يتم إصدارها مع التطبيق
  10. وضع التثبيت: ما هي استراتيجية التخزين المؤقت لاستخدامها عند رؤية هذا الملف لأول مرة
  11. UpdateMode: ما هي استراتيجية التخزين المؤقت التي يجب استخدامها عند تحديث الملف ، بعد تثبيته بالفعل
  12. استراتيجية التخزين المؤقت
  13. الجلب المسبق: احفظ هذه الملفات قبل أن نطلبها
  14. كسول: احفظ هذه الملفات بعد طلبها مرة واحدة على الأقل
  15. أضف ملف manifest.json وقم بالإشارة إليه في index.html

تكوين عامل الخدمة

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

الملف manifest.json

{
"الاسم": "أتيلا" ،
"اسم قصير": "Atila" ،
"start_url": "index.html" ،
"عرض": "مستقل" ،
"الرموز": [{
"src": "stocks / img / favicon-bg.png" ،
"الأحجام": "512 × 512" ،
"type": "image / png"
}]،
"background_color": "# 194f87" ،
"theme_color": "# 194f87"
}

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

تسجيل عامل الخدمة (# d2b186f)

الآن نحن بحاجة إلى إخبار تطبيقنا بالفعل بوجود عامل خدمة. لذلك نحن تسجيل وحدة عامل الخدمة في وحدة التطبيق لدينا.

// src / app.module.ts
استيراد {ServiceWorkerModule} من '@ الزاوي / عامل الخدمة' ؛
...
الواردات: [
...،
ServiceWorkerModule.register ('/ ngsw-worker.js'، {enable: environment.production})،]

ثم نسجل ملف عامل الخدمة إذا كان متصفحنا لديه دعم عامل خدمة ونحن في وضع الإنتاج.

// src / main.ts
if ('serviceWorker' in navigator && environment.production) {
console.log ("Service Worker in main.ts")؛
window.addEventListener ('load'، () => {
console.log ("on Page Load Service Worker in main.ts")؛
navigator.serviceWorker.register ('/ ngsw-worker.js'، {
نطاق: '/'،
})
.ثم (التسجيل => {
console.log ("اكتمال تسجيل عامل الخدمة main.ts" ، التسجيل) ؛
})؛
})؛

الجزء 1 أ: بناء عامل الخدمة

إخراج عامل الخدمة

بعد ذلك ، سنقوم ببناء المشروع: ng build --prod

دعنا نلقي نظرة على المجلد / dist لمعرفة الشكل الذي يبدو عليه بناء التطبيق مع عامل الخدمة.

إخراج عامل الخدمة: ngsw.json

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

خرج عامل الخدمة: ngsw-worker.js

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

الجزء 1 ب: اختبار عامل الخدمة (# 2001441)

إنشاء خادم صغير

  • يتم استخدام عمال الخدمة في سياق غير متصل بالإنترنت. نحتاج إلى خادم يمكنه محاكاة البيئات غير المتصلة بالإنترنت
  • تثبيت خادم HTTP npm
  • Npm تثبيت http-server@0.11.1 - حفظ ديف
  • بناء وتشغيل الخادم:
  • بناء نانوغرام --prod (اختياري)
  • http-server -p 8080 -c-1 dist

فحص طلبات الخادم

  • انتقل إلى علامة تبويب شبكة Chrome في devtools
  • قم بذلك قبل الذهاب إلى مضيف محلي!
  • افتح علامة تبويب جديدة
  • انقر بزر الماوس الأيمن فوق مكان فارغ على الشاشة
  • فحص> انتقل إلى علامة تبويب الشبكة
  • فتح http: // localhost: 8080 /

لاحظ أنه لا يوجد واي فاي في أعلى اليمين. تحقق من وحدة تحكم devtools: تفشل موارد الشبكة الخارجية مع 504 لكن ملفاتنا ناجحة (200).

أين يتم حفظ الملفات؟

افتح علامة تبويب التطبيق في Devtools وسترى قسم التخزين المؤقت المحلي. هذه هي "قاعدة البيانات" حيث يقوم عمال الخدمة بحفظ ملفاتك. أن هناك 2 الجداول. واحد الذي يحتوي على الموارد الفعلية احتياجات التطبيق لدينا. جدول تجزئة آخر به مفاتيح تجزئة تشير إلى كل اسم للملف ، كما رأينا في ملف ngsw.json. هذا هو! لديك الآن تطبيق ويب أول دون اتصال بسيط ولكنه وظيفي. تابع الجزء 2 لإضافة المزيد من الميزات الرائعة.

الجزء 2: حفظ البيانات الخارجية (الجزء الأول بوابة الوسم: pwa-tutorial-0.1)

لماذا لا تعمل أي من واجهات برمجة التطبيقات؟

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

  1. الملف manifest.json
  2. Ngsw-config.json
  3. App.module.ts

يمكنك رؤية فشل طلبات الشبكة في علامة تبويب شبكة أدوات dev.

حفظ مكالمات واجهة برمجة التطبيقات الخارجية: التهيئة (Github Diff)

الآن سنقوم بتهيئة ngsw-config.json لدينا لتخزين عناوين URL لواجهة برمجة التطبيقات الخارجية أيضًا. خياران للتخزين المؤقت:

  1. نضارة: انتقل إلى الشبكة أولاً ، إذا كان مفقودًا ، فانتقل إلى
  2. الأداء: انتقل إلى ذاكرة التخزين المؤقت أولاً ، ثم انتقل إلى الشبكة

حفظ مكالمات API الخارجية: # 8593ada

قد تحتاج إلى استخدام عنوان URL منفصل يتيح للتطبيق الخاص بك الوصول إليه عبر CORS. سنستخدم خدمة JSON خاصة لمحاكاة ("وهمية") واجهة برمجة التطبيقات الخاصة بالمدونة الخاصة بنا. ليس لدينا إذن لاستخدام واجهة برمجة تطبيقات Atila الرسمية

  • تغيير المنح الدراسيةالخدمة.
  • انتقل إلى src / app / _service / studenthip.service.ts # L47
  • تغيير: this.http.post ($ {this.scholarshipsPreviewUrl}؟ page = $ {page} /، form_data) إلى: this.http.get (https://api.myjson.com/bins/dx1dc)
  • تغيير BlogPostService.getBySlug:
  • انتقل إلى src / app / _service / blog-post.service.ts # L25
  • تغيير: this.http.get ($ {this.blogUrl} blog / $ {اسم المستخدم} / $ {slug} /) إلى: this.http.get (https://api.myjson.com/bins/v5ow0)

الجزء 3: إخطار مستخدمي التحديثات الجديدة (الجزء الثاني من بوابة: pwa-tutorial-0.2))

عند توفر إصدار جديد من الشبكة ، يظل عامل الخدمة يخدم الإصدار القديم في ذاكرة التخزين المؤقت لتوفير الوقت

  • أضف ملفك الشخصي إلى صفحة الفريق: src / app / team / team.component.ts
  • أضف صورتك وبعض المعلومات في صفيف بيانات الفريق
  • إذا قمت بإعادة إنشاء المشروع وأعدت تشغيل الخادم ، فستلاحظ أن ملفك الشخصي لم يظهر بعد.
  • يمكننا إضافة وجبة خفيفة لإعلام المستخدم بالتحديثات الجديدة
  • npm install @ angular / material @ 5.1.1 - حفظ (قد يكون لديك هذا بالفعل)
  • ثم نقوم بإنشاء swUpdate للاستماع للحصول على التحديثات من SW وتحديثها في حالة توفر إصدار جديد. Github Diff
// src / app / app.component.ts
    
استيراد {SwUpdate} من "@ الزاوي / عامل الخدمة" ؛
...
    مُنشئ (... ، swUpdate SWUpdate ،)
...
ngOnInit () {
إذا كان هذا صحيحا) {
// تحقق من عامل الخدمة لمعرفة ما إذا كان الإصدار الجديد من التطبيق متاحًا أم لا
if (this.swUpdate.isEnabled) {
this.swUpdate.available.subscribe (() => {
const snackBarRef = this.snackBar.open ('إصدار جديد متوفر' ، 'تحميل إصدار جديد') ؛
snackBarRef.onAction (). الاشتراك (
() => {
location.reload ()؛
})؛
})؛
}
}
}

إعادة بناء وحجز التطبيق الخاص بك

الجزء 4: النشر (الجزء الثالث من Git Tag: pwa-tutorial-0.3)

نشر على استضافة Firebase

لمعرفة تأثير عامل الخدمة ، يجب نشره على موقع ويب حقيقي. أنا أحب استضافة Firebase. يمكنك نقل تطبيق ويب من مضيفك المحلي إلى موقع ويب مباشر في أقل من 5 دقائق مع بضع خطوات بسيطة. لقد كنت أقوم بذلك منذ عامين تقريبًا وما زلت متأثرًا بمدى سهولة هذه العملية. في الآونة الأخيرة ، كنت ألعب مع AWS S3 Static لاستضافة المواقع. هذا بديل جيد آخر يمكنك النظر إليه:

متطلبات النشر:

  1. إنشاء حساب جوجل
  2. إنشاء حساب firebase ومشروع firebase
  3. قم بتثبيت أدوات firebase على مستوى العالم: npm install -g firebase-tools@4.2.0
  4. تسجيل الدخول إلى firebase: تسجيل الدخول firebase
  5. تهيئة Firebase Repo: firebase init
  6. اختر الإعدادات التالية:
  7. اختيار استضافة كنوع المشروع
  8. تغيير المجلد العمومي إلى dist /
  9. تكوين كتطبيق صفحة واحدة
  10. هل تريد استبدال idnex.html؟ لا
  11. نشر! نشر Firebase
  12. تفضل بزيارة عنوان URL في إخراج سطر الأوامر لرؤية تطبيقك

هذا هو! تهانينا ، لديك الآن موقع ويب يمكنه العمل بدون الإنترنت.

خاتمة

الذي يحتاج تطبيقات المحمول

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

  1. إن الاضطرار إلى الحفاظ على مجموعتي برمجة منفصلة لنظامي Android و IOS أمر مؤلم: مجموعتان من المستخدمين ، مجموعتان من المطورين ، مجموعتان من المشاكل. (أشياء مثل Flutter و Ionic رائعة ، لكنني لا أعتقد أنها تعالج القضية الأساسية المتمثلة في جهازي كود منفصلين.)
  2. يستخدم معظم الأشخاص التطبيقات الخمسة نفسها فقط يوميًا ، لذلك سيكون من الصعب جدًا إقناعهم بتنزيل تطبيق آخر.
  3. الموافقة والتوزيع من خلال Apple App Store وحراس بوابات متجر Google Play ليست ممتعة.

تتضمن بعض الحجج الأساسية ضد تطبيقات الويب أشياء مثل:

  1. إمكانية الوصول دون اتصال
  2. أفضل مشاركة المستخدم بسبب دفع الإخطارات
  3. الوصول إلى ميزات الأجهزة الأصلية مثل الكاميرات

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

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

أعتقد أن مستقبل الإنترنت سيشهد المزيد من التطبيقات التي يتم توزيعها من خلال المتصفحات وعناوين URL من التطبيقات الأصلية ومتجر التطبيقات. في حالة ساخرة من التاريخ يعيد نفسه ، هذا في الواقع ارتداد إلى ظهور الإنترنت في التسعينيات عندما كانت شركات مثل Netscape و "start .com" المختلفة تعمل بشكل جيد جدًا على توزيع برامجها عبر الويب.

مستقبل المواقع

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

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

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

يقوم محرّر مستندات Google بهذا بشكل أفضل. محرّر مستندات Google هو Microsoft Word و Powerpoint و Excel ولكنه أفضل ومُصمم من أجل Chrome. لا تحتاج إلى الإنترنت لاستخدام Microsoft Word. نظرًا لأن محرّر مستندات Google يعمل في مستعرض ويب ، يجب أن تكون قادرًا على استخدام محرّر مستندات Google للوصول إلى العناصر الحديثة وتعديلها. وهذا هو بالضبط ما يفعله محرر مستندات Google بشكل جيد.

أشعر بالفخر بعض الشيء من حقيقة أن مواقع الأمازون ونيويورك تايمز العظيمة تحتاج إلى تشغيل الإنترنت. أنا متواضع أن Atila.ca القليل يعمل بشكل جيد مع وبدون الإنترنت. ؛) عند تعطل الإنترنت ، لا يزال بإمكانك مشاهدة المنح الدراسية المميزة ، ومنشورات المدونات وغيرها من المحتويات.

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

على سبيل المثال ، HospitalRun هو أول تطبيق متواجد حاليا. يدير المستشفيات في العالم النامي. هذه أماكن يكون فيها الاتصال المتقطع حقيقة من حقائق الحياة. يسمح بنقل السجلات إلى العيادات البعيدة ، حيث قد لا يكون هناك إنترنت. ثم يزامن هذه السجلات عندما يكون هناك. (ح / ر jonbellah.com)

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

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

قراءة متعمقة

  • وثائق عامل الخدمة الرسمية الزاوي
  • جامعة الزاوي: عمال الخدمة الزاوي
  • إضافة عامل خدمة إلى التطبيق الزاوي الموجود
  • Angular Firebase - نشر تطبيق الزاوي إلى Firebase