ما هو PWA؟

اختصارًا لـ Progressive Web Apps (تطبيقات الويب الصاعدة)، وهي تطبيقات ويب عند عرضها على الموبايل تبدو (وكأنها) تطبيقات مصممة للموبايل.

هذا يعني أنها بالنهاية مواقع إنترنت اعتيادية، ولكن باستعمال بعض الوظائف اﻹضافية نستطيع أن نجعلها تُعطي أفضل تجربة على الموبايل.

تستعمل الـ PWAs ما يسمى الـ Services Workers وهي تقوم بالمزايا التالية لجعل تجربة الموقع أفضل على الموبايل:

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

خطوات تحويل موقع ويب إلى PWA

  1. ابنِ موقعك بشكل اعتيادي

    قم ببناء موقعك بشكل طبيعي باستخدام HTML, CSS, JS أو باستخدام أحد أطر العمل، وبعد ذلك تأكد من التالي:
    – إذا كنت تريد نشر موقعك على اﻹنترنت فيجب أن تتأكد من أنه HTTPS.
    – تأكد من أن موقعك متجاوب مع مقاسات الشاشات المختلفة (Responsive Design).


  2. قم بإضافة ملف الـ Manifest

    الـ Manifest هو ملف مكتوب بلغة JSON يحتوي على بيانات وصفية حول الـ PWA خاصتنا مثل الاسم والسمة، إلخ…
    اصنع ملفًا اسمه manifest.json في مجلد الجذر اﻷساسي لمشروعك، ومن ثم عدّل عليه بما يناسبك:

    {
    "name": "Stick-it Notes by Tharun",
    "short_name": "Stick-it",
    "start_url": "index.html",
    "scope": "./",
    "icons": [
    {
    "src": "contract.png",
    "sizes": "192x192",
    "type": "image/png"
    },
    {
    "src": "contract.png",
    "sizes": "512x512",
    "type": "image/png"
    }
    ],
    "theme_color": "#ffd31d",
    "background_color": "#333",
    "display": "standalone"
    }

    اﻵن اذهب إلى ملف index.html وأضف التالي:

    <link rel="manifest" href="manifest.json">

     

  3. أضف الـ Service Workers

الـ Service Worker معنيّ باعتراض طلبات الشبكة وعملية التخزين المؤقت للموقع (caching) أو استرداد الموارد من ذاكرة التخزين الموقت، وتوصيل الرسائل.

ويعمل هذا الملف عندما يكون الموقع غير نشط، وهو ملف ضروري أيضا لتسليم اﻹشعارات (Push Notifications) وبما أنه يقوم بعمل caching فإنه سوف يساعد على تشغيل الموقع أوفلاين.

اصنع ملف جافاسكربت جديد وسمه بأي اسم، ثم أضف فيه الكود التالي:

if ("serviceWorker" in navigator) {
// register service worker
navigator.serviceWorker.register("service-worker.js");
}

بعد ذلك قم بتطبيق اﻷمر التالي لتوليد service-worker.js:

npm install --global sw-precache

ثم طبق اﻷمر:

sw-precache

انتهى.

[devto]