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

اضافة اشعارات المتصفح Push notifications لصفحات AMP

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

في هذه المقالة سنقوم بتفعيل ميزة اشعارات المتصفح لصفحات AMP بطريقتين وذلك لمستخدمي اضافة AMP for WordPress الرسمية, و لمستخدمي اضافة AMP for WP – Accelerated Mobile Pages, مع العلم ان الاضافة الثانية غير الرسمية هي الأسهل ويتم تفعيلها خلال ثواني, اما الطريقة الاولى الخاصة بالاضافة الرسمية أصعب وبحاجة لعمل أكثر.

هذه المقالة ليست لمستخدمي ووردبريس فقط, بل هي طريقة شاملة جميع المنصات (ووردبريس – بلوجر – جوملا – shopify – دروبال – weebly – منصات أخرى), تابع في آخر المقالة إذا لم تكن ووردبريس.

الخطوة الأولى: سنستخدم اضافة OneSignal – Free Web Push Notifications, هذه الاضافة يستخدمها كل مستخدمي ووردبريس لإظهار اشعارات المتصفح لمواقعهم في الوودربريس, فهي الأسهل, قم بتنزيل هذه الاضافة وتفعيلها كما نقوم ذلك بالمعتاد.

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

الخطوة الثالثة: تهيئة حسابنا على موقع OneSignal لنبدء بالحصول على اشعارات, (من قام بتنزيل الاضافة سابقاً ولديه APP ID لا ينفذ هذه الخطوة معنا).

بعد الضغط على رابط التفعيل سنقوم بإضافة تطبيق جديد لحسابنا, وذلك بالضغط على Add a new app, ثم ادخال اسم التطبيق الذي نريده مثل sitesuccessful كما هو واضح في الصورة, ثم الضغط على زر CREATE.

نختار الآن Web Push ثم نضغط على زر Next.

ستظهر لنا الأن خطوات مرتبة سنقوم بعملها واحدة تلو الاخرى, فأولاً سنختار اضافة منصة الموقع الذي نعمل عليه, سنختار مثلاً ووردبريس.

ثانياً, سنقوم بإدخال اسم الموقع ورابط الموقع ورابط ايقونة الشعار (Logo), ثم الضغط على زر الحفظ Save.

ووصلنا إلى هدفنا المطلوب وهو الحصول على APP ID و API KEY الذين ظهرا أمامك, قم بنخسهم الآن.

اذهب الى لوحة تحكم ووردبريس, ثم إلى اعدادات اضافة Onesignal Push, وقم بإدخال APP ID و API KEY في مكانهما, ثم أضغط في الأسفل على زر الحفظ Save.

عد الى موقع Onesignal وقم بالضغط على زر Finish.

لمستخدمي إضافة AMP for WP – Accelerated Mobile Pages الغير رسمية

بكل بساطة قم بالذهاب الى اعدادت اضافة AMP في لوحة تحكم ووردبريس, ثم في General ادخل الى Push Notification.

قم بتفعيل الاشعارات, ثم أدخل APP ID الذي حصلنا عليه قبل قليل.

في حال كان موقعك على البروتوكول القديم http قم بتفعيل الخيار بالسطر الثالث, في حال كان https اتركه كما هو.

لمستخدمي اضافة AMP for WordPress الرسمية

يجب التركيز في كل خطوة, فنحن سنقوم بعمل تحرير لملفات اضافة AMP:

1-اذهب الى لوحة تحكم ووردبريس>>المحرر>>اختر اضافة AMP لتحريرها.

2-تابع هذا المسار للوصول الى الملف المطلوب: templates>>html-start.php.

3-قم بإدخال الكود التالي تحت وسم <head>

4-الآن تحت وسم <style amp-custome> قم بوضع هذا الكود.

amp-web-push-widget button.subscribe {
      display: inline-flex;
      align-items: center;
      border-radius: 2px;
      border: 0;
      box-sizing: border-box;
      margin: 0;
      padding: 10px 15px;
      cursor: pointer;
      outline: none;
      font-size: 15px;
      font-weight: 400;
      background: #4A90E2;
      color: white;
      box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    amp-web-push-widget button.subscribe .subscribe-icon {
      margin-right: 10px;
    }

    amp-web-push-widget button.subscribe:active {
      transform: scale(0.99);
    }

    amp-web-push-widget button.unsubscribe {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 45px;
      border: 0;
      margin: 0;
      cursor: pointer;
      outline: none;
      font-size: 15px;
      font-weight: 400;
      background: transparent;
      color: #B1B1B1;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

5-الآن داخل وسم <body> قم بوضع الكود التالي مع تبديل https://YOURDOMAIN.COM الى رابط موقعك, وتبديل YOUR-APP-ID ووضع APP ID الخاص بك.

  <amp-web-push
    id="amp-web-push"
    layout="nodisplay"
    helper-iframe-url="https://YOURDOMAIN.COM/amp-helper-frame.html?appId=YOUR-APP-ID"
    permission-dialog-url="https://YOURDOMAIN.COM/amp-permission-dialog.html?appId=YOUR-APP-ID"
    service-worker-url="https://YOURDOMAIN.COM/OneSignalSDKWorker.js?appId=YOUR-APP-ID"
  ></amp-web-push>

6-اذهب الآن الى ملف آخر في إضافة amp, عبر المسار templates>>footer.php, فأنا مثلاً اخترت ان يظهر زر الاشتراك فوق الفوتر, قم بإدخال الكود التالي أول الفوتر.

<!-- A subscription widget -->
<amp-web-push-widget visibility="unsubscribed" layout="fixed" width="245" height="45">
  <button class="subscribe" on="tap:amp-web-push.subscribe">
    <amp-img
             class="subscribe-icon"
             width="24"
             height="24"
             layout="fixed"
             src="data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ic3Vic2NyaWJlLWljb24iIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMS44NCAxOS44ODdIMS4yMnMtLjk0Ny0uMDk0LS45NDctLjk5NWMwLS45LjgwNi0uOTQ4LjgwNi0uOTQ4czMuMTctMS41MTcgMy4xNy0yLjYwOGMwLTEuMDktLjUyLTEuODUtLjUyLTYuMzA1czIuODUtNy44NyA2LjI2LTcuODdjMCAwIC40NzMtMS4xMzQgMS44NS0xLjEzNCAxLjMyNSAwIDEuOCAxLjEzNyAxLjggMS4xMzcgMy40MTMgMCA2LjI2IDMuNDE4IDYuMjYgNy44NyAwIDQuNDYtLjQ3NyA1LjIyLS40NzcgNi4zMSAwIDEuMDkgMy4xNzYgMi42MDcgMy4xNzYgMi42MDdzLjgxLjA0Ni44MS45NDdjMCAuODUzLS45OTYuOTk1LS45OTYuOTk1SDExLjg0ek04IDIwLjk3N2g3LjExcy0uNDkgMi45ODctMy41MyAyLjk4N1M4IDIwLjk3OCA4IDIwLjk3OHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=">
    </amp-img>
    Subscribe to updates
  </button>
</amp-web-push-widget>
           

<!-- An unsubscription widget -->
<amp-web-push-widget visibility="subscribed" layout="fixed" width="230" height="45">
   <button class="unsubscribe" on="tap:amp-web-push.unsubscribe">Unsubscribe from updates</button>
</amp-web-push-widget>

7-اذهب الأن الى السي بانل, ثم قم برفع هذين الملفين الى المسار الرئيسي للموقع (داخل public_html).

بهذا نكون انتهينا من تفعيل اشعارات المتصفح بالنسبة للإضافة الرسمية, ويمكنك تجربة فتح اي صفحة AMP من متصفح الكروم لتظهر لك فوق الفوتر كما في الصورة.

لغير مستخدمي ووردبريس (بلوجر – جوملا – shopify – وغيره)

عد للأعلى وقم بتطبيق الخطوات حتى الوصول للخطوة التي نختار فيها ووردبريس, ولكن نحن لن نختار في هذه الحالة ووردبريس, بل سنختار المنصة التي تملكها انت ولنفترض انها بلوجر Bolgger, سنقوم بإدخال اسم الموقع ورابط الموقع, كما فعلنا بالاعلى, ثم سنقوم بتخصيص زر الاشعار, وذلك في الخطوة الثالثة (Permission Prompt Setup), سنضغط على ADD a Promot.

سنختار الشكل واللون والمكان الذي تريده لوضع زر الإشعار ثم الضغط على زر الحفظ Save.

في الخطوة الرابعة Welcome Notification, قم بإدخال عنوان للرسالة بإسم موقعك, ونص الرسالة الترحيبية الذي سيصل للمشتركين.

انزل الآن لنهاية الصفحة وأضغط على زر Save.

سيظهر لك كود خاص بك, ستأخذ منه app id الخاص بك (موجود داخل الكود على الشكل appId: “730dff1f-6ddd-4sss-aaaa-63f8ace69f59” مثلاً).

الآن قم بالتركيز على كل خطوة سنقوم بها لتعديل ملفات amp الخاصة بموقعك.

1-قم بوضع الكود التالي تحت وسم <head>

<script async custom-element="amp-web-push" src="https://cdn.ampproject.org/v0/amp-web-push-0.1.js"></script>

2-قم برفع هذين الملفين الى المسار الرئيسي للموقع (داخل public_html).

3-تحت وسم <body> قم بوضع هذا الكود, مع تبديل https://YOURDOMAIN.COM الى رابط موقعك, وتبديل YOUR-APP-ID ووضع APP ID الخاص بك.

<amp-web-push
    id="amp-web-push"
    layout="nodisplay"
    helper-iframe-url="https://YOURDOMAIN.COM/amp-helper-frame.html?appId=YOUR-APP-ID"
    permission-dialog-url="https://YOURDOMAIN.COM/amp-permission-dialog.html?appId=YOUR-APP-ID"
    service-worker-url="https://YOURDOMAIN.COM/OneSignalSDKWorker.js?appId=YOUR-APP-ID"
  ></amp-web-push>

4-تحت وسم <style amp-custome> قم بوضع هذا الكود.

amp-web-push-widget button.subscribe {
      display: inline-flex;
      align-items: center;
      border-radius: 2px;
      border: 0;
      box-sizing: border-box;
      margin: 0;
      padding: 10px 15px;
      cursor: pointer;
      outline: none;
      font-size: 15px;
      font-weight: 400;
      background: #4A90E2;
      color: white;
      box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    amp-web-push-widget button.subscribe .subscribe-icon {
      margin-right: 10px;
    }

    amp-web-push-widget button.subscribe:active {
      transform: scale(0.99);
    }

    amp-web-push-widget button.unsubscribe {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 45px;
      border: 0;
      margin: 0;
      cursor: pointer;
      outline: none;
      font-size: 15px;
      font-weight: 400;
      background: transparent;
      color: #B1B1B1;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

5-قم بنسخ كود زر الاشتراك ووضعه في المكان الذي ترغب به (بالهيدر – الفوتر – فوق التعليقات).

<!-- A subscription widget -->
<amp-web-push-widget visibility="unsubscribed" layout="fixed" width="245" height="45">
  <button class="subscribe" on="tap:amp-web-push.subscribe">
    <amp-img
             class="subscribe-icon"
             width="24"
             height="24"
             layout="fixed"
             src="data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ic3Vic2NyaWJlLWljb24iIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMS44NCAxOS44ODdIMS4yMnMtLjk0Ny0uMDk0LS45NDctLjk5NWMwLS45LjgwNi0uOTQ4LjgwNi0uOTQ4czMuMTctMS41MTcgMy4xNy0yLjYwOGMwLTEuMDktLjUyLTEuODUtLjUyLTYuMzA1czIuODUtNy44NyA2LjI2LTcuODdjMCAwIC40NzMtMS4xMzQgMS44NS0xLjEzNCAxLjMyNSAwIDEuOCAxLjEzNyAxLjggMS4xMzcgMy40MTMgMCA2LjI2IDMuNDE4IDYuMjYgNy44NyAwIDQuNDYtLjQ3NyA1LjIyLS40NzcgNi4zMSAwIDEuMDkgMy4xNzYgMi42MDcgMy4xNzYgMi42MDdzLjgxLjA0Ni44MS45NDdjMCAuODUzLS45OTYuOTk1LS45OTYuOTk1SDExLjg0ek04IDIwLjk3N2g3LjExcy0uNDkgMi45ODctMy41MyAyLjk4N1M4IDIwLjk3OCA4IDIwLjk3OHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=">
    </amp-img>
    Subscribe to updates
  </button>
</amp-web-push-widget>
           

<!-- An unsubscription widget -->
<amp-web-push-widget visibility="subscribed" layout="fixed" width="230" height="45">
   <button class="unsubscribe" on="tap:amp-web-push.unsubscribe">Unsubscribe from updates</button>
</amp-web-push-widget>

اتمنى ان يكون كل شيء واضح, واعتذر على التقصير والإطالة, اخوكم وليد حمود.