تبدیل سایت به PWA - آموزش فارسی ساخت وب اپلیکیشن

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

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

وب اپلیکشن پیشرونده PWA به زبان خیلی ساده، ترکیبی از یک صفحه وب معمولی و یک اپلیکیشن موبایل Moble App ئه. یک PWA قابلیت های جدید مرورگرهای اینترنتی مثل گوگل کروم رو با تجربه کاربری موبابل Mobile User Experience ترکیب می کنه. برنامه وب پیش رونده با استفاده از تکنولوژی های رایج وب نظیر HTML5 و CSS و JavaScript درست مثل هر وبسایت دیگری نوشته میشه.

قابلیت های یک PWA در مقایسه با یک صفحه وب معمولی:

فعالیت در حالت آفلاین Working Offline و بدون اتصال اینترنت

پوش نوتیفیکیشن Push Notification یا ارسال اطلاع رسانی به کاربر

دسترسی به امکانات سخت افزاری موبایل Device Hardware Access مثل دوربین یا GPS

افزودن آیکون برنامه به صفحه اصلی Add to Home Screen موبایل

تبدیل سایت به PWA

برای تبدیل سایت به PWA باید سایت یک سری شرایط داشته باشه. سوالاتی که برای همه مطرحه مشابه اینه:

وب اپلیکیشن پیش رونده Progressive Web Application رو چطوری به سایت مون اضافه کنیم؟

چطور PWA رو پیاده سازی کنیم؟

آیا ساخت PWA کار سختیه؟

آیا میشه سایت من در آنالیز PWA گوگل عدد ۱۰۰ سبز بگیره؟

هزینه ساخت PWA برای سایت چقدره؟

پیش‌نیاز مطالعه

وب اپلیکیشن پیش رونده PWA چیست و چطوری برات پول $ زیاد میاره

قبل از هر چیز باید یک مرور داشته باشیم تا هر دو بدونیم که برنامه های تحت وب پیش رونده دقیقا چی هستن و چرا اینقدر همه جذب شون شدن.

برنامه تحت وب پیش رونده نوعی از برنامه وب با امکانات یک نرم افزار موبایل هست مثل:

امکان دسترسی به دوربین

امکان دسترسی به شتاب سنج موبایل

امکان دسترسی به موقعیت مکانی

امکان ارسال Push Notifications

امکان اضافه شدن آیکون به Home Screen

اصطلاحا میگن که نرم افزار تحت وب مون امکانات App-Like یا مشابه اپ موبایل رو داره.

چنین نرم افزار تحت وبی میتونه از طریق یک فایل جاوااسکریپت به نام سرویس ورکر Service Worker که در یک رشته پردازشی مستقل از رشته تب جاری مرورگر اجرا میشه، ارتباط غیر همگام Asynchronous با سرور ایجاد کنه.

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

اهمیت تبدیل سایت به PWA

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

سرعت بارگذاری صفحات وب با قابلیت آفلاین

یک PWA قابلیت کار به صورت آفلاین داره. با این قابلیت میتونید سرعت لود صفحات سایت رو بسیار بیشتر از قبل بالا ببرید. همچنین میتونید سرعتی نزدیک به سرعت اپ موبایل رو به کاربران خودتون ارائه بدید. کاربران شگفت زده می شن و این فوق العاده است. این باعث میشه حتی مدت زمانی که روی سایت سپری میکنن خیلی خیلی بیشتر بشه.

وقتی کاربران به طور متوسط وقت بیشتری بگذرونن احتمال خرید شون از سایت بیشتر میشه. این یعنی پول $$$. خب حالا دیگه مطمئنم متقاعد شدین که برای تبدیل سایت به PWA اقدام کنین. پس بیاید شروع کنیم…

پوسته Responsive برای سایت، پیش نیاز ساخت PWA

پیش نیاز تبدیل سایت به PWA داشتن یک وبسایت واکنشگرا Responsive ئه که خب تقریبا مطمئنم این پیش نیاز رو خیلی هاتون پاس میکنید. اگر هنوز یک وبسایت ریسپانسیو ندارید خیلی عقب هستید.

مطلب مرتبط

آموزش طراحی سایت واکنشگرا Responsive یا پاسخگو

بهتره دست به کار بشید و سعی کنید یک پوسته Responsive با یک فریم ورک رابط کاربری UI Framework شناخته شده مثل بوتسترپ Bootstrap توسعه بدید. اگر چنین پوسته ای ندارید با همکاران من تماس بگیرید تا راهنمایی تون کنن و بهتون بگن چطوری میتونید یه پوسته استاندارد Responsive برای سایت تون داشته باشید.

قبل از هر چیز نیاز به یک سایت استاندارد و سریع دارید. اگر یک وبسایت سریع و استاندارد در اختیار ندارید بهتره کار طراحی رو زودتر شروع کنید چون خودش حداقل یک ماه زمان میبره. برای تخمین بودجه لازم برای طراحی سایت با وردپرس میتونید مقاله زیر رو مطالعه کنید.

برای شروع یک فایل مانیفست App Manifest می سازیم

فایل های مانیفست تاریخچه نسبتا طولانی دارند. این فایل ها که فرمت جی سان JSON دارند اطلاعاتی در مورد پکیج یا نرم افزار ارائه می کنند و کاربردشون محدود به PWA نیست. در اغلب سیستم های مدیریت بسته های نرم افزاری و مدیریت وابستگی نظیر composer و npm و … ساختار فایل های manifest رو مشاهده می کنید. در اینجا البته هدف اصلی این فایل ارائه متادیتا (اطلاعات ساختارمند) به منظور دانلود و نصب برنامه روی دستگاه کاربره.

قبل از پیاده سازی فایل مانیفست مربوط به Web App تون حتما پشتیبانی مرورگرها از قابلیت معرفی فایل مانیفست و همچنین گستره پشتیبانی از کلیدهای مختلف در مرورگرهای دسکتاپ و موبایل رو با اطلاعات گوگل آنالیتیکس تون چک کنید. ممکنه طیف وسیعی از کاربران شما هنوز از مرورگرهای قدیمی استفاده کنن و این باعث شه خروجی مطلوبی از پیاده سازی PWA مشاهده نکنید.

خب پس، در اینجا هم باید یک فایل json بسازیم و اون رو در مسیر اصلی پروژه قرار بدیم.

نکته

توصیه می کنم که نام و پسوند این فایل manifest.webmanifest و نوع رسانه یا MIME اون که توسط پاسخ سرور به مرورگر بر میگرده application/manifest+json باشه. گرچه مرورگرها عموما از فایل مانیفست با پسوند json و نوع رسانه application/json هم پشتیبانی می‌کنند ولی توصیه میکنم ازش استفاده نکنید.

اطلاعاتی که از طریق فایل ارائه میکنیم نام و مشخصات اپلیکشن و توسعه دهنده و آیکون برنامه و اطلاعاتی از قبیل هست. وبسایت موزیلا، لیستی از کلیدهای فایل مانیفست رو به روز نگه میداره.

نمونه فایل مانیفست manifest

برای مثال این فایل رو برای شما آماده کردم که میتونید کلیدهای اون رو با مقادیر متناسب جایگزین و استفاده کنید:

کلیدهای اجباری این فایل عبارتند از name و icons و این یعنی بقیه کلیدها یا member های این فایل JSON همگی اختیاری هستند. توجه کنید که کلید serviceworker منسوخ و اصطلاحا obsolete شده و دیگه استفاده نمیشه. چون سرویس ورکر رو باید رجیستر کنید و نیازی به آدرس دهی از طریق فایل manifest.webmanifest نیست. تقریبا کاربرد همه کلیدها مشخصه که به همین دلیل توضیح بیشتری نیاز نداره. فقط دو کلید مهم هست که توضیح میدم. با کلید start_url میتونید آدرس صفحه شروع web application رو مشخص کنید. وقتی کاربر روی آیکون شما در صفحه home اش میزنه، قبل از اینکه بتونه برنامه وب شما رو بارگذاری یا استفاده کنه، این صفحه لود میشه. البته این تنظیم فقط یک پیشنهاده،‌ به این معنی که ممکنه مرورگر کاربر به کلی این تنظیم رو نادیده بگیره و به کاربر اجازه بده صفحه دیگری رو به عنوان صفحه شروع انتخاب کنن. کلید scope هم محدوده PWA رو از صفحات عادی web application مشخص و متمایز میکنه. اگر کلیه صفحات سایت تون قراره PWA باشند، این تنظیم با / مقدار دهی کنید.

{

"name": "Pmpr Official Web App",

"short_name": "Pmpr",

"description": "Web consulting, supervision & implementation services in web",

"start_url": ".",

"display": "standalone",

"scope": "/",

"dir": "rtl",

"lang": "fa-IR",

"background_color": "#efefef",

"theme_color": "#376eb5",

"orientation": "any",

"icons": [

{

"src": "/img/icon-192.png",

"type": "image/png",

"sizes": "192x192"

{

"src": "/img/icon-512.png",

"type": "image/png",

"sizes": "256x256"

}

"screenshots": [

{

"src": "screenshot.webp",

"sizes": "1280x720",

"type": "image/webp"

}

]

}

افزودن فایل مانیفست به سایت

حالا که فایل مانیفست رو ساختید باید اون رو به Web Application تون اضافه کنید تا تبدیل به یک Progressive Web Appilcation بشه. به این منظور باید یک تگ لینک در head ایجاد کنید:

<html>

<head>

...

...

</head>

<body>

...

نکته خیلی مهم در مورد فایل manifest اینه که درخواست اون به سرور بدون مشخصات احراز هویت کاربر ارسال می شه.

نکته

بعدش یک سرویس ورکر Service Worker می سازیم

هسته اصلی یک وب اپلیکیشن پیشرونده سرویس ورکر Service Worker اون برنامه تحت وب هست. سرویس ورکر که یک فایل جاوااسکریپت هست مستقل از رشته اصلی تب فعال مرورگر در یک صفحه وب اجرا میشه.

نکته

سرویس ورکر یک فایل جاوااسکریپت ئه که مستقل از رشته اصلی تب فعال مرورگر در یک صفحه وب اجرا میشه. این فایل به یک سری از انواع رخداد Event های مشخص گوش و به اونها پاسخ میده. یکی از مهمترین این رویدادها، fetch event هست که از اون به منظور دریافت محتوای وب برای ارائه در حالت آفلاین Offline Access استفاده می‌شه.

برای شروع باید یک سرویس ورکر بسازیم. در مسیر اصلی پروژه تون یک فایل با نام sw.js بسازید. محتویات این فایل رو در ادامه آموزش میگم که چی باید باشه.

افزودن و رجیستر کردن فایل سرویس ورکر Service Worker Registration

برای رجیستر کردن فایل سرویس ورکر ۲ راه دارید:

راه اول اینه که بذاریدش داخل فایل app.js تون که اسکریپت های صفحات سایت رو توش مینویسید و از طریق تگ script اون روی توی صفحه بذارید.

داخل این فایل app.js باید سرویس ورکر خودتون رو رجیستر کنید.

navigator.serviceWorker.register('../sw.js');

راه دوم اینه که قطعه کد جاوااسکریپت زیر رو در انتهای صفحات درست قبل از بسته شدن تگ body قرار بدید:

...

if (!navigator.serviceWorker.controller) {

navigator.serviceWorker.register("/sw.js").then(function(reg) {

console.log("Service worker registered for {" + reg.scope + "} scope");

});

}

</script>

</body>

</html>