AMP
AR
English Deutsch Français Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

Easy offline access and improved performance

Important: this documentation is not applicable to your currently selected format email!

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

تذكّر: لن يتمكّن "عامل الخدمة" من التفاعل مع إصدار AMP المُخزن مؤقتًا لصفحتك. استخدمه في الرحلات القادمة إلى أصلك.

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

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

NOTE – If the concept of Service Workers is new to you, read the introduction at WebFundamentals.

يحتاج عامل الخدمة الخاص بك إلى التسجيل في صفحة معينة، وإلا فلن يعثر عليها المستعرض أو يقوم بتشغيلها. بشكل افتراضي، يتم ذلك بمساعدة القليل من JavaScript. على صفحات AMP، يمكنك استخدام المكوّن amp-install-serviceworker لتحقيق الشيء نفسه.

لذلك، قم أولاً بتضمين المكوّن amp-install-serviceworker عبر النص البرمجي الخاص به في <head> صفحتك:

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

ثم أضف ما يلي في مكان ما داخل <body> الخاص بك (قم بالتعديل للإشارة إلى عامل الخدمة الفعلي لك):

<amp-install-serviceworker
      src="https://www.your-domain.com/serviceworker.js"
      layout="nodisplay">
</amp-install-serviceworker>

إذا انتقل المستخدم إلى صفحات AMP الخاصة بك على أصلك (على عكس النقرة الأولى، والتي يتم تقديمها عادةً من ذاكرة التخزين المؤقت لصفحات AMP)، سيتولى عامل الخدمة المسؤولية ويمكنه القيام بعدد لا يُحصى من الأمور الرائعة.

عامل خدمة AMP

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

تلميح – اتّبع برنامجنا التعليمي لمعرفة كيفية استخدام عامل خدمة AMP في (PWA) تطبيق الويب التقدمي.

Installing the AMP Service Worker

قم بتثبيت عامل خدمة AMP بأقل عدد من الخطوات:

 importScripts('https://cdn.ampproject.org/sw/amp-sw.js'); 

  AMP_SW.init();
  • تم.

التخزين المؤقت الآلي

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

إذا كان تطبيقك يتطلب أنواعًا معينة من التخزين المؤقت للمستندات، فإن عامل خدمة AMP يتيح التخصيص. مثل إضافة قائمة رفض للمستندات التي يجب طلبها دائمًا من الشبكة. في المثال التالي، استبدل Array<RegExp> بمصفوفة من التعبيرات العادية التي تمثل المستندات التي تريد تجنب التخزين المؤقت لها.

AMP_SW.init(
documentCachingOptions: {
denyList?: Array<RegExp>;
}
);

اقرأ المزيد حول تخصيص التخزين المؤقت للمستند هنا.

Optimizing the AMP Service Worker

لاستخدام "عامل خدمة AMP" بإمكانياته الكاملة، يجب تكوين الحقول الاختيارية لتخزين الأصول الضرورية وروابط الجلب المُسبق مؤقتًا.

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

AMP_SW.init(
assetCachingOptions: [{
regexp: /\.(png|jpg)/,
cachingStrategy: 'CACHE_FIRST'
}],
);

يمكنك تخصيص استراتيجية التخزين المؤقت وتحديد قائمة رفض.

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

sourcecode:html] [/sourcecode]

التجربة دون اتصال

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

AMP_SW.init({
offlinePageOptions: {
url: '/offline.html';
assets: ['/images/offline-header.jpg'];
}
})

تبدو الصفحة الناجحة غير المتصلة بالإنترنت وكأنها جزء من موقعك من خلال وجود واجهة مستخدم متسقة مع بقية التطبيق.

فرض التحديث

يعمل الفريق على تنفيذ ميزة "فرض تحديث/إزالة" إذا احتاج عامل خدمة AMP إلى التعطيل أو التغيير إذا حدث خطأ في النشر للمستخدمين.

لإدارة عامل الخادم بشكل فعّال، يجب استيعاب كيفية تأثير التخزين المؤقت HTTP القياسي في الطريقة التي يتم بها تحديث JavaScript لعامل الخدمة لديك. يمكن للعاملين في الخدمة الذين يتم تزويدهم بتوجيهات التخزين المؤقت المناسبة لـ HTTP حل إصلاحات الأخطاء الصغيرة من خلال إجراء التغييرات المناسبة وإعادة نشر عامل الخدمة الخاص بك إلى بيئة الاستضافة الخاصة بك. إذا كنت بحاجة إلى إزالة عامل خدمة، فمن الأفضل الاحتفاظ بملف عامل خدمة بسيط، ‏‏لم يتم إجراء أية عملية في متناول اليد، مثل ما يلي:

self.addEventListener('install', () => {
  // Skip over the "waiting" lifecycle state, to ensure that our
  // new service worker is activated immediately, even if there's
  // another tab open controlled by our older service worker code.
  self.skipWaiting();
});

اقرأ المزيد حول إدارة عمال الخدمة المنتشرين.

كتابة عامل خدمة مخصص

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

self.addEventListener('fetch', function(event) {
event.respondWith(
caches.open('mysite').then(function(cache) {
return cache.match(event.request).then(function(response) {
var fetchPromise = fetch(event.request).then(function(networkResponse) {
cache.put(event.request, networkResponse.clone());
return networkResponse;
})

        // Modify the response here before it goes out..
        ...

        return response || fetchPromise;
      })
    })

);
});

باستخدام هذا الأسلوب، يمكنك تعديل صفحة AMP التي ستحتوي على جميع أنواع الوظائف الإضافية التي كانت ستفشل بخلاف تلك الموجودة في التحقق من صحة AMP، على سبيل المثال:
:

  • Dynamic features that require custom JS.
  • المكونات المخصصة/ذات الصلة فقط بموقعك.