Progressive Web Apps را می توان نسل جدید اپلیکیشن ها دانست. در این برنامه ها جدیدترین تکنولوژی ها با هم ترکیب می شوند تا تجربه کار با وب را تا جای ممکن باکیفیت و روان کنند. در ادامه با ما همراه باشید تا ضمن این که به طور دقیق تر بررسی کنیم که PWA چیست، به نحوه فعالسازی آن برای سایت های موجود نیز بپردازیم.
تفاوت PWA با سایر اپلیکیشن ها در چیست؟
Progressive Web Apps یا وب اپلیکیشن های پیش رونده، برنامه هایی هستند که برای دسترسی به آنها باید از مرورگر استفاده کنیم؛ اما وقتی وارد آن می شویم، با چیزی شبیه به اپلیکیشن رو به رو می شویم. خب این ویژگی ها دقیقاً مثل مشخصات سایر وب اَپ هاست؛ پس تفاوت وب اَپ های معمولی با PWA چیست؟ برای این که این تفاوت را بهتر درک کنید، در ادامه ابتدا تعریف اپلیکیشن های Native و اپلیکیشن های تحت وب و را مرور می کنیم.
اپلیکیشن های Native:
اپلیکیشن های Native، بر پایه سیستم عامل های گوشی موبایل (مثل اندروید و iOS) اجرا می شوند. به این اَپ ها محلی نیز می گویند. منظور از محلی این است که این برنامه ها دقیقاً متناسب با فضای گوشی موبایل طراحی شده اند. برای مثال تمام پیام رسان هایی که در گوشی استفاده می کنید، اَپ های محلی محسوب می شوند.
اپلیکیشن های تحت وب:
اپلیکیشن های تحت وب، بر پایه مرورگرها اجرا می شوند. همانطور که بالاتر نیز اشاره کردیم، وقتی توسط مرورگر به این برنامه ها دسترسی پیدا می کنیم، به جای این که با یک وب سایت رو به رو شویم، با یک اپلیکیشن مواجه هستیم.
اما یک تفاوت دیگر بسیار مهم بین اَپ های محلی و اَپ های تحت وب وجود دارد و آن این که برنامه های تحت وب معمولاً قابلیت های کمتری به نسبت برنامه های Native دارند. علاوه بر این ممکن است به اندازه برنامه های محلی، برای موبایل ها پاسخگو و مناسب نباشند. البته برنامه های تحت وب یک مزیت هم به نسبت برنامه های محلی دارند؛ این که اغلب پویاتر هستند.
اپلیکیشن های پیش رونده (PWA):
و اما برگردیم به سؤال اصلی، یعنی PWA چیست؟ در یک کلام می توان گفت این اَپ ها ترکیبی از دو نوع اپلیکیشن بالا هستند. به این ترتیب که فقط توسط مرورگر اجرا می شوند و مثل برنامه های تحت وب پویا هستند. اما نقطه ضعف اَپ های تحت وب را ندارند؛ بنابراین به اندازه برنامه های Native برای موبایل ها پاسخگو و مناسب اند. حالا بهتر درک می کنید که چرا ابتدای مطلب اشاره کردیم که PWA نسل جدید اپلیکیشن ها هستند!
چرا PWAها به نسبت دو نوع دیگر اپلیکیشن ها برتر اند؟
Progressive Web Appsها موفق شده اند که نقاط قوت اپلیکیشن های تحت وب و Native را با هم درآمیزند. در نگاهی دقیق تر، ویژگی هایی ک باعث شده این اپلیکیشن ها به نسبت دو نوع دیگر برتر باشند، شامل موارد زیر هستند.
راحتی استفاده:
این برنامه ها، اپلیکیشن های پیشرفته ای هستند. اما چون تحت وب اجرا می شوند، برای استفاده از آنها نیازی به نصب نیست (بر خلاف برنامه های محلی که باید آنها را دانلود و نصب کنیم). فقط کافیست مثل یک وب سایت وارد آن شویم.
علاوه بر این وقتی نوبت به روزرسانی این برنامه ها می شود، این آپدیت فقط توسط تیم توسعه دهنده آن انجام می شود و تمام! بنابراین کاربران برای این که به نسخه جدید این برنامه ها دسترسی داشته باشند، نیازی به انجام هیچ کاری ندارند (بر خلاف برنامه های محلی که باید نسخه جدید آنها را دانلود کنیم).
ریسپانسیو بودن:
برای دستگاه هایی مثل موبایل ها، کاملاً ریسپانسیو و محلی هستند (بر خلاف وب اَپ های معمولی که ممکن است در مواقعی به اندازه کافی پاسخگو نباشند).
تطبیق پذیری:
PWAها به این خاطر که در وب اجرا می شوند، در هر دستگاه و سیستم عاملی قابل استفاده هستند. ضمناً بسیاری از قابلیت های داخل PWAها حتی در حالت آفلاین هم قابل اجرا هستند.
امنیت بالا:
URL مربوط به Progressive Web Apps دارای پروتکل HTTPS است. همانطور که می دانید این پرتکل به این معنی است که این آدرس اینترنتی گواهی SSL را داراست. این گواهی یکی از مهم ترین دلایل اثبات ایمن بودن آدرس های اینترنتی است. بنابراین امنیت PWAها نیز (که همگی این استاندارد را دارند) اثبات شده است.
نکته: PWAها بر پایه وب اجرا می شوند. به همین جهت نیز در صفحه نتایج موتورهای جست و جو (مثل گوگل) نمایش داده می شوند. بنابراین صاحبان این برنامه ها، می توانند با سئو کردن آنها، رتبه بالای گوگل را به خود اختصاص داده و از این طریق خود را به کاربران بیشتری معرفی کنند.
دلیل استفاده کسب و کارهای آنلاین از PWA چیست؟
حالا که می دانید که PWA چیست ، احتمالاً می توانید حدس بزنید که چرا بسیاری از کسب و کارها، PWA را به سایر انواع اَپ ترجیح می دهند. در واقع برای کسب و کارهایی که باید اپلیکیشن داشته باشند، هزینه توسعه، آزمایش و نگهداری اپلیکیشن برای چندین سیستم عامل زیاد و غیر منطقی خواهد بود. به همین جهت نیز بهترین انتخاب برای این شرکت ها، یک تکنولوژی مدرن مثل PWAهاست. چرا که با راه اندازی یک برنامه تحت وب از نوع PWA، می توانند همه سیستم عامل ها را به بهترین شکل پوشش دهند. پیشنهاد می کنیم با مجموعه اپلیکیشن سازهای وردپرس نیز آشنا شوید.
جالب است بدانید که طبق پیش بینی ها، در آینده ای بسیار نزدیک، حدود 20% از شرکت های حال حاضر، دیگر اپلیکیشن محلی به کاربران ارائه نمی دهند. در عوض PWAها را جایگزین این برنامه ها می کنند.
چگونه می توانیم PWA را روی سایت موجود خود فعال کنیم؟
یک خبر خوب! اگر کسب و کار آنلاینی دارید و مایلید که قابلیت های سایت خود را در قالب یک PWA ارائه دهید، لازم نیست که یک سیستم جدید طراحی کنید؛ بلکه می توانید بسیاری از ویژگی های PWA را روی همین سایت فعلی خود فعال کنید! پس حالا که می دانید ، فعالسازی PWA روی وب سایت را که در 3 مرحله ارائه شده، دنبال کنید.
مرحله اول: اطمینان از وجود پروتکل HTTPS
همانطور که بالاتر نیز اشاره کردیم، تمام Progressive Web Apps، فقط همراه با پروتکل HTTPS ارائه می شوند. بنابراین اگر سایتی که می خواهید PWA را برای آن فعال کنید، این پروتکل را ندارد و HTTP است، باید گواهی SSL را برای آن فعال کنید. بعد از این که آدرس سایت مورد نظر پروتکل HTTPS را دریافت کرد، به مرحله بعد بروید. با نحوه دریافت گواهی SSL رایگان برای سایت وردپرسی آشنا شوید.
مرحله دوم: ایجاد فایل اولیه
اولین فایلی که باید برای فعال کردن PWA روی سایت خود بسازید، یک فایل در فرمت JSON است. لازم به ذکر است که به این فایل، فایل Manifest نیز می گویند. در این فایل قرار است اطلاعات پایه ای را درباره سایت و درباره این PWA قرار دهیم. اطلاعاتی مثل نام برنامه، توضیحات، آیکون، رنگ تم و … . در واقع مرورگر به این اطلاعات نیاز دارد تا بتواند این برنامه را به درستی نصب کرده و به کاربران موبایل نمایش دهد.
برای ساخت این فایل ابتدا کدهایی را در یک فایل جداگانه با فرمت JSON می نویسیم. سپس با تکه کد، این فایل را در قسمت
فایل index.html اضافه می کنیم.
کدهای زیر نمونه کدهایی هستند که می توانند در فایل JSON قرار بگیرند. لازم به ذکر است که این فایل را تحت عنوان ” .webmanifest” نامگذاری کنید.
{
"name": "Alloy Application Demo",
"short_name": "Alloy",
"description": "An Episerver site with PWA added",
"start_url": "/",
"display": "standalone",
"orientation": "any",
"background_color": "#fff",
"theme_color": "#fff",
"icons": [
{
"src": "/static/img/icons8-ios-app-icon-shape-72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "/static/img/icons8-ios-app-icon-shape-152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "/static/img/icons8-ios-app-icon-shape-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/static/img/icons8-ios-app-icon-shape-256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "/static/img/icons8-ios-app-icon-shape-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
حالا همانطور که گفتیم، برای اضافه کردن این کدها به سایت، کدهای زیر را به عنوان متا تگ داخل تگ
به فایل index.html اضافه می کنیم:
نکاتی درباره فایل Manifest
با انجام مرحله اول، سنگ بنای PWA برای سایت شما پایه ریزی شده است. اما قبل از آن که به سراغ مرحله بعدی برویم، بیایید کمی با کدهایی که در فایل manifest وارد کردیم، بیشتر آشنا شویم. همانطور که در کدهای طولانی بالا مشاهده می کنید، اطلاعات متنوعی در این فایل وارد شده است. این اطلاعات به این ترتیب هستند:
- Name: نام کامل این وب اَپ یا همان PWA
- short_name: نام کوتاهی که قرار است به عنوان نام این برنامه در صفحه اصلی نمایش داده شود.
- description: یک یا دو جمله که توضیحاتی درباره این برنامه می دهد.
- icons: همه اطلاعات درباره آیکون ها؛ شامل: آدرس اینترنتی منبع، سایزها، انواع و … . دقت کنید که در این قسمت بهتر است چند آیکون را در این قسمت تعریف کنید. با این کار از بین آیکون های موجود، بهترین اندازه برای دستگاه کاربر استفاده می شود.
- start_url: اشاره دارد به فایل index که هنگام راه اندازی این برنامه اجرا می شود.
- display: نحوه نمایش برنامه که می تواند fullscreen، standalone، minimal-ui یا browser باشد.
- theme_color: رنگی اصلی رابط کاربری.
- background_color: رنگی که به عنوان بک گراند برنامه استفاده می شود.
نکته: حداقل اطلاعاتی که فایل Manifest به آنها نیاز دارد، یک نام و آیکون است. این آیکون نیز باید حداقل شامل منبع، سایز و نوع باشد. بنابراین باقی اطلاعاتی که در این فایل نوشته ایم، همگی اختیاری هستند.
مرحله سوم: ایجاد یک Service worker
در مرحله بعدی باید Service Worker برای سایت بسازیم. اما سرویس ورکر چیست؟ این یک فایل اسکریپتی است که در پس زمینه توسط مرورگر اجرا می شود و به صورت مستقل و مستقیم به فایل های اصلی سایت دسترسی ندارد؛ بلکه توسط “PostMessage” با سایت تعامل می کند. هدف سرویس ورکر این است که قابلیت های اضافه تری را به سایت اضافه کند. قابلیت هایی مانند:
- ارائه بعضی کاربردها در حالت آفلاین
- کش کردن بعضی از فایل ها
- قابلیت Push notification (نمایش اعلان های وب)
در واقع ما می خواهیم به کمک یک سرویس ورکر، قابلیت های بیشتری را برای این PWA سایت خود فراهم کنید. حالا چطور می توانیم یک سرویس ورکر برای سایت بسازیم؟ به کمک کدهای زیر:
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('/sw.js').then(function (reg) {
console.log('Registered Service Worker for Alloy');
});
});
}
حالا باید این سرویس ورکر را برای مراحل یا رویدادهای مختلف PWA فعال کنیم. این رویدادها عبارت اند از:
- Install (نصب)
- Activate (فعالسازی)
- Fetch (واکشی)
می توانید این کدها را به هر یک از صفحاتی که مد نظر دارید (مثل صفحه اصلی، صفحه درباره ما و …) اضافه کنید. در ادامه نحوه فعال کردن PWA برای هر یک از این رویدادها را مرور می کنیم.
توجه: ما در اینجا این کدها را به صورت جداگانه در 3 بخش آورده ایم تا با کاربرد آنها بیشتر آشنا شویم. اما شما می توانید همه این 3 بخش کد را به صورت پشت سر هم به فایل index.html و در انتهای کدهای بخش
اضافه کنید. در واقع وقتی این 3 بخش کد را به این قسمت فایل خود اضافه کنید، فایل سرویس ورکر برای مراحل مختلف فعال می شود.
1. Install
برای فعال کردن این مرحله باید کد ثبت نام را به جاوااسکریپت اضافه کنیم، درخواست فایل جاوااسکریپت سرویس ورکر را اضافه کنیم و این رویداد را فراخوانی کنیم. بنابراین کدهای این رویداد به این ترتیب خواهند بود:
self.addEventListener("install", function(e) {
console.log("Alloy service worker installation");
e.waitUntil(
caches.open(cacheName).then(function(cache) {
console.log("Alloy service worker caching dependencies");
initialCache.map(function(url) {
return cache.add(url).catch(function(reason) {
return console.log(
"Alloy: " + String(reason) + " " + url
);
});
});
})
);
});
2.Activate
بعد از این که رویداد نصب با موفقیت انجام شود، نوبت به رویداد فعالسازی می رسد. کدهای این رویداد نیز به شکل زیر هستند.
self.addEventListener("activate", function(e) {
console.log("Alloy service worker activation");
e.waitUntil(
caches.keys().then(function(keyList) {
return Promise.all(
keyList.map(function(key) {
if (key !== cacheName) {
console.log("Alloy old cache removed", key);
return caches.delete(key);
}
})
);
})
);
return self.clients.claim();
});
3. Fetch
با فعال کردن این رویداد، می توانید درخواست های شبکه را قبل از بارگیری صفحه، ضبط کنید. به این ترتیب صفحات آفلاین را به وجود می آوریم که می توانند در حالت آفلاین نیز اجرا شوند. به عبارت دیگر وقتی سایت آنلاین است، رویداد واکشی محتوای سایت را در cache ذخیره می کند. سپس هر زمان که سایت آفلاین باشد، این محتواها را از همان Cache باز می گرداند و به کاربر نمایش می دهد.
کدهای این رویداد نیز به ترتیب زیر هستند:
self.addEventListener("fetch", function(e) {
if (new URL(e.request.url).origin !== location.origin) return;
if (e.request.mode === "navigate" && navigator.onLine) {
e.respondWith(
fetch(e.request).then(function(response) {
return caches.open(cacheName).then(function(cache) {
cache.put(e.request, response.clone());
return response;
});
})
);
return;
}
e.respondWith(
caches
.match(e.request)
.then(function(response) {
return (
response ||
fetch(e.request).then(function(response) {
return caches.open(cacheName).then(function(cache) {
cache.put(e.request, response.clone());
return response;
});
})
);
})
.catch(function() {
return caches.match(offlinePage);
})
);
});
حالا اگر این 3 سری کد را به بخش Body فایل index.html اضافه کنید، کار تمام است و PWA برای سایت شما فعال می شود!
در آخر
طی چند سال اخیر، کاربران موبایل بیش از 200 درصد بیشتر شده اند. پس جای تعجلی نیست اگر بگوییم که اکنون دیگر یک سایت ساده یا یک اپلیکیشن معمولی نمی تواند رضایت کاربران را جلب کند. اما راه حل های ساده ای برای این چالش وجود دارد و یکی از آنها استفاده از نسل جدید اپلیکیشن ها یا همان PWAهاست. بنابراین حالا که می دانید که PWA چیست و چگونه می توان آن را روی سایت فعال کرد، می توانید آغوش خود را برای تکنولوژی های مدرن آینده باز کنید.
