احتمالاً تا به حال شنیدهاید که وب اپلیکیشن پیشرونده آینده تمام بشریت هستند. صلح جهانی به ارمغان میآورند، پایانبخش گرسنگی هستند، رنگین کمان و تکشاخها را نجات میدهند. در بین قدرتها تعادل ایجاد میکنند و کارهای زیاد دیگری هم انجام میدهند. در این روند، حتی ممکن است باعث پیشرفت موبایل وبها هم بشوند، برابری را توی وب و برنامههای بومی اینجاد کنند و به توسعهدهندگان تلفن همراه کمک کنند تا کاربران به بازاری فراتر از محدوده فروشگاههای برنامه دسترسی پیدا کنند.
همه اینها عالی به نظر میرسد… ولی وب اپلیکیشن پیشرونده دقیقاً چیست؟
«یک وب اپلیکیشن پیشرونده از قابلیتهای وب مدرن برای ارائه تجربه کاربری مشابه اپلیکیشن استفاده میکند.» وب اپلیکیشنهای پیشرونده
اپلیکیشنهای فروش یا دانلود اپ محلی کارهایی مثل ارسال پیامهای تبلیغاتی، کار آفلاین، ظاهر و حسی که به مخاطب میدهند (مثل همان کاری که اپل و گوگل تصورش کرده بودند.)، بارگذاری همهی اینها در صفحهی اصلی و خیلی کارهای دیگر انجام میدهند. برای مقایسه، اپلیکیشنهای وب موبایل که میشود توی یک مرورگر تلفن همراه به آنها دسترسی پیدا کرد، هیچ زمانی چنین کارهایی انجام ندادهاند. وباپلیکیشنهای پیشرونده با استفاده از APIهای جدید وب، مفاهیم جدید و کلمات باب روز را طراحی میکند.
برای برای روشنسازی میگویم که دارم در مورد مرورگرهای اپلیکیشن وب موبل صحبت میکنم. برنامههای ترکیبی، مانند Lonic و Cordova با تمام ویژگیهایی که از هر اپ بومی انتظار داریم بدون محدودیت در محیط اپهای بومی اجرا میشوند. اما اگر محتوای وب را از یک برنامه ترکیبی بیرون بیاورید و آن را در یک مرورگر تلفن همراه بارگذاری کنید، آن وقت برنامه با ویژگیهای مرورگر محدود میشود. (به دلایل مختلف امنیتی و استاندارد سازی API).
وب اپلیکیشنهای پیشرونده ویژگیهایی را که ما از اپهای بومی انتظار داریم را با تجربه مرورگر تلفن همراه به گونهای تغییر میدهند که از فناوریهای مبتنی بر استانداردهای تلفن همراه استفاده کنند و در یک فضای امن برای همه کاربران اینترنت قابل اجرا هستند.
در کل، وب اپلیکیشنهای پیشرونده مجموعهای از فناوریها، مفاهیم طراحی و APIهای وب را توصیف میکند که به طور همزمان کار میکنند تا تجربهای شبیه به اپ را در مرورگرهای تلفن همراه ارائه دهند. بیایید برخی از اصول اصلی برنامههای وب پیشرفته را مرور کنیم.
Service Worker
Service Worker فناوری فوقالعاده قدرتمند و به همان اندازه گیج کنندهای در پشت یک وب اپلیکیشن پیشرونده است. این فناوری از عملکرد آفلاین، پیامهای خودکار، به روز رسانی محتوای پسزمینه، ذخیره محتوا و موارد دیگر پشتیبانی میکند.
در سطح بالا Service Worker یک برنامهی کاربردیست که در پشت صحنه مستقل از برنامهی شما کار میکند و در پاسخ به رویدادهایی مانند درخواستهای شبکه، پیامهای خودکار، تغییرات اتصال و موارد دیگر اجرا میشود.
شنیدهام که به service workerها Proxy هم میگویند که فکر میکنم نام خوبیست. با استفاده از این برنامه میتوانیم رویدادهایی مانند واکنشها و درخواستهایی که هر لحظه توی شبکه رخم میدهد بررسی کنیم، میتوانیم آن رویداد را با تسلط کامل کنترل کنیم. اطلاعات موجود توی حافظهی مخفی را بررسی کنیم و بلافاصله به آن پاسخ بدهیم، یا اجازه دهیم درخواست به سرور خودکار منتقل شود. اسکریپت ما به عنوان یک پروکسی یا میانافزار پاسخگوی درخواستها خواهد بود.
قدرت و انعطافپذیری Service Workerها باعث پیچیدگیشان میشود و به طور کلی توسعهدهندگان میخواهند از «دستورالعملهای» پیش از ساخت برای موارد استفادهی معمول Service Worker، مانند حالت آفلاین اپ استفاده کنند. مرورگر موزیلا مرجعی عالی برای Service Worker دارد که برنامههای بیشماری را با کد قابل استفاده مجدد نشان میدهد. به عنوان مثال یک دستورالعمل حالت آفلاین ساده وجود دارد که اگر درخواست شبکه اشتباه پیش برود، مداخله میکند و دادهها را در حافظهی پنهان ذخیره میکند. گوگل هم نمونههای زیادی از شیوهی کار Service Worker دارد.
اقدام اصلی: Service Worker فقط یک فایل جاوا اسکریپت مانند بقیه فایلهاست، توی پس زمینهی برنامهها اجرا میشود و با رخ دادن اشتباهی فعال میشود و این شما هستید که باید کد را برای مدیریت حافظهی مخفی، پیامهای خودکار، جابهجایی اطلاعات و… بنویسید. از آنجا که توسعهدهندگان در نهایت از همین برنامه استفاده میکنند، به احتمال زیاد برای انجام کارهای معمول (مانند پشتیبانی آفلاین) و برای سهولت در کار از «دستورالعمل»های موجودش هم استفاده میکنند. Service Worker در اندروید با مرورگر chrome50 در دسترس است و در حال حاضر توسط سایر مرورگرهای اصلی تلفن همراه پشتیبانی نمیشوند
پوسته اپ
مدل پوسته اپ یک مفهوم طراحی ساده است که به موجب آن بار اولیه یک اپلیکیشن وب موبایل همراه با پوسته اصلی طراحی UI اپلیکیشن را فراهم میکند و محتوای برنامه پی از آن بارگیری میشود. پوسته یک API اینترنتی یا یک چارچوب نیست، بلکه یک رویکرد طراحی است که توسعهدهندگان میتوانند انتخاب کنند که به آن پایبند باشند و با استفاده از آن تواناییهای ذخیرهسازی Service Worker افزایش مییابد. ممکن است دریابید که این یک رویکرد کاملاً واضح است و با استفاده از یک کلیدواژه خوب ظاهر خیلی بهتری به وجود میآورد.
با استفاده از مدل پوسته اپ، روی جدا نگهداشتن پوسته UI برنامه و محتوای داخل آن متمرکز میشویم و آنها را جداگانه ذخیره میکنیم. در حالت ایدهآل، پوسته اپ ما به گونهای یک نوع حافظه مخفی است که در هنگام مراجعه و بازگشت مجدد کاربر در تاریخ بعدی، به سرعت بارگیری میشود. داشتن پوسته و بارگذاری محتوا به طور جداگانه از نظر تئوری درک کاربر را از عملکرد و کابرد برنامه بهبود میبخشد.
با قرار دادن پوسته اپمان توی Lonic، میتوانیم بلافاصله طرح اپ Lonic خود را بارگیری کنیم (زبانهها، دکمههای کنترل ناوبری، منوی جانبی و…)، آن را از طریق یک Service Worker ذخیره کنیم، و سپس پس از دریافت پوسته به روز شده برنامه، محتوا را از طریق JS بارگزاری کنیم.
حینی که شروع به اضافه کردن بیشتر پشتیبانی PWA به Lonic میکنید، میتوانید انتظار داشته باشید یک پوسته اپ برای تمام اپهای lonic که به عنوان اپهای وبموبایل توسعه داده میشود، با دستورالعملهای از پیش ساخته شده Service worker، پشتیبانی آفلاین و بروز رسانی محتوای پسزمینه قابل استفاده باشد.
قابلیت نصب و فهرستبندی برنامه
با نگاهی به گذشته میبینیم که برنامههای وبموبایل اَپی نیستد که در صفحه اصلی به عنوان یک اپ مجزا نصب شده باشند. ولی مطمئناً کاربر میتواند یک وبموبایل همراه را به صفحه اصلی خود در IOS و اندروید «پین» کند، اما این نتیجهگیری چندان هم موثق و کامل نیست چون این اپ هنوز با ویژگیهای محلی که از اپهای بومی انتظار داریم، ارائه نمیشود. (اصلاً تا حالا کسی چنین کاری کرده؟)
این قابلیت در حال تغییر است. اخیرا گوگل کروم در اندروید پشتیبانی از نصب وب اپلیکیشن پیشرونده را با یک آگهی پیشنهاد نصب به زبان محلی کاربرها به صفحه اصلی اضافه کرده است، دقیقاً مانند آگهیهای تبلیغاتی بومی که قبلاً استفاده میکردیم.
برای اینکه برای گوگل کروم تعریف کنیم که وبسایت موبایلمان به عنوان یک اپ قابل نصب به روی گوشی تلفن همراه است، یک فایل Manifest.json مینویسیم و از صفحه HTML اصلی خود به آن پیوند میدهیم. (برای مثال کامل به پیوند دوم در بالا مراجعه کنید.)
در حال حاضر، IOS علاوه بر Pin to Homescreen، هیچ ویژگی بیشتری ندارد، بنابراین این تجربه به اندازه کافی روان و کارآمد نخواهد بود، ولی میتوانیم آیا امیدوار باشیم که اپل امسال به ما اطلاعات خوبی برای ما داشته باشد؟
نتیجهگیری
وباپلیکیشنهای پیشرونده، شبیه بخشهای APIهای جدید وب، الگوهای طراحی و نرمافزارهای بازاریابی هستند. با اپهای قابل نصب در اپ استور از طریق برنامه آشکارساز و پشتیبانی نصب صفحه اصلی، پسزمینه با Service Worker، زمان بارگیری سریعتر با پوسته اپ و این باور جدید که توسعهدهندگان وب نیز میتوانند تجارب شگفتانگیز اپ موبایل را ایجاد کنند، شبکه اینترنتی موبایل به تعادل دلخواهمان نزدیک میشود.
در Lonic معتقدیم که شبکه اینترنت آینده اپهای موبایل است. همه جا اجرا میشود، شناخته شدهترین توئه فناروی است و تعداد اپهایی را که به سرعت در حال افزایش است، تأمین میکند. امروزه، میلیونها برنامه اپاستور از فنارویهای وب استفاده میکنند، ولی تا کنون، برای کسانی که قصد باز کردن یک اپ استور را داشتند، تجربهای ناخوشایند بود. درحالیکه وباپلیکیشنهای پیشرونده این تجربه ناخوشایند را تغییر میدهند.
در ماههای آینده ویژگیهای جدیدی برای برنامههای Lonic منتشر خواهیم کرد. ویژگیهایی که توسعهدهندگان را قادر میسازد از هر دو جهان بهترین بهره را ببرند: نصب اپاستورهای چند پلتفرمی در اندروید، IOS و ویندوز، همراه با نصب در وب موبایل به عنوان یک وباپلیکیشن پیشرونده با یک کد. به زودی، توسعهدهندگان Lonic میتوانند هم از توزیع اپاستورهای بومی و هم از دسترسی فوری به میلیاردها کاربر وبموبایل و کاربران جستجوی گوگل بهرمند شوند. دیگر هیچ اپاستور گیجکنندهای با روزنههای ساختاری و ساخت وباپلیکیشنهای جداگانه و بومی وجود ندارد. گوش به زنگ باشید!