بايت قصير: هل تعلم أن ثإيث ظهور عمال الخدمة ، يمكن للمرء أن يبدأ في جعل المواقع تعمل دون اتصال بالإنترنت! تسمى تطبيقات الويب هذه PWAs (تطبيقات الويب التقدمية). في هذه الإرشادات ، سأساعدك على استخدام عامل خدمة لإنشاء مدونة / موقع إلكتروني يعمل بنظام Jekyll ويعمل دون اتصال بالإنترنت وبعض الأشياء الرائعة التي تأتي معه.

(ملحوظة: مقتطفات الشفرة في المقالة مأخوذة من مستودع الشفرة في مدونتي. يمكن إحالته إذا لزم الأمر. إذا كنت جديدًا على Jekyll ، فيمكنك قراءة مقال 3 Series حول CSS Tricks.)

خلفية

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

هبط عمال الخدمة في Chrome Canary في عام 2014 ، ولكن ما زالت مواصفاته قيد المراجعة / المضافة والتصميم. في عامي 2015 و 2016 ، نشر فريق Google Chrome كلمة هذه التكنولوجيا الجديدة بشكل كبير في المتصفحات. فقط Apple لم تدعم هذا (حتى في وقت كتابة هذا المقال) على أجهزتها (لأسباب غير معروفة) [كما أنها لا تشارك بنشاط في أي مناقشات حول عمال الخدمة أيضًا].

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

يتيح لنا Service Worker تخزين مواد التخزين المؤقت (تخزينها لفترة طويلة) ، مثل JavaScript و CSS و HTML وملفات الصور والخطوط في ذاكرة التخزين المؤقت للعامل في الخدمة في المتصفح ، وبالتالي في المرة التالية التي يقوم فيها المستخدم بتحميل تلك الصفحة ، يتم تحميلها على الفور تقريبًا . وبما أنه في استراتيجية التخزين المؤقت هذه ، يبحث المستعرض عن توفر الأصول أولاً من ذاكرة التخزين المؤقت للعامل في الخدمة ، يتم تقديم صفحة الويب حتى عندما تكون غير متصلة! إذا لم يكن هناك أي أصل موجود في ذاكرة التخزين المؤقت ، فسيتم إرسال طلب شبكة لإحضاره.

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

منذ جيكيل يخدم محتويات ثابتة (إنه مولد موقع ثابت ، duh!) ، سيكون رمز عامل الخدمة لدينا أساسيًا جدًا وسهل الفهم.

دعنا نسير:

في جميع الصفحات ذات الصلة ، يتم تنفيذ النص التالي. إنها تفعل الأشياء التالية:

  1. التحقق من وجود API عامل الخدمة في المتصفح وتسجيل عامل الخدمة.
  2. عند تنشيط عامل الخدمة ، أرسل رسالة توست / شريحة صغيرة لطيفة للمستخدم مفادها أن موقع الويب جاهز للاستخدام دون اتصال بالإنترنت الآن.

وظيفة showOfflineToast () {let offlineToast = document.querySelector ('. offline-ready')؛ offlineToast.classList.add ( 'نشطة')؛ setTimeout (function () {offlineToast.className = offlineToast.className.replace ("active"، "") .trim ()؛}، 5500)؛ } // (1) if (navigator.serviceWorker) {navigator.serviceWorker.register ('/ sw.js'). ثم (function (reg) {if (! reg.installing) return ؛ console.log ("[* ] يتم تثبيت ServiceWorker ... ") ؛ var worker = reg.installing ؛ worker.addEventListener ('statechange'، function () {if (worker.state == 'redundant') {console.log ('[*] Install فشل ')؛} إذا (worker.state ==' مثبت ') {console.log (' [*] التثبيت ناجح! ')؛} // (2) إذا (worker.state ==' activated '&&! navigator .serviceWorker.controller) {showOfflineToast ()؛}})؛})؛ }

يمكنك إضافة هذه الشفرة في ملف يقولserviceWorker.html داخل اليشملدليل لرمز Jekyll الخاص بك وإدراجه فيdefault.htmlباستخدام محرك جيكيل لتصنيع السوائل

{٪ include head.html٪} {٪ include header.html٪}

{{ يحتوى }}
{٪ include footer.html٪} {٪ include serviceWorker.html٪}
الموقع جاهز للاستخدام دون اتصال

الآن إلى رمز عامل الخدمة الفعلي الذي يفعل السحر. هذا الكود موجود فيsw.jsفي جيكيل كود في الجذر.

//sw.js --- layout: null --- const staticCacheName = "gdad-s-river-static-v61"؛ console.log ("تثبيت عامل الخدمة") ؛ const filesToCache = ["/"، {٪ for page in site.html_pages٪} '{{page.url}}'، {٪ endfor٪} {٪ للنشر في site.posts٪} '{{post.url} } '، يمكن تشغيل {٪ endfor٪} // تلقائيًا بدلاً من الإدخالات اليدوية "/assets/images/bhavri-github-callbacks.png"، "/assets/images/bhavri-github-issues.png"، "/ مادة العرض" /images/jakethecake-svg-line-anime.png "،" /assets/images/svg-animated-mast-text-shapes-tweet.png "،" css / main.css "،" / about / "،" /index.html "] ؛

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

//sw.js self.addEventListener ("install" ، function (e) {self.skipWaiting ()؛ e.waitUntil (caches.open (staticCacheName) .then (function (cache) {return cache.addAll (filesToCache)؛ }))}) ؛

self.skipWaiting، هو أن أقول ، أنه في كل مرة هذا sw.js تغييرات الملف ، لا ينبغي أن يكون الإصدار الأحدث من عامل الخدمة في قائمة الانتظار ، ولكن يجب تفعيله على الفور (يمكن للمرء أن يطلب من المستخدم مطالبة لتحديث الصفحة إعطاء رسالة مثل تم تحديث / تغيير صفحة الويب ، انقر فوق "تحديث" لتحميل منشورات جديدة أو أيًا كان.) ، التخلص من الإصدار الأقدم.

e.waitUntil نقلا عن موقع MDN:

"ال ExtendableEvent.waitUntil () طريقة تمتد عمر الحدث. في العاملين في الخدمة ، يمنع تمديد عمر الحدث المستعرض من إنهاء عامل الخدمة قبل اكتمال العمليات غير المتزامنة داخل الحدث. "

أفتح ذاكرة التخزين المؤقت المسماة gdad-ق-النهر ساكنة-v61، والذي يعرض وعدًا باسم التخزين المؤقت الخاص بي ، ثم أتصل به cache.addAll (والذي يستخدم واجهة إحضار API في الخلفية) ، والتي تجلب جميع الطلبات في الصفيف المقدمة وتخزينها مؤقتًا.

إلى المقتطف التالي!

//sw.js self.addEventListener ("activate" ، function (e) {e.waitUntil (caches.keys (). ثم (function (cacheNames) {return Promise.all (cacheNames.filter (function (cacheName) {return cacheName.startsWith ("gdad-s-river-static-") && cacheName! = staticCacheName؛}). map (function (cacheName) {return cache.delete (cacheName)؛})) ß}))})؛

عندما يتم تنشيط عامل الخدمة ، أضمن أنه سيتم حذف أي عامل خدمة لا يمثل أحدث إصدار. على سبيل المثال ، إذا كانت آخر نسخة مخبأ لي هي القول gdad-ق-النهر ساكنة-v61وما زال هناك شخص ما gdad-ق-النهر ساكنة-v58، في زيارته التالية ، أريد لهذا العميل ألا يهتم بضخ إصدار واحد في وقت واحد ، ولكن حذف هذا الإصدار مباشرةً لتثبيت أحدث إصدار.

//sw.js self.addEventListener ("fetch" ، function (e) {e.respondWith (caches.match (e.request) .then (function (response) {return response || fetch (e.request)؛} ))}) ؛

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

تادا! جعل عامل الخدمة Jekyll مدعوم حاليا بلوق!

مفاجأة! الشيء رائع:

المشكله:هذا لن يعمل على أجهزة iOS.

إذا قمت بإضافة تطبيق ويب الملف manifest.json ملف في الجذر الخاص بك للمشروع مثل هذا:

{"name": "gdad-s-river"، "short_name": "gdad-s-river"، "theme_color": "# 2196f3"، "background_color": "# 2196f3"، "display": "standalone" ، "النطاق": "/" ، "start_url": "/" ، "الرموز": [{"src": "الأصول / الصور / favicon_images / android-icon-36x36.png" ، "الأحجام": "36x36" ، "type": "image / png"، "density": "0.75"}، {"src": "stocks / images / favicon_images / android-icon-48x48.png"، "sizes": "48x48"، "النوع": "image / png" ، "الكثافة": "1.0"} ، {"src": "الأصول / الصور / favicon_images / android-icon-72x72.png" ، "الأحجام": "72x72" ، " اكتب ":" image / png "،" الكثافة ":" 1.5 "} ، {" src ":" الأصول / الصور / favicon_images / android-icon-96x96.png "،" الأحجام ":" 96x96 "،" النوع ":" image / png "،" الكثافة ":" 2.0 "} ، {" src ":" الأصول / الصور / favicon_images / android-icon-144x144.png "،" الأحجام ":" 144x144 "،" النوع " : "image / png" ، "الكثافة": "3.0"} ، {"src": "الأصول / الصور / favicon_images / android-icon-192x192.png" ، "الأحجام": "192x192" ، "النوع": "image / png" ، "الكثافة": "4.0"}]}

وإضافته في head.htmlملف داخل علامة الرأس ،

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

مصادر

  • يمكن الاطلاع على تفاصيل ميزات عامل الخدمة في وضع عدم الاتصال واستراتيجيات التخزين المؤقت في كتاب طبخ Jake Archibald غير المتصل بالإنترنت.
  • دورة Udacity مجانية مفصلة للغاية حول كل ما تريد معرفته حول عمال الخدمة و IndexDB.

هل وجدت هذا المقال على Jekyll Blog مشوق ومفيد؟ لا تنسى مشاركة وجهات نظرك وتعليقاتك.

اقرأ أيضا: Ecosia - محرك البحث الذي يزرع الأشجار

عملت لك: Robert Gaines & George Fleming | تريد الاتصال بنا؟

التعليقات على الموقع: