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

تحويل موقع AMP الخاص بك إلى تطبيق ويب تقدمي (PWA)

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

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

سيعلّمك هذا البرنامج التعليمي كيفية تحويل موقع AMP إلى تطبيق ويب تقدمي (PWA) قابل للتثبيت مع إمكانات غير متصلة بالإنترنت من خلال إضافة بيان ويب وعامل خدمة مدعوم من عامل خدمة AMP.

تنزيل رمز البدء وتشغيله

قم بتنزيل رمز البدء هنا.

استخدم خادم ويب محلي لمعاينة موقع الويب.

TIP – للحصول على خادم ويب سريع، قم بتشغيل python -m SimpleHTTPServer.

You should be able to view the landing page for Lyrical Lyghtning, the Mobile Music Magic festival. It has one link on the homepage to view the schedule and which stage the bands are on.

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

إنشاء "بيان تطبيق ويب"

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

أضف ملفًا بعنوان manifest.json إلى المستودع الخاص بك بالرمز التالي:

{
"short_name": "LyLy",
"name": "Lyrical Lyghtning",
"icons": [
{
"src": "./images/amplogo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "./images/amplogo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/index.html",
"background_color": "#222325",
"display": "standalone",
"scope": "/",
"theme_color": "#222325"
}

إضافة عامل خدمة AMP

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

يقوم عامل خدمة AMP تلقائيًا بتخزين نصوص AMP النصية مؤقتًا والمستندات كما يطلبها المستخدم، بعد تثبيتها. سنبدأ بإضافة عامل خدمة AMP الأساسي.

إنشاء ملف عامل الخدمة

أنشئ ملفًا يُسمى sw.js وأضِف الرمز التالي:

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

باستخدام سطرين فقط من الرمز، فإن ذلك يقوم باستيراد عامل خدمة AMP إلى عامل الخدمة الخاص بك وتهيئته.

تثبيت عامل الخدمة تلقائيًا على صفحات AMP

تستخدم مواقع AMP على الويب المكوِّن <amp-install-serviceworker> لتثبيت عامل الخدمة في خلفية المتصفح، بينما يستمتع المستخدم بمحتواك.

ضع علامة النص البرمجي المطلوبة في رأس index.html والعنصر <amp-install-serviceworker> داخل <body>:

…

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

…
...
<amp-install-serviceworker src="/sw.js"
           data-iframe-src="install-sw.html"
           layout="nodisplay">
</amp-install-serviceworker>

</body>

هام – يجب عرض عامل الخدمة من الدليل الجذري (/sw.js) لتتمكّن من تخزين كل محتوى موقعك في ذاكرة التخزين المؤقت.

يقوم <amp-install-serviceworker> بتثبيت عامل الخدمة من خلال إنشاء إطار iframe وتشغيل ملف data-iframe-src. أنشئ ملف install-sw.html وأضِف الرمز التالي:

<!doctype html>
<title>installing service worker</title>
<script type='text/javascript'>
 if('serviceWorker' in navigator) {
   navigator.serviceWorker.register('./sw.js');
 };
</script>

يسجّل iframe ملف "عامل خدمة AMP" في المتصفح.

تخصيص ما تم تخزينه مؤقتًا

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

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

أصول ذاكرة التخزين المؤقت

يمكنك تكوين عامل خدمة AMP على ذاكرة التخزين المؤقت للأصول، مثل الصور ومقاطع الفيديو والخطوط. سنستخدمها لتخزين صورة الخلفية وشعار AMP مؤقتًا. قم بفتح ملف sw.js وتحديثه إلى الرمز أدناه:

importScripts('https://cdn.ampproject.org/sw/amp-sw.js');
AMP_SW.init({
assetCachingOptions: [{
regexp: /\.(png|jpg)/,
cachingStrategy: 'CACHE_FIRST'
}]
});

لقد حدّدنا استراتيجية التخزين المؤقت لتكون ذاكرة التخزين المؤقت أولاً. يعني أن التطبيق سيحاول عرض الصور من ذاكرة التخزين المؤقت أولاً قبل طلب أي شيء من الشبكة. هذا مفيد بشكل خاص لهذا التطبيق لأننا لن نقوم بتحديث صورة الخلفية أو شعار AMP.

روابط الجلب المُسبق

يقوم عامل خدمة AMP بجلب الروابط التي تحتوي على السمة data-rel=prefetch مُسبقًا. يتيح ذلك للمستخدمين عرض الصفحات غير المتصلة بالإنترنت حتى إذا لم يسبق لهم زيارتها بعد. سنضيف السمة إلى علامة الرابط الخاصة بنا لـ lineup.html.

...
<a href="/lineup.html" data-rel="prefetch">See Full Lineup</a>
...

عرض صفحة غير متصلة بالإنترنت

للتعامل مع الحالات غير المتوقعة أو النقرات على روابط لصفحات لم نقم بجلبها مُسبقًا، سنضيف صفحة غير متصلة بالإنترنت لتقديم تجربة مستخدم متسقة تكون "على العلامة التجارية"، بدلاً من عرض الصفحة العامة غير المتصلة بالإنترنت للمتصفح. قم بتنزيل offline.html هنا وتحديث sw.js إلى الرمز التالي:

importScripts('https://cdn.ampproject.org/sw/amp-sw.js');
AMP_SW.init({
assetCachingOptions: [{
regexp: /\.(png|jpg)/,
cachingStrategy: 'CACHE_FIRST'
}],
offlinePageOptions: {
url: '/offline.html',
assets: []
}
});

اختبار تطبيق الويب التقدمي (PWA) الخاص بك

يمكنك اختبار أن عامل خدمة AMP الخاص بك يخزن الأصول الضرورية مؤقتًا ويقدّم حلاً مثاليًا دون اتصال بالإنترنت من خلال Chrome DevTools.

سنختبر Lyrical Lyghtning من خلال فتح لوحة DevTools بالضغط على Ctrl + Shift + I على نظام التشغيل Windows أو Cmd + Opt + I على نظام التشغيل Mac. يمكنك أيضًا النقر بزر الماوس الأيمن على الصفحة وتحديد فحص من القائمة. ثم حدّد التطبيق لعرض تسجيل عامل الخدمة الخاص بك.

انقر على المربع دون اتصال للتبديل إلى وضع دون اتصال بالإنترنت. انقر على الرابط انظر القائمة الكاملة وانتقل إلى offline.html للتحقق مما إذا تم تخزينها مؤقتًا وجلبها مُسبقًا بشكل صحيح.

Tip – للحصول على تحليل شامل لميزات تطبيقات ويب تقدمية، قم بتشغيل أداة Lighhouse من Google لإنشاء تقرير.

تهانينا!

لقد نجحت في إنشاء تطبيق الويب التقدمي (PWA) باستخدام AMP! إنك تعلّمت في هذا البرنامج التعليمي:

اقرأ المزيد عن عمال الخدمةواعتبارات تجربة المستخدم في وضع عدم الاتصال. تعرّف على كيفيةتتبُّع التفاعل باستخدام التحليلات واتّبع البرنامج التعليمي حول كيفية تكوين التحليلات الأساسية لصفحات AMP.