نویسنده : pishro | لینک ثابت | نظرات (0)
برای اینکه سریعاً تجربه را سریع کنید ، هنگام اجرای صفحات AMP باید با محدودیت هایی روبرو شوید. AMP درصورت نیاز به عملکرد بسیار پویا ، مانند فشار دادن اعلان ها یا پرداخت های وب ، یا هر چیز دیگری که به JavaScript اضافی نیاز دارد ، مفید نیست. علاوه بر این ، از آنجا که صفحات AMP معمولاً از طریق AMP Cache ارائه می شوند ، با اولین کلیک بزرگترین مزایای برنامه وب پیشرفته را نخواهید داشت ، زیرا سرویس کارگر خود نمی تواند اجرا شود. از طرف دیگر ، یک برنامه وب پیشرونده هرگز نمی تواند به همان سرعت AMP با این کلیک اول سریع باشد ، زیرا سیستم عامل ها می توانند با خیال راحت و ارزان صفحات AMP را از قبل ارائه دهند - ویژگی ای که همچنین جاسازی را ساده تر می کند (به عنوان مثال در یک بیننده درون صفحه ای).
از صفحات پیشرفته تلفن همراه Google (AMP) گرفته تا برنامه های وب مترقی
هنگامی که کاربر با کلیک بر روی پیوند داخلی ، از حافظه پنهان AMP خارج شد ، می توانید با نصب کارگران خدمات ، وب سایت را ارتقا دهید تا وب سایت به صورت آفلاین (و موارد دیگر) در دسترس قرار گیرد.
بنابراین ، AMP یا برنامه وب مترقی؟ تحویل فوری و تحویل بهینه ، یا جدیدترین ویژگی های سیستم عامل پیشرفته و کد برنامه انعطاف پذیر؟ اگر راهی برای تلفیق این دو وجود داشت ، تا از مزایای هر دو بهره مند شوید؟
سفر کاربر کامل
کسب درآمد مکرر در زمینه طراحی سئو چیست و توسعه فروشگاه های تجارت الکترونیک
امروز ثبت نام کنید
در پایان ، آنچه مهم است تجربه کاربری ایده آلی است که شما برای آن هدف گذاری کرده اید - سفر کاربر. به این شکل پیش می رود:
کاربر پیوندی را به محتوای شما کشف کرده و آن را کلیک می کند.
این محتوا تقریباً بلافاصله بارگیری می شود و مصرف آن لذتبخش است.
کاربر با نرم افزار ناوبری نرم افزاری ، فشار دادن اعلان ها و پشتیبانی آفلاین دعوت شده و به طور خودکار به تجربه حتی غنی تری ارتقا می یابد.
کاربر فریاد می زند ، "چرا ، سلام. هک آره! " و بلافاصله به یک تجربه مشابه برنامه هدایت می شود و آنها می توانند سایت را بر روی صفحه اصلی خود نصب کنند.
اولین پرش به وب سایت شما باید تقریباً فوری احساس شود و پس از آن تجربه مرور هر چه بیشتر جذاب شود.
خیلی خوب به نظر می رسد درست باشد؟ خوب ، اگر این دو فناوری را با هم ترکیب کنیم چه اتفاقی می افتد - اگرچه در نگاه اول ، ظاهراً ارتباطی با هم ندارند و نیازهای مختلف را برطرف می کنند؟
الگوهای ترکیبی PWAMP
برای رسیدن به تجربه بارگیری فوری و به روزرسانی خودکار ، تنها کاری که شما باید انجام دهید این است که نازک بودن لیزر AMP را با غنای برنامه های وب پیشرو در یک (یا چند روش) زیر ترکیب کنید:
AMP به عنوان PWA. وقتی می توانید با محدودیت های AMP زندگی کنید.
AMP به PWA. وقتی می خواهید به راحتی بین این دو جابجا شوید.
AMP در PWA. وقتی می خواهید از AMP به عنوان منبع داده برای PWA خود استفاده مجدد کنید.
بیایید از طریق هر یک از آنها جداگانه قدم بزنیم.
AMP AS PWA
بسیاری از وب سایت ها هرگز به مواردی فراتر از مرزهای AMP نیازی نخواهند داشت. به عنوان مثال ، آمپ با مثال هم AMP است و هم یک برنامه وب پیشرونده:
این کارگر خدماتی دارد و بنابراین ، از جمله موارد دیگر ، امکان دسترسی آفلاین را فراهم می کند.
این یک مانیفست است که باعث می شود آگهی "افزودن به صفحه اصلی".
هنگامی که یک کاربر از جستجوی Google از Amp by Example دیدن می کند و سپس بر روی پیوند دیگری در آن وب سایت کلیک می کند ، از AMP Cache به سمت مبدا حرکت می کند. البته این وب سایت هنوز از کتابخانه AMP استفاده می کند ، اما از آنجا که اکنون در مبدا زندگی می کند ، می تواند از یک سرویس دهنده استفاده کند ، می تواند نصب کند و غیره.
می توانید از این روش برای دسترسی آفلاین به وب سایت AMP خود استفاده کنید و همچنین صفحات خود را به محض ارائه از مبدا extend گسترش دهید ، زیرا می توانید پاسخ را از طریق رویداد واکشی کارگر سرویس تغییر دهید ، و به عنوان یک پاسخ هرچه باشد شما می خواهید:
تابع createCompleteResponse (هدر ، بدنه) {
قول را برگردانید. همه ([
header.text () ،
getTemplate (RANDOM STUFF AMP دوست ندارد) ،
متن بدنه()
]). سپس (html => {
پاسخ جدید را بازگردانید (html [0] + html [1] + html [2] ، {
سرصفحه ها: {
'Content-Type': 'text / html'
}
})
})
}
کپی 🀄
این روش به شما امکان می دهد اسکریپت ها و قابلیت های پیشرفته تری را خارج از دامنه AMP در کلیک های بعدی وارد کنید.
SQUARESPACE
دامنه دریافت کنید و با Squarespace یک وب سایت ایجاد کنید
یک آزمایش رایگان را شروع کنید
AMP به PWA
وقتی موارد بالا کافی نیست و شما می خواهید تجربه PWA کاملاً متفاوتی در مورد محتوای خود داشته باشید ، زمان یک الگوی کمی پیشرفته تر است:
تمام صفحات "برگ" محتوا (آنهایی که دارای محتوای خاص هستند و نه صفحات کلی) به عنوان AMP برای آن تجربه بارگیری تقریباً فوری منتشر می شوند.
این AMP ها از عنصر ویژه AMP <amp-instal-serviceworker> برای گرم کردن حافظه پنهان و پوسته PWA در حالی که کاربر از محتوای شما لذت می برد استفاده می کنند.
هنگامی که کاربر پیوند دیگری را در وب سایت شما کلیک می کند (به عنوان مثال ، تماس برای اقدام در یک تجربه بیشتر مانند برنامه) ، کارگر سرویس درخواست را رهگیری می کند ، صفحه را تصاحب می کند و در عوض پوسته PWA را بارگیری می کند.
شما می توانید تجربه فوق را در سه مرحله آسان پیاده سازی کنید ، مشروط بر اینکه با نحوه کار سرویسکاران آشنا باشید. (اگر شما نیستید ، پس من بسیار توصیه می کنم همکارم Jake’s Udacity). ابتدا سرویس کار را روی همه AMP های خود نصب کنید:
