PWA یا فلسفهای برای ساختن وب اپلیکیشن ها
در این مقاله قصد داریم PWA یا فلسفهای برای ساختن وب اپلیکیشن ها را برای شما شرح دهیم.
Progressive Web App چیست؟ اپلیکیشن میباشد یا وب سایت یا سایتی میباشد مشابه نرم افزار؟
چرا می بایست وب سایتها را مشابه نرم افزار ساخت؟ پراگرسیو وب اپها چه خصوصیتها و مزایایی داراهستند و چطور توسعه داده می شوند؟
اصلا وقتی وب سایت میباشد چه نیازی میباشد به وب اپلیکیشن و نوع پراگرسیو آن؟
دراین مقاله جواب سوال های طرحشده را خواهید خواند و با پراگرسیو وب اپلیکیشنها تماما آشنا خواهید شد.
اینجانب روی تلفن همراه موبایلم ۱۴ اپلیکیشن نصب کردهام. شما هم در صورتیکه توجه نمائید به عدد مشابه یا حتی بزرگتری میرسید.
خیلی از ما ترجیح میدهیم بهجای بازکردن گوگل در مرورگر، اپ گوگل را روی موبایلمان نصب کنیم و از آن استفاد کنیم.
زیرا کار با نرم افزارها در بسیاری از مورد ها راحتتراز سایتهاست و نرمافزارها قابلیت و امکانهایی داراهستند که وب سایتها ندارند.
نرم افزارها در هرزمان و مکانی دردسترس مخاطب میباشند و برای کار با بسیاری از آن ها نیازی نیست که به اینترنت متصل بود.
استفاده کننده در اپلیکیشن خیلی راحت میتواند اطلاعاتی را که می خواهد، ذخیره نماید.
به عنوان مثال، زمانی شما اپلیکیشنی مانند Apple Health را روی موبایل نصب می کنید، میتوانید کل داده های مربوط به بهداشت و سلامت شخصی خود را در آن وارد کنید و آن ها را دریکجا داشته باشید.
درواقع، انگار بهنظر می رسد که نرمافزارها از گوشی ما جداییناپذیرند و ازاول آنجا بودند و ما آنانرا نصب نکرده ایم.
خب حال تصور کنید باکمکگرفتن از یک تکنولوژی بتوان سایتها را به نرم افزارهایی که روی موبایلمان نصب کنیم، نزدیکتر کرد. بهتر نیست؟
دسترسی ما به آن وب سایتها راحتتر و سریعتر نمیشود؟معلوم است که می شود.
دقیقا بههمیندلیل بود که پراگرسیو وب اپها راه خود را به دنیای طراحی و پیشرفت وب سایتها باز کردند.
Progressive Web App (PWA یا فلسفهای برای ساختن وب اپلیکیشن ها)چیست؟
قبلاز اینکه بشود پراگرسیو وب اپلیکیشن را تعریف کرد، لازم میباشد به دو نکتهی ضروری اشاره کنم:
اول، بحث راجعبه وب اپهای پراگرسیو از سال ۲۰۱۵ شروع شدهاست و باید گفت که در تعریف دقیق آن هنوز اختلافنظرهایی وجود داراست.
دوم، برای درک خوب این تکنولوژی می بایست کمی در مورد Web Application & Native Application و حتی اینکه وب سایت چیست توضیحاتی داده شود.
وب سایت نرمافزاری است که روی سرور اینترنتی (هاست) نصب میگردد و ازطریق دامنه دردسترس کاربران قرار می گیرد.
برای دسترسی به وب سایتها حتما بایستی به اینترنت دسترسی داشت و متصل بود. وب سایت بر بستر اینترنت ساخته می شود.
سایتها ممکن میباشد داینامیک یا استاتیک باشند.
Native Application یا به عبارتی اپهایی که من و شما روی تلفن همراههای اندرویدی یا IOS خود نصب می کنیم، نرمافزاری میباشد که یکبار روی سیستم نصب می شود و از تجهیزات سیستم استفاده مینماید یعنی مثلا قادر است Notification برای مخاطب بفرستد.
اپلیکیشن کار خاص و مشخصی انجام میدهد و مخصوص یک پلتفرم (IOS or Android) پیشرفت داده می شود.
برای به کار گیریاز کلیهی نرم افزارها نیاز نیست به اینترنت متصل بود.
Web Application نوعی نرم افزار (اپلیکیشن) میباشد که روی سیستم نصب نمیشود بلکه در مروگر اجرا میشود.
وب اپها روی موبایل نصب نمیشوند و مخصوص پلتفرم خاصی پیاده سازی و توسعه داده نمی شوند.
آنها وبسایتهایی برای انجامدادن کار خاصی می باشند. Gmail یک وب اپ میباشد.
پراگرسیو وب اپلیکیشن وبسایتی میباشد که بسیار مشابهبه یک نرم افزار ساخته شده است و قابلیت و امکانها و تجهیزات اپلیکیشنها و وب سایتها را باهم دارد.
وب اپلیکیشنها برای اینکه عملکرد عالی و سریعتری داشته باشند و نیاز نباشد استفاده کننده را برای بار گذاری کامل صفحه معطل نمایند، از تکنولوژی مهمی بهاسم AJAX کمک می گیرند.
(ایجکس) چیست؟
برای دانستن ایجکس بایستی اول توضیح دهیم که وبسایتها و وب اپلیکیشنها پیش از آن چطور فعالیت میکردند و ایجکس چه تغییری ایجاد نموده است.
هر وبسایت یا وب اپ دارای دو طرف می باشد: Frontend and Backend. فرانت طرفی میباشد که استفاده کننده قرار می گیرد و کل آنچیزهایی که وی روی صفحه میبیند.
بکاند طرف Server میباشد، پشتصحنه. جاییکه اطلاعات و دادهها ذخیره گردیدهاند و جاییکه دستورها اجرا می گردد.
زمانیکه شما وارد صفحهای می شوید و روی چیزی کلیک می کنید یا درخواستی دارید، فرمانی به بکاند فرستاده می گردد.
آن پشت کاری باید صورت بپذیرد (دادهها خوانده شوند و جواب داده شود و آنگاه درقالب کد دربیایند) و نتیجهی آن به صفحه (فرانت) منتقل و به استفاده کننده نشان داده گردد.
برای انتقال داده ها دراین فرایند از زبانهای اپنویسی (کُدها) و تکنولوژیهای مختلفی به کار گیری می شود.
از جمله Java, JavaScript & PHP زبانهای نوشتن بکاند و HTML, CSS, JQuery & JavaScript زبانهای تایپ کردن فرانت.
چرا تکنولوژی PWA، مخصوصا برای کسبوکارها و وب سایتهای فروشگاهی، اصلی میباشد؟
هرروز به تعداد کاربران وب و تلفن همراه در دنیا افزوده میگردد. این فرایند روبهرشدی میباشد که از چندسال پیش شروع گردیدهاست.
هنگامی که کاربران بیشتری به نت دسترسی دارند، یعنی شغل و زندگی شخصی و اجتماعی آن ها بیشتر به فضای مجازی و وب گره خورده میباشد.
درنتیجه، بشرها کالاها و خدماتی را که نیاز دارند در وب پیدا مینمایند و بخشیاز زندگی اجتماعی آنان در کانالهای اجتماعی صورت میگیرد.
این مراحل برای کارها بسیار بسیار حائز اهمیت میباشد.
کارهایی که بخواهد در بازار امروز جایی داشته باشد و بماند بایستی کالاها و خدمات خویش را ازشیوه وبسایت و نرم افزار نیز عرضه نماید.
در دنیای امروز، سایت یابرنامه تلفن همراهداشتن برای کارها به یک بایستگی تبدیل شدهاست. ولی، نکتهی اساسی اینجاست که کاربران با هر وبسایتی ارتباط برقرار نمی کنند و آن را نمیپذیرند.
مخاطب وبسایت می بایست تجربیات و تعاملی رضایتبخش با آن داشته باشد.
درغیراینشکل، دیگر به آن وب سایت مراجعه نمینماید (یعنی خرید نمینماید) یا این که نرم افزار را پاک مینماید.
پس، این مخاطبان میباشند که برای کارها و طراحان وبسایت معلوم مینمایند چهنوع سایتی را ترجیح می دهند.
کاربران وبسایتی میخواهند که سریع باشد و در دستگاههای متعدد (مخصوصا گوشی، زیرا نیمیاز ترافیک تارنماها از دستگاههای تلفن همراه میباشد) عالی و بی نقص نمایش داده خواهد شد.
کاربران نرم افزارها را دوست دارند، زیرا همیشه دردسترس آنها میباشند و می شود آفلاین نیز از آنها استفاده نمود؛ سریع می باشند و نیاز نیست برای لود ورقه درانتظار بمانند؛ با سیستم عامل موبایل آن ها سازگار میباشد و انگار بخشیاز آن میباشد.
پس، می توان اینطور نتیجه گرفت که کاربران سایتهایی را که مثل نرم افزارها رفتار نمایند، دوست داراهستند.
درنتیجه، زمانی وبسایت کسبوکاری تجربهای شبیهبا تجربهی تعامل با یک نرم افزار را به استفاده کننده میدهد، برای استفاده کننده دوستداشتنیتر و دیدنیتر میباشد.
اینترنت نرم افزارهای پراگرسیو وبسایتهایی می باشند که تجربهی تعامل با آنها مانند تعامل با یک نرم افزار میباشد چون مثل نرم افزارها رفتار مینمایند.
PWA ابتکار کیست و ازکجا آمده؟
هرچه کاربردهای تلفنهای هوشمند بیشتر شد، این ایده که وب سایتها عملکرد بهتری برای کاربران گوشی و در تلفن همراهها داشته باشند، اصلیتر شد.
در سال ۲۰۱۵ بود که Alex Russell، که یک کدام از مهندسان گوگل کروم میباشد، باهمراهی دیزاینری بهاسم Frances Berriman در مقالهای برای اولینبار عبارت Progressive Web App را بهکار بردند.
بعداز آن بود که بحثها و اختلافنظرهای متعددی درمیان برنامهنویسان و گسترشدهندگان دربارهی این مسئله شکل گرفت.
گوگل هم از آن مفهوم استقبال کرد. مرورگرهای متفاوت (سافاری، کروم ، مایکروسافت اج و …) ورژنهای بعد از آناز سال ۲۰۱۵ خویش را با PWA سازگار کردند.
خود Alex Russell وب اپ پراگرسیو را اینطور تعریف نموده است:
یک وب اپ پراگرسیو عملا با خصوصیتهای تکنیکال یا فنیاش تعریف می شود.
آن خصوصیتهای فنی به مرورگر قابلیت و امکان میدهد تا تشخیص دهد که وبسایت معیارهای خاصی را دارد و همینطور این ارزش را داراست که به هوم اسکرین دستگاه افزوده گردد.
هنگامی که وبسایت در دستگاههای گوناگون بااندازهی اسکرینهای متعدد خوب و بدون نقص نمایش داده میگردد، یعنی عکس العملگرا یا این که ریسپانسیو پیاده سازی گردیدهاست.
خصوصیتهای پراگرسیو وب اپها چیست؟
چهچیزی یک وب اپ را پراگرسیو مینماید؟ اگر وب اپها چه خصوصیتهایی داشته باشند، به آن ها پراگرسیو می گویند؟
معمولا یک وب اپ پراگرسیو خصوصیتهای پایین را دارد (پیاده سازی برخوردگرا هم از خصوصیتهای این وب اپهاست که تا قبل از این به آن اشاره شد.):
۱. Installable
وب اپها را می توان روی گوشیهای هوشمند نصب کرد، درست مانند نرم افزارها.
پس، آیکون وب اپهای پراگرسیو به Home Screen موبایل اضافه میگردد.
۲. Network independent
بله، غالب وب اپهای پراگرسیو زمانیکه مخاطب آفلاین میباشد یا اینترنت ضعیفی دارد هم فعالیت مینمایند.
توجه نمایید شاید چنانچه اینترنت نرم افزار پراگرسیو وابسته به یک رستوران باشد، استفاده کننده نتواند آفلاین پیشنهاد ثبت نماید.
البته مسلما درحالت آفلاین وب اپ پراگرسیو باز و صفحهی اصلی آن و منو اکران داده میگردد.
۳. Linkable
مخاطب قادر است URL وب اپ پراگرسیوی را که روی موبایلش نصب نموده است، برای سایرافراد بفرستد.
۴. Discoverable
موتورهای کاوش می توانند محتوا و صفحه های اینترنت اپلیکیشنهای پراگرسیو را ایندکس نمایند و در نتایج کاوش نشان دهند.
این خصوصیت در اپلیکیشنها وجود ندارد.
۵. Re-engageable
وب اپهای پراگرسیو، برعکس نرم افزارها، همیشه نیاز به آپدیت ندارند و پیغام به روزشدن به استفاده کننده نمیدهند.
هربار که استفاده کننده به وب وصل خواهد شد، محتوای نو به وب اپ افزوده و کاربر نیز از آن آگاه می گردد.
۶. Secure
وب اپهای پراگرسیو امن میباشند و ارتباط بین استفاده کننده و نرمافزار و سرور از هرگونه مداخلهی ثالث درامان میباشد.
۷. Progressively enhanced
وب اپهای پراگرسیو در هر دستگاهی و هر مرورگری اجرا میگردند و عملکردی متناسببا تجهیزات و قابلیت و امکانهای همان دستگاه و مرورگر دارا هستند.
یعنی ممکن میباشد برخیاز تجهیزات وب اپی در ورژنهای قدیمی مرورگری یا این که سیستم عامل موبایلی انجام نشود، بااینوجود وب اپ برای مخاطب سعی مناسبی در آن مرورگر یا این که گوشی دارد.
چطور می توان فهمید که یک وب اپ پراگرسیو میباشد؟
استفاده کننده نمیفهمد که وب اپی پراگرسیو میباشد یا خیر. چون این چیزی نیست که جایی در وب سایت اعلام گردد یا این که مرورگری که وبسایت را باز مینماید به مخاطب اطلاع دهد.
همانطور که پیش از این هم اشاره شد، هنگامی وب اپی خصوصیتهای خاصی دارد که آن را بسیار به یک نرم افزار (Native app) مشابه و نزدیک مینماید، آن وب اپ پراگرسیو نام دارد.
برای نصبکردن پراگرسیو وب اپها نیاز نیست حتما آنانرا از App Store یا این که Google Play دانلود کنیم.
در اصل، وب اپهای پراگرسیو نیازی ندارند که در آن پلتفرمها عرضه شوند. مخاطب میتواند وب اپ پراگرسیو را به هوم اسکرین موبایل خود بیفزاید.
البته، کسبوکارها معمولا تنها به وب اپ پراگرسیو اکتفا نمی کنند و اپلیکیشن خویش را نیز برای دانلودکردن به کاربران عرضه مینمایند.
کاربران میباشند که تعیین مینمایند میخواهند از کدام به کارگیری نمایند.
مخاطب از وب اپ پراگرسیو آیکونی روی هوم اسکرینش و Push Notificationها را میبیند و هنگامی با آن تعامل دارد، تجربهای را درک مینماید شبیهبه تجربهای که هنگام کار با نرم افزارهای روی موبایلش دارد.
درواقع، عامل های مهمی که پراگرسیو بودن را ممکن مینمایند، برای استفاده کننده جذاب و درککردنی نیستند. زیرا مفاهیمی به طور کامل تخصصیاند.
توسعهدهنده وبسایت را با ویژگیهایی توسعه میدهد ولی این مرورگرها می باشند که می بایست بقیهی کار را انجام دهند تا وب اپ پراگرسیو ممکن گردد.
در صورتیکه مرورگرها از Service Workers & Web App Manifest پشتیبانی نکنند، هیچ وب اپ پراگرسیوی وجود نخواهد داشت.
پس، بدون ۲ چیز وب اپهای پراگرسیو ممکن و عملی نخواهند بود:
Service Worker
پوشه خاصی (کدهایی) که همیشگی می باشند و بهعنوان واسطهای در میان وب اپلیکیشن، مرورگر و شبکه (وب) عمل مینمایند.
چیزیکه به وب اپهای پراگرسیو قابلیت و امکان میدهد تا آفلاین هم فعالیت نمایند service workerها می باشند.
آن فایل همیشه در پسزمینه اعمال میگردد و هنگامی کهوب اپ به نت متصل شد، اطلاعات جدید را میگیرد و در خود ذخیره مینماید.
بههمیندلیل میباشد که وب اپهای پراگرسیو، برعکس اپلیکیشنها، بهروزرسانی نیاز ندارند.
Web App Manifest
فایل تنظیمات و توضیحات وب اپ میباشد. در آن فایل دسته اطلاعاتی که ویژگی های اصلی و هویت وب اپ را (مانند اسم، آیکون، نام سازنده، رنگ پسزمینه و…) مشخص مینمایند، ذخیره گردیده است.
همین فولدر میباشد که روی موبایل نصب می شود و داده های اپ را به هوم اسکرین اضافه مینماید.
جمعبندی و نتیجهگیری PWA یا فلسفهای برای ساختن وب اپلیکیشن ها
۱. وب اپلیکیشنهای پراگرسیو نوعی از وب اپها میباشند که باهدف ارتقای تجربه کاربری بهوجود آمدند.
وب اپهای پراگرسیو می خواهند شایسته ترین تجربه کاربری را که یک وبسایت میتواند داشته باشد به مخاطب بدهند.
۲.می توان بیان کرد که پراگرسیو بودن و اینکه به وب اپلیکیشن خصوصیتهایی داد که رفتار آن را در حدود یک اپلیکیشن نماید مفهوم، نگاه و فلسفهای برای توسعهی وب اپهاست؛ نه صرفا یک تکنولوژی.
۳. وب اپ پراگرسیو با خصوصیتهایش شناخته میگردد.
از مهم ترین ویژگیهای این نوع وب اپها عکس العملگرابودن است. در اصل، وب اپهای پراگرسیو برای کاربران تلفن همراه پیاده سازی می گردند.
۴. برای توسعهی وب اپها و همینطور وب اپلیکیشنهای پراگرسیو اول باید طراحی وب سایت را خیلی خوب بلد بود.
این طراح وب سایت میباشد که هنگامی وبسایت را پیاده سازی و پیشرفت می دهد، خصوصیتهای لازم برای پراگرسیوبودن را در روند کار لحاظ مینماید.
۵. برای پیاده سازی تارنما در دنیای امروز نیاز میباشد با مفاهیم و رویکردهای نو مثل برخوردگرایی و پراگرسیو وب اپ بهخوبی آشنا بود.
بههمیندلیل، یادگرفتن طراحی وب سایت متحول شدهاست و می بایست علاوهبر مفاهیم و اصول پایهای، علاقهمند و دانشجو را با مفاهیم و رویکردهای نو نیز آشنا نماید.