شما بدون شک در مورد موج آینده وب تلفن همراه شنیده اید. رایج ترین چیزی که احتمالاً شنیده اید این است که دسترسی به وب تلفن همراه به سرعت در حال افزایش است و تقریباً نیمی از کل ترافیک وب از طریق تلفن یا رایانه لوحی انجام می شود. آ گزارش فوریه 2018 از مرکز تحقیقات پیو توجه داشته باشید که 95٪ از همه آمریکایی ها دارای تلفن همراه هستند ، در حالی که سهم آمریکایی ها از تلفن های هوشمند 77٪ است.

برای دیدن تأثیر موبایل لازم نیست خیلی دور بنگرید. به رفتار خود و خانواده خود نگاه کنید. در دسامبر 2016 ، comScore گزارش داد که متوسط ​​آمریکایی بالای 17 سال روزانه دو ساعت و 51 دقیقه را با تلفن خود می گذراند (Englais).

Statcounter.com متذكر مي شود كه ترافيك وب جهاني حداقل به مدت يك سال از دستگاه هاي تلفن همراه (حداقل 51,95٪ در فوريه 2018) حاصل مي شود.

اگرچه ممکن است فکر کنید که توانایی تهیه یک برنامه بومی را ندارید که کاربران تلفن همراه شما بتوانند آن را روی تلفنهای خود ذخیره کنند ، اما یک گزینه عالی برای همه مشاغل وجود دارد: برنامه های وب پیشرفته. شاید شما در مورد برنامه های وب پیشرو (PWA) و چگونگی استفاده مردم از آنها برای رشد تجارت خود شنیده باشید. در این مقاله ، کمی بیشتر در مورد PWA یاد خواهید گرفت و اینکه چرا باید بیشتر در مورد کاربرد آنها در سال 2018 فکر کنید.

برخی تعاریف

برنامه های وب پیشرو (PWA) مجموعه ای از استانداردهای وب است که در اصل توسط Google برای بهبود عملکرد وب سایت در دستگاه های تلفن همراه ایجاد شده است. بنابراین ، وب سایت ها بیشتر شبیه برنامه های موبایل اختصاصی هستند که می توانید آنها را در App Store اپل یا Google Play پیدا کنید.

دیگر تعریف توسعه دهندگان هتل های زنجیره ای هند Treebo: «PWA ها برنامه های تک صفحه ای هستند که به تدریج با ویژگی هایی بهبود می یابند که تجربه بومی همهجانبه تری را ارائه می دهند. »

با کاهش کمی این مورد ، PWA ها در دستگاه های تلفن همراه به خوانندگان و مشتریان شما امکان می دهند سریع صفحه اصلی سایت شما را بارگیری کرده و از بسیاری از ویژگی های مشابهی که یک برنامه بومی از آن استفاده می کند ، در دستگاه تلفن همراه استفاده کنند. سایت شما ممکن است خارج از مرورگر وجود داشته باشد ، حتی وقتی دستگاه به اینترنت متصل نباشد.

تعاریف دیگر

برخی از قسمتهای اصلی فنی PWA شامل موارد زیر است:

خدمات کارگران فناوری کلیدی مرتبط با PWA هستند. این اجازه می دهد تا PWA ها خارج از شبکه کار کنند.

فایل های منفرد حاوی نماد و نامی باشد که برنامه روی دستگاه را به وب سایت. توسعه‌دهنده همچنین می‌تواند عناصر طراحی را در اینجا اضافه کند تا تجربه مشتری شما را افزایش دهد.

اعلان ها را فشار دهید با کاربران خود (با اجازه خود) ارتباط برقرار کنید، بنابراین آنها دوباره می آیند.

بعضی دلایل

پس چرا سایت شما باید شامل PWA باشد؟ این بسیار ساده است.

عملکرد بهتر - حتی روی دسک تاپ!

می دانید که زمان محدودی برای برنده شدن دارید بازدید کننده برای اولین بار - شش ثانیه بارگیری قبل از اینکه مشتری بالقوه آن را ترک کند و از سایت بعدی در نتایج جستجو بازدید کند. کاربران تلفن همراه حتی بی حوصله تر هستند - اگر یک سایت بیش از 3 ثانیه طول بکشد، نیمی از کاربران بالقوه شما را ترک خواهند کرد!

خبر خوب: تغییراتی که شما برای ایجاد یک برنامه وب مترقی ایجاد می کنید باعث افزایش سرعت سایت شما می شود!

مثال: شرکت هتلی هندی Treebo با ایجاد PWA زمان شارژ تلفن همراه خود را از شش ثانیه به 1,5 ثانیه کاهش داد. اکنون سایت در یک ثانیه روی دسک تاپ بارگیری می شود! تیم فنی آنها گزارش دادند که رتبه بندی جستجوی سایت بهبود یافته و نرخ تبدیل ماهانه بیش از دو برابر شده است!

ظرفیت آفلاین

PWA برای این کار نیازی به حضور در اینترنت ندارد. کاربران شما می توانند از طریق دستگاه یا دسک تاپ خود به تمام محتوای برنامه دسترسی پیدا کنند.

در حقیقت ، یکی از بهترین موارد در مورد PWA این است که مشتری شما می تواند سایت را در صفحه اصلی دستگاه خود ذخیره کند و بعداً برای خرید محصول شما یا استفاده از آن از آن استفاده کند. .

برای مثال، CNET Tech امروز خلاصه ای روزانه از اخبار مربوط به فناوری را که نان روزانه سایت است ، ارائه می دهد. اگر سایت را با Google Chrome در دستگاه Android باز کنید و به پایین صفحه بروید ، این را مشاهده خواهید کرد:

PWA را به صفحه اصلی تلفن همراه اضافه کنید. فروشگاه برنامه لازم نیست!
PWA را به صفحه اصلی تلفن همراه اضافه کنید. به فروشگاه برنامه ای نیاز نیست!

مطبوعات افزودن به صفحه اصلی برای بارگیری برنامه وب پیشرفته Tech Today در دستگاه خود. برای بارگیری 10 داستان برتر فعلی ، روی نماد ضربه بزنید. برای خواندن هر داستان ، انگشت خود را به سمت چپ بکشید. روی آرم CNET ضربه بزنید تا صفحه اصلی CNET در مرورگر شما باز شود.

Remarque : در Firefox ، سایتهای دارای PWA نماد "افزودن به صفحه اصلی" (علامت بعلاوه در یک جعبه کوچک) را مستقیماً در نوار آدرس دارند. اگر PWA از قبل نصب شده باشد ، آرم Android در نوار آدرس شما را به PWA می رساند.

چیزی که سایت شما به آن نیازی ندارد: ابزارک های "بارگیری برنامه ما" در صفحه شما جا می گیرد (معمولاً با آرم های iTunes و Android باعث منحرف شدن کاربران می شود). اگر Chrome متوجه شود که یک کاربر چندین بار در هفته سایت PWA شما را باز کرده است ، از شما می خواهد PWA خود را اضافه کنید. به روز رسانی ها نیز به صورت خودکار انجام می شوند.

بدون نیاز به زبان برنامه نویسی پیچیده

ممکن است به فکر ساختن یک اپلیکیشن موبایلی بومی برای کسب و کار خود بوده باشید، اما متوجه شده اید که ساختن یک اپلیکیشن موبایل حیوانی متفاوت از ساختن یک اپلیکیشن است وب سایت. اگر با یک آژانس طراحی/توسعه وب برای حفظ سایت خود کار می کنید، آنها لزوماً مهارت ساخت یک برنامه برای فروشندگان رایج تلفن همراه را ندارند.

برای اینکه نرم افزار شما در فروشگاه App Apple ظاهر شود ، توسعه دهندگان شما باید در Apple Developer Network ثبت نام کنند ، از Apple Developer Tool (که فقط در Mac کار می کند) استفاده کنند و یک زبان را بدانند اپل برنامه نویسی را تأیید کرده است: Swift یا Objective C

برنامه نویسی برای Android کمی آسان تر است (به تأیید توسعه دهنده نیازی نیست) ، اما اکثریت قریب به اتفاق برنامه های اندروید به زبان جاوا نوشته شده اند که یادگیری آن می تواند زبان دشواری باشد.

برای اینکه برنامه در فروشگاه های آنلاین اپل یا اندروید ظاهر شود ، برنامه تکمیل شده باید از متولیان فروشگاه مربوطه تأیید شود.

در مقابل ، برنامه های وب پیشرونده با استفاده از زبانهای محبوب وب ساخته می شوند: HTML ، CSS (Cascading Style Sheets) و JavaScript. به طور خلاصه ، حتی توسعه دهندگان وب مبتدی نیز می توانند PWA های با کیفیت بالا بسازند.

به طور خاص ، برای انجام PWA برای سایت وردپرس خود نیازی به آموزش کامپیوتر زیاد ندارید. اگر قبلاً قالب بندی سایت خود را با استفاده از طرح زمینه کودک تغییر داده اید ، می توانید یک فایل PWA نیز ایجاد کنید. ما در مقاله دیگری به موارد کدگذاری خواهیم پرداخت.

حمایت از غول های فناوری را افزایش دهید

استاندارد شدن مدت زیادی طول می کشد تا استاندارد شود. گوگل اولین بار PWA ها را در سال 2015 تبلیغ کرد.

برای مدت زمان طولانی ، Chrome تنها مرورگری بود که از PWA پشتیبانی می کرد ، اما این در حال تغییر است. در ماه های اخیر:

  • Mozilla پشتیبانی PWA را در Firefox 58 اضافه کرده است
  • اپل اخیراً از پشتیبانی برنامه های وب در iOS خبر داد
  • مایکروسافت از PWA در نسخه بعدی ویندوز 10 پشتیبانی می کند ، که اواخر امسال (2018) در دسترس خواهد بود.

فراتر از سایر فروشندگان سیستم عامل ، مایکروسافت گفته است که PWA های "با کیفیت بالا" به زودی در فروشگاه برنامه ویندوز 10 در تلفن همراه و دسک تاپ ادغام می شوند.

وردپرس و PWA ها

وردپرس هنوز به طور کامل از ایجاد برنامه های وب پیشرو در برنامه پایه پشتیبانی نمی کند. تیم Jetpack متعهد به افزودن قابلیت های PWA در سال آینده است. با کمک Javascript-ification وردپرس کمک می کند.

سازنده می گوید "Jetpack" به تدریج ویژگی های PWA را معرفی می کند دن والمسی در یک مقاله در وبلاگ وردپرس VIP . توسعه دهندگان می توانند از نسخه 5.6.0 با استفاده از ماژول مانیفست Jetpack ، پرونده های مانیفست را اضافه کنند و آنها بارگیری تصاویری تدریجی را معرفی کرده اند ، که باعث بارگذاری سایت حتی در صورت وجود تصاویر زیاد در آن می شود. صفحه. امسال ویژگی های بیشتری ارائه می شود.

چند پلاگین به دنبال اضافه کردن قابلیت PWA هستند ، اما به شدت مورد استفاده قرار نگرفته اند.

  • ابزار بهینه سازی وردپرس ابزاری کارآمد و آشکار را ارائه می دهد.
  • Super Progressive Web Apps ، از جمله سایر ویژگی ها ، یک مانیفست و یک دکمه افزودن به صفحه اصلی ایجاد می کند.
  • WordPress Mobile Pack همچنین ویژگی های PWA را اضافه می کند

چگونه می خواهید از PWA استفاده کنید؟

در این آموزش شما کمی در مورد برنامه های وب پیشرفته و اینکه چرا باید یکی را به آن اضافه کنید، یاد گرفتید وب سایت شرکت شما:

  • موج رو به رشد ترافیک دستگاه تلفن همراه
  • عملکرد بهتر برای وب سایت خود - تلفن همراه و دسک تاپ
  • در دسترس بودن حتی وقتی دستگاه آفلاین است
  • از ویژگی های استاندارد وب استفاده می کند: HTML ، CSS و Javascript. ساخت ارزان تر
  • افزایش پشتیبانی از مرورگرها و سیستم عامل ها

شاید اکنون می خواهید بدانید که چگونه PWA را در وردپرس انجام دهید؟ یا به توسعه دهندگان خود نشان دهید که چگونه این کار را انجام دهند؟ این موضوع آموزش دیگری خواهد بود.