وقتی حرف از آینده میشود، یاد گارسونهای رباتیک و ماشینهای پرنده میافتیم، اما قسمتی از آینده همین حالاست، آینده اپلیکیشنها و وبسایتها را میتوان PWA یا همان Progressive Web Apps بدانیم. تکنولوژی که تاثیر زیادی در lead generation برای کسبوکارها داشت.
جلسه سیزدهم جلسات باز نرمافزاری به همین موضوع تخصیص یافت و آرمین خدایی و علی سیدلر ارائهای برای شناخت بهتر این تکنولوژی داشتند. در این جلسه به معرفی وب اپلیکیشنهای پیشرونده (PWA)، نحوه عملکرد این اپلیکیشنها، چگونگی نصب و استفاده از آنها و مطالبی در مورد سئو آنها مطرح شد. در ادامه میتوانید خلاصهای از جلسه را مطالعه نمایید.
قسمت اول - ارائه آرمین خدایی
PWA چیست؟
سه تعریف جداگانه از ویکیپدیا، گوگل و توسعه دهندگان PWA در جلسه مطرح شد. PWA برای اولین بار در سال 2015، در طی همایش Google I/O معرفی کرد. در حالت کلی میتوان PWA ها را اپلیکیشنهایی دانست که دارای ویژگیهای زیر باشد.
Progressive: بدون درنظر گرفتن سیستم عامل و نسخه سیستم عامل، بتواند در هر دستگاهی از آن استفاده کرد.
Responsive: ریسپانسیو یا واکنشگرا باشد، یعنی در هر دیوایس با هر اندازه به درستی نمایش داده شود.
Connectivity independent: برای استفاده از اپلیکیشن نیازی به اتصال به اینترنت نداشته باشد.
App-Like: همانند اپلیکیشنهای نیتیو باشد و حس و حال استفاده از اپلیکیشنها داشته باشد.
Fresh: بتوانند به صورت خودکار آپدیت شود.
Safe: اتصال باید از طریق HTTPS باشد تا امن باشد.
Discoverable: باید از طریق موتورهای جستجو قابل دسترس باشد.
Re-engageable: امکان ارتباط با کاربران، مانند ارسال نوتیفیکشن، را داشته باشد.
Installable: بتواند بر روی دیوایس نصب شود.
Linkable: امکان به اشتراک گذاری با دیگران را داشته باشد.
چه تکنولوژیهایی پشت PWA وجود دارد؟
Progressive Web Apps دارای دو نوع فایل JavaScript است، یکی برای تبدیل اپلیکیشن به PWA و دیگری برای طراحی اعمال داخل اپلیکیشن. JS اول را Service Worker است، مانند یک پروکسی عمل میکند و زمانی که یوزر درخواستی را ارسال میکند، اگر در Cache اطلاعات درخواستی وجود داشت از کش، و اگر وجود نداشت از سرور اصلی اپلیکیشن دادهها را گرفته و به کاربر نمایش میدهد، همچنین آنها را در کش ذخیره میکند. با این سرویس میتوانید نوتیفیکیشن نیز ارسال کنید.
PWA ها فایل manifest نیز دارند که اطلاعات مانند نام برنامه، آیکونها، رنگ بکگراند و... را در این فایل میتوان مشخص کرد.
چرا باید از PWA استفاده کنیم؟
PWA ها هم مانند تمام تکنولوژیهای دیگر عیب و محسنات زیادی دارد. یکی از عیبهای آن در ایران کم بودن تعداد توسعهدهنده است.
بررسیهای متخصصین گوگل و ... نشان داد که کمتر از نصف کاربران وبسایتها، اپلیکیشن همان وبسایت را نصب میکنند. یکی از دلایل این امر، طولانی بودن مراحل پیدا کردن اپلیکیشن، و نصب آن بود که با به وجود آمدن PWA این پروسه بسیار کوتاه شد، کاربران بلافاصله بعد از ورود به وبسایت میتوانند اپلیکیشن را از داخل وبسایت نصب کنند. از طرفی مشخص شد که تعداد کاربران وبسایت بسیار بیشتر از اپلیکیشنها است اما مدت زمان حضور در اپ، بسیار بیشتر از وبسایت است. با حضور PWA ها میتوان از این پتانسیل استفاده کرد و تعداد بازدید بالا و مدت حضور و استفاده از اپ را با استفاده از PWA ها تلفیق کرد. یکی دیگر از مزیتهای PWA افزایش نرخ تبدیل است، با کمک این اپلیکیشنها میتوان بازدیدکنندگان را به مشتریان بالفعل تبدیل کرد.
مزیت اصلی دیگر PWA ها کم حجم بودن این اپلیکیشنهاست، به عنوان مثال اپلیکیشن Pinterest در نسخه iOS حدود 56 مگابایت، در نسخه اندروید، 9.6 مگابایت و در نسخه PWA حدود 150 کیلوبایت حجم دارد.
قسمت دوم - ارئه علی سیدلر
تاثیرات استفاده از PWA و AMP روی کسب و کار
علی سیدلر در ارائه خود بیشتر روی تاثیرات تکنولوژیهای PWA و AMP بر روی کسب و کار به خصوص از منظر سئو و تجربه کاربری پرداخت.
ابتدا در مورد یک داستان استارتاپی و فواید توسعه وب اپلیکیشن PWA از جمله نیاز به زمان و بودجه کمتر برای توسعه، نیاز کمتر به نیرو متخصص، همچنین تجربه کاربری (UX) بهتر به دلیل هماهنگی بین وبسایت و اپلیکیشن و ساختار مشابه و استاندارد آنها صحبت کرد.
پس از آن چند مورد از الگوریتمهای گوگل که به طراحی وبسایت برای موبایل مرتبط بود را به صورت مختصر توضیح داد از جمله:
- الگوریتم Mobile Geddon که در سال 2015 مطرح شد و تمرکز آن بر بهینه سازی وبسایت برای موبایل به خصوص بحث ریسپانسیو سایت بود مثلا اینکه کاربر وقتی در موبایل سایت شما رو مشاهده می کنه نیاز به زوم کردن برای خواندن یک متن نباشه
- بحث Mobile Friendly که در سال 2016 مطرح شد، بسیار جدیتر به بحث طراحی ریسپانسیو و استاندارد سازی وبسایتها برای نمایش در صفحات گوشی و تبلت پرداخت.گوگل از لحاظ مختلفی مانند بررسیهای تکنیکالی، وبسایتها را مورد بررسی قرار میدهد. این موضوع تا حدی مهم است که گوگل صفحهای برای بررسی مناسب بودن سایت برای موبایل یا به اصطلاح موبایل فرندلی طراحی کرد
- موج اول Mobile First Index که جولای 2018 آغاز شد. پیش از این تاریخ گوگل وبسایتها را اول با کراولر(Crawler) دسکتاپ بررسی میکرد و بعد با بررسی مناسب بودن وبسایت برای موبایلها تغییراتی روی آنها اعمال مینمود، اما بعد از این تاریخ گوگل برای اولین بار وبسایتها را با کروالر موبایل بررسی میشد، پس سرعت لود سایت روی موبایل و مناسب بودن اجزا سایت برای موبایل بسیار پر اهمیت شد.
- موج دوم Mobile First Index هم از سپتامبر 2018 آغاز شدهاست، پس، اگر می خواهیم کسبوکارمان رشد کند، باید سریعتر خودمان را با این تغییرات سازگار کنیم.
علی در ادامه نقشه راهی برای یادگیری سئو برای توسعه دهندگان ارائه کرد که به طور خلاصه میتوان آن را به صورت زیر بیان کرد.
ابتدا مباحث کلی دیجیتال مارکتینگ را مرور کنید و برو روی سئو تمرکز کنید. پس از آن باید با الگوریتمهای گوگل آشنا شوید و مباحث OnPage SEO و technical SEO به صورت کامل و دقیق فرا بگیرید.
خلاصه ای از جلسه قبلی سئو و انواع سئو گفته شد که بطور دقیقتر میتوانید از گزارش جلسه ششم با موضوع تکنیکال سئو به آنها دسترسی داشته باشید.
AMP چیست؟
Accelerated Mobile Pages یک فریمورک است که با محدود کردن فایل های جانبی مانند CSS و JS و بعضی تگهای HTML باعث افزایش سرعت بارگذاری اولیه وبسایت میشود که به دلیل استفاده از سرور های گوگل یک حالت cdn مانند هم داره.
PWAMP
ترکیب Progressive Web Apps با Accelerated Mobile Pages
PWA و AMP هر کدام مزایا و معایبی دارن که رابطه معکوس با یکدیگر دارند برای مثال AMP سرعت لود اولیه خوبی دارد اما کمی خشک و استاتیک است.در سمت مقابل PWA سرعت لود ثانویه بالایی دارد، داینامیکتر هست و همچنین قابلیت پوش ناتیفیکیشن دارد.ما می توانیم با ترکیب این دو باهم، یک وبسایت یا وباپلیکیشن با کیفیت و پرسرعت و زیبا داشته باشیم.
استفاده از این مورد به دلیل زمان لود پایین تر، تجربه کاربری بهتر و حتی HEO یا Human Eyes Optimization بهتر باعث افزایش رضایت مشتری و همچنین گوگل از وبسایت و کسبوکار ما میشود
.
در نهایت در مورد جملاتی که سئو کار های معروف گفته اند بحث شد که در زیر میتوانید با چند مورد آشنا شوید.
Nichola Stott
پول توی سرعته
Andrew Girdwood
سئو خوب از زمان نوشتن اولین داستان مشتریان (پرسونا) شروع میشه و هیچ وقت متوقف نمیشود.
Jose Capelo
محتوایی تولید کنید که هضم آن آسان باشه، سریع لود بشه، خواندنش لذت بخش باشه، گوش داده بشه و دیده شود.
Adam Gent
برای Mobile First Index آماده بشید و روی نیاز های کاربران موبایلی تمرکز کنید.
Jonathan Verrall
با استفاده از Mobile First Index به بالاها برسید سپس ارزیابی کنید که کاربران چگونه با محتوای شما مشغول می کنند.
برای دانلود اسلایدهای آرمین خدایی اینجا و برای دانلود اسلایدهای علی سیدلر اینجا کلیک کنید. به زودی فیلمهای این جلسه را هم میتوانید از کانال آپارات جلسات باز نرمافزاری مشاهده کنید.
PWA آینده وبسایتها و اپلیکیشنها:جلسه سیزدهم جلسات باز نرمافزاری
When it comes to the future, we think of robotic waiters and flying cars, but part of the future is right now; we can consider the future of applications and websites as PWA or Progressive Web Apps. A technology that has had a significant impact on lead generation for businesses.
The thirteenth session Open Software Sessions was dedicated to this topic, and Armin Khodai and Ali Seydler had a presentation to better understand this technology. In this session, the introduction of Progressive Web Applications (PWA), how these applications work, how to install and use them, and some SEO-related topics were discussed. You can read a summary of the session below.
Part One - Presentation by Armin Khodai
What is PWA?
Three separate definitions from Wikipedia, Google, and PWA developers were presented in the session. PWA was introduced for the first time in 2015 during the Google I/O conference. Generally, PWAs can be considered applications that have the following features.
Progressive: It should work on any device regardless of the operating system and version.
Responsive: It should be responsive, meaning it displays correctly on any device of any size.
Connectivity independent: It should not require an internet connection to use the application.
App-Like: It should feel like using native applications.
Fresh: It should be able to update automatically.
Safe: The connection must be through HTTPS to be secure.
Discoverable: It should be accessible through search engines.
Re-engageable: It should have the ability to communicate with users, such as sending notifications.
Installable: It should be able to be installed on devices.
Linkable: It should allow sharing with others.
What technologies are behind PWA?
Progressive Web Apps have two types of JavaScript files, one for converting the application to PWA and the other for designing actions within the application. The first JS is the Service Worker, which acts like a proxy and when the user sends a request, if the requested information exists in the Cache, it retrieves it from the cache, and if not, it fetches the data from the main application server and displays it to the user, also storing it in the cache. With this service, you can also send notifications.
PWAs also have a manifest file where information such as the app name, icons, background color, etc., can be specified.
Why should we use PWA?
PWAs, like all other technologies, have many advantages and disadvantages. One of its drawbacks in Iran is the low number of developers.
Google specialists' studies showed that less than half of website users install the app of the same website. One reason for this is the lengthy process of finding and installing the app, which has been significantly shortened with the advent of PWA; users can immediately install the application from within the website after entering it. On the other hand, it was found that the number of website users is much higher than that of applications, but the time spent in the app is much longer than on the website. With the presence of PWAs, this potential can be utilized, combining high visits and the duration of presence and use of the app with the use of PWAs. Another advantage of PWAs is the increase in conversion rates; with the help of these applications, visitors can be converted into actual customers.
Another main advantage of PWAs is their small size; for example, the Pinterest app is about 56 MB on iOS, 9.6 MB on Android, and about 150 KB in PWA version.
Part Two - Presentation by Ali Seydler
Effects of Using PWA and AMP on Business
Ali Seydler focused on the effects of the technologies PWA and AMP on business, especially from the perspective of SEO and user experience.
He initially discussed a startup story and the benefits of developing a web application PWA, including the need for less time and budget for development, less need for specialized personnel, and better user experience (UX) due to the coordination between the website and the application and their similar and standard structure.
After that, he briefly explained several of Google's algorithms related to mobile website design, including:
- The Mobile Geddon algorithm introduced in 2015, which focused on optimizing websites for mobile, particularly the responsive design aspect, such that users do not need to zoom in to read text when viewing your site on mobile.
- The Mobile Friendly discussion introduced in 2016 took a much more serious approach to responsive design and standardizing websites for display on mobile and tablet screens. Google evaluates websites from various technical perspectives. This issue is so important that Google created a page to check the mobile-friendliness of a site.
- The first wave of Mobile First Index began in July 2018. Before this date, Google first reviewed websites with a desktop (Crawler) and then made changes based on the suitability of the website for mobile, but after this date, for the first time, websites were reviewed with a mobile crawler, making the loading speed of the site on mobile and the suitability of site components for mobile very important..
- The second wave of Mobile First Index also started in September 2018, so if we want our business to grow, we must adapt more quickly to these changes..
Ali then presented a roadmap for learning SEO for developers, which can be summarized as follows.
First, review the general topics of digital marketing and focus on SEO. After that, you should familiarize yourself with Google's algorithms and thoroughly learn about OnPage SEO and technical SEO .
A summary of the previous SEO session and types of SEO was mentioned, which you can access more precisely from the report of the sixth session on technical SEO .
What is AMP?
Accelerated Mobile Pages is a framework that increases the initial loading speed of a website by limiting side files such as CSS and JS and some HTML tags, which due to the use of Google servers has a CDN-like state.
PWAMP
Combining Progressive Web Apps with Accelerated Mobile Pages
PWA and AMP each have advantages and disadvantages that are inversely related to each other; for example, AMP has good initial loading speed but is somewhat rigid and static. On the other hand, PWA has high secondary loading speed, is more dynamic, and also has push notification capabilities. By combining these two, we can have a high-quality, fast, and beautiful website or web application.
Using this combination leads to lower loading times, better user experience, and even better HEO or Human Eyes Optimization, which increases customer satisfaction as well as Google's satisfaction with our website and business.
.
Finally, there was a discussion about quotes from famous SEO experts, which you can get acquainted with below..
Nichola Stott
Money is in speed.
Andrew Girdwood
Good SEO starts from the moment you write the first customer story (persona) and never stops..
Jose Capelo
Create content that is easy to digest, loads quickly, is enjoyable to read, can be listened to, and seen..
Adam Gent
Prepare for Mobile First Index and focus on the needs of mobile users..
Jonathan Verrall
Use Mobile First Index to reach the top, then evaluate how users engage with your content..
To download Armin Khodai's slides, click here and to download Ali Seydler's slides, click here . Soon you will also be able to watch the videos of this session on the Aparat channel of Open Software Sessions .
PWA The Future of Websites and Applications: Thirteenth Session of Open Software Sessions
دیدگاهها Comments
هنوز دیدگاهی ثبت نشده. No comments yet.