كيف تجعل PWA الخاص بك يعمل دون اتصال

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

 يوصى بالقراءة: ما هو PWA؟

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

تطبيقات الويب التقدمية والتوافر دون اتصال

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

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

ملاحظات : يحتاج كل موقع PWA إلى التخزين المؤقت الأولي للموارد الأساسية أولاً قبل إتاحة العرض في وضع عدم الاتصال للمستخدم.

كيفية جعل PWA الخاص بك يعمل دون اتصال

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

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

• موقع ويب عادي / تطبيق ويب. أي شيء به index.html واحد و index.js واحد و style.css واحد سيفي بالغرض.

بمجرد حصولك على جميع المتطلبات الأساسية بالترتيب ، فقد حان الوقت لجعل PWA المجرد الخاص بك يعمل في وضع عدم الاتصال!

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

أول شيء ، أولاً ، ستحتاج إلى إنشاء sw.js الخاص بك والذي يحتوي على جميع التعليمات البرمجية اللازمة لعامل خدمة وظيفي.

 // sw.js
self.addEventListener ("fetch"، event => {
    console.log ("لقد جلبت" + event.url) ؛
}) ؛

بمجرد إنشاء عامل الخدمة الخاص بك ، دعنا نتحقق مما إذا كان متصفحك يدعمه والإشارة إليه في index.js الخاص بك:

 // index.js
إذا ("serviceWorker" في الملاح) {
    navigator.serviceWorker
        .register ("sw.js")
        .then (() => console.log ("عامل الخدمة المسجل!"))؛
}
// باقي كود صفحتك ...

يجب أن يكون الكود أعلاه بسيطًا بدرجة كافية. يتحقق مما إذا كان المستعرض الخاص بك يدعم العاملين في الخدمة وإذا كان الأمر كذلك ، يقوم بإرجاع " عامل خدمة مسجل! ". من خلال تسجيل العاملين في الخدمة ، فأنت تخبر المتصفح أساسًا باستخدام sw.js للعاملين في الخدمة ، وبالتالي تقوم بربط عامل (عمال) الخدمة الجديد بموقعك.

الآن ، بالعودة إلى sw.js ، أضف الكود التالي:

 // sw.js
self.addEventListener ("fetch"، event => {
    console.log ("لقد جلبت" + event.url) ؛
}) ؛

يضيف الرمز EventListener وهو أمر حيوي لعملياتنا المستقبلية. في الواقع ، لن تسمح العديد من المتصفحات بما في ذلك Chrome بتثبيت PWA ما لم يكن هناك مستمع fetch مسجل.

يحتوي addEventListener في الكود أعلاه على وسيطتين: الحدث (الأحداث) الذي سيتم الاستماع إليه واستدعاء يأخذ كائن حدث. بمجرد بدء هذا الحدث ، سيبدأ عامل الخدمة الآن في الاستماع إلى أحداث fetch التي تتضمن طلبات HTML لموقع الويب الخاص بك و CSS و JS والصوت والصور وأي طلبات أخرى لواجهات برمجة التطبيقات / مواقع الويب الأخرى.

تخزين مواردك مؤقتًا

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

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

حد التخزين المؤقت

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

الآن ، يختلف هذا الحد لأنه يعتمد على جهاز المستخدم النهائي ؛ ولكن عادةً يجب أن تكون حوالي 20٪ من مساحة القرص القصوى للمستخدم. لمزيد من المعلومات ، يمكنك الرجوع إلى الرسم البياني أدناه أو إلى دليل Google الرسمي حول التخزين دون اتصال لتطبيقات الويب التقدمية.

الآن بعد أن أصبح لدينا حد تخزين ذاكرة التخزين المؤقت بعيدًا عن الطريق ، دعنا ننتقل إلى تخزين مواردك مؤقتًا .

لتخزين موارد صفحتك مؤقتًا ، نحتاج إلى مصفوفة عالمية تحتوي على جميع الأصول التي نريد تخزينها:

 / * 
  هذه هي كل الأشياء التي نريد حفظها في ذاكرة التخزين المؤقت.
  لكي يعمل التطبيق دون اتصال بالإنترنت / يكون قابلاً للتثبيت ،
  لا يتعين علينا حفظ الصور فحسب ، بل حفظ ملفات HTML و JS و CSS الخاصة بنا
  أيضًا - أي شيء نريد استخدامه عندما لا تكون متصلاً بالإنترنت.
* /
الأصول الثابتة = [
    "https://i.imgur.com/Kbkqr2n.png" ،
    "https://i.imgur.com/lgLaG0x.png" ،
    "https://i.imgur.com/0iL8mxP.png" ،
    "https://i.imgur.com/KDsdYeS.png" ،
    "https://i.imgur.com/mK50fqL.png" ،
    "https://i.imgur.com/KYGH2Qa.png" ،
    "/style.css"،
    "/index.html" ،
    "/offline.html" ،
    "/"
] ؛

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

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

أضف هذا الجزء العلوي أعلى ملف sw.js الخاص بك:

 // sw.js

دع cache_name = "SimiCart" ؛ // السلسلة المستخدمة لتحديد ذاكرة التخزين المؤقت لدينا

self.addEventListener ("install"، event => {
    console.log ("تثبيت ...") ؛
    event.waitUntil (
        مخابئ
            .open (cache_name)
            ثم (ذاكرة التخزين المؤقت => {
                إرجاع cache.addAll (الأصول) ؛
            })
            .catch (يخطئ => console.log (يخطئ))
    ) ؛
}) ؛

بشكل أساسي ، يوجه هذا الرمز المتصفح إلى الانتظار (باستخدام waitUntil() ) للتخزين المؤقت.

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

هذا ما سيبدو عليه الآن:

 self.addEventListener ("fetch"، event => {
    إذا (event.request.url === "https://www.simicart.com/") {
        // أو أيًا كان عنوان URL لتطبيقك
        event.respondWith (
            إحضار (event.request) .catch (يخطئ =>
                self.cache.open (cache_name). ثم (cache => cache.match ("/ offline.html"))
            )
        ) ؛
    } آخر {
        event.respondWith (
            إحضار (event.request) .catch (يخطئ =>
                caches.match (event.request) ثم (response => response)
            )
        ) ؛
    }
}) ؛

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

• أولاً ، يحاول التطبيق الحصول على الموارد عبر الإنترنت والاستجابة لها باستخدام الموارد المخزنة مؤقتًا إذا فشل ذلك الجلب (باستخدام respondWith() ).
• ضمن respondWith() ، نسمي fetch(event.request) لمحاولة جلب الموارد من الشبكة ، وبما أن الجلب يعتمد على Promise ، فإن Promise سيرفض إذا فشل في الاتصال بالشبكة وبالتالي ، قم بتشغيل catch() بيان.
• في عبارة catch() هي المكان الذي تريد استدعاء مواردك المخزنة مؤقتًا فيه.

وهذا كل شيء. يجب أن يكون PWA الآن قادرًا على العمل دون اتصال! سهل جدا ، أليس كذلك؟

استنتاج

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

ومع ذلك ، هناك دائمًا موفرو حلول متاحون بسهولة مثل SimiCart يمكنهم رعاية كل احتياجاتك. إذا كنت ، عن طريق الصدفة ، تاجرًا عبر الإنترنت وتبحث عن حل Magento PWA مثالي شامل ، فأنت في المكان الصحيح. نحن مزود حلول معروف لمواقع Magento eCommerce مع أكثر من 5 سنوات من الخبرة في PWAs والتطبيقات الأصلية.