نویسنده : pishro | نظرات (0)
نکته جالب در مورد این تکنیک این است که شما اکنون از پیشرفت تدریجی برای رفتن از AMP به PWA استفاده می کنید. با این حال ، این همچنین بدان معنی است که ، به عنوان مثال ، مرورگرهایی که هنوز از کارگران پشتیبانی نمی کنند از AMP به AMP می روند و هرگز در واقع به PWA نخواهند رفت.
AMP این مسئله را با چیزی به نام بازنویسی پوسته URL حل می کند. با افزودن یک الگوی URL برگشتی به برچسب <amp-instal-serviceworker> ، به AMP دستور می دهید که تمام پیوندهای منطبق را در یک صفحه مشخص بازنویسی کند تا در عوض ، اگر هیچ پشتیبانی کارگر سرویس شناسایی نشده است ، به یک URL پوسته قدیمی دیگر برود:
<amp-install-serviceworker
src = "https://www.your-domain.com/serviceworker.js"
layout = "نمایش گره"
data-no-service-working-fallback-url-match = ". *"
data-no-service-working-fallback-shell-url = "https://www.your-domain.com/pwa">
</amp-instal-serviceworker>
با در اختیار داشتن این ویژگی ها ، صرف نظر از هر کارگر خدماتی ، کلیه کلیک های بعدی بر روی AMP به PWA شما ارسال می شود. خیلی شسته و رفته ، ها؟
بنابراین ، اکنون کاربر در برنامه وب مترقی است و احتمالاً شما از برخی از ناوبری های AJAX استفاده می کنید که محتوا را از طریق JSON واکشی می کند. مطمئناً می توانید این کار را انجام دهید ، اما اکنون این نیازهای زیرساختی دیوانه وار برای دو محتوای کاملاً متفاوت وجود دارد - یکی تولید صفحات AMP و دیگری API مبتنی بر JSON برای برنامه وب پیشرو شما.
اما یک لحظه به این فکر کنید که AMP واقعاً چیست. این فقط یک وب سایت نیست. این به عنوان یک واحد محتوای فوق العاده قابل حمل طراحی شده است. AMP از نظر طراحی مستقل است و می تواند با خیال راحت در وب سایت دیگری جاسازی شود. اگر بتوانیم با خاموش کردن API اضافی JSON و به جای آن از AMP به عنوان قالب داده برای برنامه وب پیشرو خود استفاده مجدد کنیم ، پیچیدگی بازگشت به آخر را به طرز چشمگیری ساده کنیم؟
از صفحات پیشرفته تلفن همراه Google (AMP) گرفته سئو چیست تا برنامه های وب مترقی
صفحات AMP را می توان با خیال راحت در وب سایت دیگری جاسازی کرد - کتابخانه AMP فقط برای یکبار برای کل PWA کامپایل و بارگیری می شود.
البته ، یک راه آسان برای انجام این کار ، بارگذاری صفحات AMP در فریم ها است. اما iframes کند است و پس از آن شما باید مرتباً کتابخانه AMP را دوباره کامپایل و دوباره مقداردهی کنید. فناوری پیشرفته وب امروز روش بهتری را ارائه می دهد: سایه DOM.
روند کار به این شکل است:
PWA هر کلیک ناوبری را رد می کند.
سپس ، یک XMLHttpRequest برای واکشی صفحه AMP درخواستی انجام می دهد.
این محتوا را در یک ریشه سایه جدید قرار می دهد.
و به کتابخانه اصلی AMP می گوید: "سلام ، من سند جدیدی برای شما دارم. آن را بررسی کنید! " (در هنگام اجرا با attachShadowDoc تماس بگیرید).
با استفاده از این تکنیک ، کتابخانه AMP فقط یک بار برای کل PWA کامپایل و بارگیری می شود و سپس مسئولیت هر سند سایه ای را که به آن ضمیمه می کنید ، بر عهده دارد. و چون از طریق XMLHttpRequests صفحات را واکشی می کنید ، می توانید منبع AMP را قبل از قرار دادن آن در سند سایه جدید تغییر دهید. برای مثال می توانید این کار را انجام دهید:
موارد غیرضروری را حذف کنید ، مانند سرصفحه ها و پاورقی ها.
درج مطالب اضافی ، مانند تبلیغات ناخوشایند یا نکات مهم فانتزی ؛
محتوای خاص را با محتوای پویاتر جایگزین کنید.
اکنون ، شما برنامه وب پیشرفته خود را بسیار پیچیده تر کرده اید ، و پیچیدگی زیرساخت های back-end خود را به طرز چشمگیری کاهش داده اید.
آماده ، تنظیم ، اقدام!
برای نشان دادن رویه سایه DOM (یعنی AMP درون PWA) ، تیم AMP یک نسخه نمایشی مبتنی بر React به نام The Scenic ، یک مجله سفر جعلی ایجاد کرده اند:
از صفحات پیشرفته تلفن همراه Google (AMP) گرفته تا برنامه های وب مترقی
کل نسخه ی نمایشی در GitHub است ، اما جادوگری در کامپوننت amp-document.js 'React اتفاق می افتد.
چیزی واقعی را به من نشان دهید
برای یک نمونه تولید واقعی ، به PWA جدید Mic نگاه کنید (در نسخه بتا): اگر یک مقاله تصادفی را بارگیری مجدد کنید (که به طور موقت سرویس کار را نادیده می گیرد) و کد منبع را مشاهده می کنید ، متوجه می شوید AMP است صفحه اکنون سعی کنید روی منوی همبرگر کلیک کنید: این صفحه صفحه فعلی را بارگیری مجدد می کند ، اما از آنجا که <amp-instal-serviceworker> قبلا پوسته برنامه PWA را نصب کرده است ، بارگیری مجدد تقریباً فوری انجام می شود و بعد از تازه سازی منو باز می شود و به نظر می رسد هیچ بارگیری مجدد اتفاق نیفتاده است. اما اکنون شما در PWA (صفحات AMP را جاسازی می کنید) ، زنگ ها و سوت ها و همه موارد دیگر هستید. اب زیر کاه اما باشکوه.
(نه چندان) افکار نهایی
نیازی به گفتن نیست که من از پتانسیل این ترکیب جدید بسیار هیجان زده هستم. این ترکیبی است که بهترین ها را به نمایش می گذارد