آموزش pwa

آموزش pwa

آموزش pwa

آموزش pwa

وب‌اپلیکیشن‌های پیش رونده (Progressive Web Apps) یا به اختصار PWA می‌توانند تحول بزرگ بعدی در حوزه‌ی اپلیکیشن‌های موبایل محسوب شوند. این فناوری که ابتدا در سال ۲۰۱۵ و توسط گوگل معرفی شد، به علت آسودگی نسبی توسعه و در اختیار قرار دادن یک تجربه‌ی کاربری آنی برای کاربران توجهات زیادی را به خود جلب کرده است.

در این دوره آموزشی قصد دارم آموزش pwa و روش ایجاد کردن وبسایت با استفاده از روش Progressive Web Apps را به شما آموزش دهم.

 

مزایای pwa

 

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

سریع : اکثر کاربران کاسه صبرشان تا ۳ ثانیه می باشد و اگه بیشتر طول بکشه سریع تب رو میبندند برای همین در PWA اپلیکیشن بلافاصله با سرعت زیادی اجرا می شود .

آفلاین : کاربران میتوانند به صورت آفلاین از اپلیکیشن استفاده کنند پس دغدغه ای ندارید که اگه اینترنت در دسترس نبود اپلیکیشن چطور واکنش نشان دهد.

تعامل با کاربران : یکی از مزایای خوبی که دارد میتوانید برای کاربران خود Push Notification ارسال کنید و شک نکنید که کاربران شما بیشتر به اپلیکیشن سر میزنند و نرخ تبدیل شما افزایش پیدا میکند.

هوم اسکرین : مانند بقیه اپلیکیشن ها بر روی هوم اسکرین قرار میگیرد و فرقی از نظر ظاهری با یک اپلیکیشن بومی ( Native Application ) ندارد.

 

آموزش pwa

 

آموزش pwa

 

در آموزش pwa اگر با برنامه های وب Progressive آشنا نیستید ، ایده اصلی استفاده از فناوری های مرورگر برای ساختن یک برنامه وب است که به صورت آفلاین کار می کند و ظاهر و احساس یک برنامه بومی را دارد.

در این آموزش نحوه استفاده از مانیفست و سرویس دهندگان را برای شما ارائه می دهم تا ساده ترین برنامه ممکن را ایجاد کنید ، برنامه ای که بدون اتصال به اینترنت کار می کند و می تواند به صفحه اصلی شما اضافه شود.

برای به دست آوردن بیشترین استفاده از آموزش pwa باید با HTML ، CSS و JavaScript آشنا شوید.

برای ساخت این برنامه به ویرایشگر متن ، آخرین نسخه Chrome و یک وب سرور محلی نیاز دارید.

نکته مهم

نکته ی که قبل از شروع آموزش pwa  لازم است تا یاد آور شوم :
برای داشتن یک سایت pwa حتما باید وب سایتتان رسپانسیو باشد تا حس یک اپلیکیشن نیتیو را برای کاربر ایجاد کند.

 

فایل manifest (منیفست)

به عبارتی ساده Manifest یک فایل JSON است که به کاربر اجازه می دهد که یک وب اپلیکیشن را روی صفحه ی اصلی تلفن همراه بدون نیاز به مراجعه و نصب Play Store یا App Store ، نصب کند.

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

برای مثال توسعه دهنده می تواند هرگاه اپلیکیشن راه اندازی می شود یا هر اپلیکیشنی که از app store نصب می شود و آیکون آن نمایش داده می شود،

نمونه ی اصلی را مانند splash screen در اپلیکیشن PWA نمایش دهد. همه ی این موارد با فایل Manifest می توانند کنترل و پیاده سازی شوند. برای پیاده سازی این ویژگی ها نیاز است که از برخی ویژگی های از پیش تعریف شده در فایل manifest خود، استفاده کنیم.

اجازه دهید که ابتدا درباره ی این ویژگی ها صحبت کنیم و سپس به کمک یک مثال ببینیم که هرکدام از این ویژگی ها چگونه کار می کنند.
محتویات فایل منیفست بصورت زیر است :

• background_color
• categories
• description
• dir
• display
• iarc_rating_id
• icons
• lang
• name
• orientation
• prefer_related_applications
• related_applications
• scope
• screenshots
• serviceworker
• short_name
• start_url
• theme_color

 

آموزش pwa

 

 

در آموزش pwa فایل منیفست بصورت زیر میباشد :

{
“name”: ” نام شرکت یا محصول”,
“short_name”: “نام کوتاه برای اپ”,
“display”: “نوع نمایش”,
“start_url”:” آدرس شروع اپ”,
“background_color”:” ” رنگ بکگراند هنگام لود اپ,
“theme_color”: ” رنگ تم کلی اپ “,
“icons”: [{
“src”: “آدرس قرارگیری آیکون”,
“type”: “نوع عکس”,
“sizes”: “اندازه عکس”
}]
}

 

یک مثال برای فایل manifest.jason

{
“name”: “Blog and Share your Knowledge”,
“short_name”: “Blogger”,
“display”: “standalone”,
“start_url”: “/index.html”,
“background_color”: “#34495e”,
“theme_color”: “#8e44ad”,
“icons”: [{
“src”: “src/images/open-book16.png”,
“type”: “image/png”,
“sizes”: “16×16”
}, {
“src”: “src/images/open-book24.png”,
“type”: “image/png”,
“sizes”: “24×24”
}, {
“src”: “src/images/open-book32.png”,
“type”: “image/png”,
“sizes”: “32×32”
}, {
“src”: “src/images/open-book64.png”,
“type”: “image/png”,
“sizes”: “64×64”
}, {
“src”: “src/images/open-book128.png”,
“type”: “image/png”,
“sizes”: “128×128”
}, {
“src”: “src/images/open-book256.png”,
“type”: “image/png”,
“sizes”: “256×256”
}, {
“src”: “src/images/open-book512.png”,
“type”: “image/png”,
“sizes”: “512×512”
}]
}

ویژگی short_name: این ویژگی نام اپلیکیشن را زمانی که کاربر یک اپلیکیشن جدید به صفحه نمایش اصلی اضافه می کند نشان می دهد.
ویژگی icons: هرگاه یک اپلیکیشن از store نصب شود نام و ایکون اپلیکیشن نصب می شود می توانیم نتیجه ی مشابهی برای یک PWA با استفاده از ویژگی icons داشته باشیم. این ویژگی یک آرایه از اشیاء آیکون قبول می کند. هر شی با یک کاما از شی دیگر جدا می شود. سه ویژگی مهم برای هر شی آیکون به نام های src, type و size وجود دارد.

در ویژگی src منبع کامل عکس ها را منتقل می کنیم.

در ویژگی type نوع عکس هارا منتقل می کنیم برای مثال PNG یا JPEG

در ویژگی size اندازه ی عکس هارا منتقل می کنیم.

توجه کنید که بسته به اندازه ی صفحه نمایش، جایی که اپلیکیشن ها در آن نصب و اضافه می شوند، آیکون برای اپلیکیشن ها استفاده می شود.

ویژگی background_color: از این ویژگی برای تنظیم رنگ پس زمینه ی splash screen استفاده می شود.

Orientation: با این ویژگی می توانیم برای کنترل حالت نمایش اپلیکیشن خود استفاده کنیم و می توانیم آن را روی حالت portrait یا landscape تنظیم کنیم. دیگر اپشن های آن any, natural,landscape, portrait…

start_url: این ویژگی برای تنظیم صفحه ی پیش فرض که هربار که کاربر آن را اجرا می کند نمایش داده خواهد شد، به کار می رود.

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

Display: در اپلیکیشن اصل UI مرورگر وجود ندارد اما از آنجایی که اپلیکیشن ما یک وب اپلیکیشن است بنابراین هرگاه کاربر آن را نصب می کند یا آن را به صفحه نمایش اصلی اضافه می کند هرگاه اپلیکیشن اجرا میشود مرورگر پیش فرض نیز نمایش داده خواهد شد.
اگر می خواهید این گزینه را لغو کنید ویژگی display را روی standalone تنظیم کنید با این کار می توانید UI مرورگر را مخفی کنید.
دیگر آپشن های display :
Fullscreen، Standalone ، minimal-ui ، browser

تعداد اندکی ویژگی های دیگر نیز وجود دارد مانند theme_color که با آن می توانید تم و یا رنگ های پس زمینه ها را تغییر دهید و یا ویژگی related_applications که با استفاده از آن می توانید کاربر را به اپلیکیشن موبایل اصلی هدایت کنید.

 

آموزش pwa

 

سرویس ورکرها service worker

نحوه ی فعال‌سازی PWA بر روی وب‌سایت از طریق Service worker صورت می گیرد.

سرویس ورکر، در واقع خطی‌ست که در مرورگر ها اجرا می ‌شود، و از صفحه ی وب جدا می ‌باشد، و امکانات آن در خصوص پنجره هایی ‌ست که به صفحه وب یا تعامل با کاربر نیازی نداشته باشد؛ سرویس ورکر به شما کارایی ساپورت کردن وب اپلیکیشن های progressive را در حالت آفلاین می‌ دهد؛ به طور مثال ارسال پیام ها، به روز رسانی محتوا و cache کردن در پشت صحنه را انجام می‌دهند.

سرویس ورکرها چه هستند؟

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

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

 

آموزش pwa

 

پیش‌نیازها برای یک سرویس ورکر

در حالیکه سرویس ورکرها به دلایل بسیاری عالی هستند اما در همین عین می‌توانند یک آسیب‌پذیری نیز باشند. برای جلوگیری از حمله‌های موسوم به man-in-the-middle سرویس ورکرها تنها روی برگه‌هایی فعال می‌شود که HTTPS داشته باشند. بنابراین بعد از فرایند توسعه و پیاده‌سازی در محیط لوکال‌هاست، باید برای محیط وب از HTTPS استفاده کنید.

از نظر پشتیبانی مرورگرها نیز باید بگویم که تقریبا تمام مرورگرها بجز IE و Opera mini از سرویس‌ ورکرها پشتیبانی می‌کنند.

 

چگونه یک سرویس ورکر را ثبت کنیم؟

سرویس ورکرها به شدت مبتنی بر Javascript Promiseها هستند بنابراین قبل از کار با سرویس ورکرها باید آشنایی خوبی با شیوه کاری Promiseها داشته باشید.
در قدم اول نیاز است که سرویس ورکر را در برگه‌ای که می‌خواهید قرار دهید. می‌توانید این کار را در ابتدای فایل جاوااسکریپتی انجام دهید.

if (‘serviceWorker’ in navigator) {

window.addEventListener(‘load’, function() {

navigator.serviceWorker.register(‘https://blog.keycdn.com/blog/sw.js’).then(function(registration) {

console.log(‘ServiceWorker registration successful with scope: ‘, registration.scope);

}, function(err) {

console.log(‘ServiceWorker registration failed: ‘, err);

});

});

)

مثال بالا ابتدا وجود سرویس ورکر را در مرورگر بررسی می‌کند. در صورت درست بودن این شرط فایل sw.js (فایل مربوط به سرویس ورکرها) ثبت می‌شود.

برای تکمیل این پروسه باید برگه را یک بار دیگر اجرا کنید. اگر از مرورگر کروم استفاده می‌کنید به سراغ ابزارهای توسعه کروم بروید و تب مربوط به سرویس ورکرها را مشاهده کنید. در آنجا می‌توانید موفقیت آمیز بودن عملیات ثبت را مشاهده کنید.
چگونه یک سرویس ورکر را نصب کنیم؟
 در آموزش pwa قبل از اینکه سرویس ورکر بتواند کاری را انجام دهد باید یک event listener را برای نصب آن تعیین کنید و فایلی که قصد کش شدنش دارید را انتخاب کنید.

فایل sw.js را باز کرده و این قطعه کد را به آن اضافه کنید:

var cacheName = ‘site-cache-v1’;

var assetsToCache = [‘asset.js’];

self.addEventListener(‘install’, function(event) {

event.waitUntil(

caches.open(cacheName)

.then(function(cache) {

console.log(‘Opened cache’);

return cache.addAll(assetsToCache);

})

);

});

در این مثال فایل‌هایی را در assetsToCache کش می‌کند. می‌توانید موارد بیشتری را با استفاده از آرایه کش کنید.

 

آموزش pwa

 

چگونه رویدادها را دریافت (Fetch) کنیم؟

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

self.addEventListener(‘fetch’, function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
if (response) {
return response;
}
return fetch(event.request);
}
)
);
});

در قطعه کد بالا یک رویداد fetch تعریف شده که در آن ما promiseی با نام caches.math را قرار داده‌ایم. بنابراین متد تلاش می‌کند که تمام کش‌های ایجاد شده توسط سرویس ورکرتان را پیدا کند. اگر انجام چنین کاری مقدور نباشد در نهایت یک درخواست برای اتصال به شبکه ایجاد می‌شود.

بروز نگه داشتن سرویس ورکرها

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

نکات کشینگ سرویس ورکرها

رویکردهای سنتی کشینگ مرورگر را مجبور می‌ساختند که برای ارتباط با شبکه، URLهای زیرمنبع را نوسازی بکند. اما حال سرویس ورکرها فضایی را برای ذخیره کردن یا کش کردن این زیرمنبع‌ها ارائه می‌دهد، به همین دلیل بدون حتی ارتباط داشتن با شبکه می‌شود به این منابع دسترسی داشت. چگونگی پیاده‌سازی این سرویس ورکرها به معماری وب اپلیکیشن‌تان بستگی دارد.

 

آموزش pwa

 

در اینجا می‌توانید چند نکته کمکی را مطالعه کنید:

۱. سرویس ورکرها و پاسخ‌های جریان یافته

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

۲. کشینگ HTML ایستا با استفاده از سرویس ورکرها

دور زدن شبکه در صورتی که به صورت کامل از HTML ایستا استفاده می‌کنید بسیار ساده است. تنها کافی‌ست تا سرویس ورکری را ایجاد کنید که در پاسخ به ناوبری وبسایت به شما سندی را ارسال می‌کند. البته باید منطقی non-blocking را نیز در اپلیکیشن‌تان ایجاد کنید، در غیر اینصورت بروزرسانی HTML امکان پذیر نخواهد بود. این کار را می‌توانید از طریق روشی با نام stale-while-revalidate انجام دهید:

self.addEventListener(‘fetch’, event = {
if (event.request.mode === ‘navigate’) {
event.respondWith(async function() {
const normalizedUrl = new URL(event.request.url);
normalizedUrl.search = ”;
const fetchResponseP = fetch(normalizedUrl);
const fetchResponseCloneP = fetchResponseP.then(r => r.clone());
event.waitUntil(async function() {
const cache = await caches.open(‘my-cache-name’);
await cache.put(normalizedUrl, await fetchResponseCloneP);
}());
return (await caches.match(normalizedUrl)) || fetchResponseP;
}());
}
});

به عنوان یک جایگزین می‌توانید از Workbox برای ساخت سرویس ورکری در جهت کش منابع ایستا استفاده کنید.

۳. سرویس ورکرها و اپلیکیشن‌های تک صفحه‌ای

ادغام سرویس ورکرها با معماری پوسته اپلیکیشن به اپلیکیشن تک صفحه‌ای شما این قابلیت را می‌دهد که در صورت مدیریت درخواست‌های ناوبری از شبکه دوری کنید. یک بار که آن را نصب و فعال کنید قابلیت‌های مدیریت قدرتمندی خواهید داشت. در فایل app-shell.html کد زیر را وارد کنید:

 

self.addEventListener(‘fetch’, event => {
if (event.request.mode === ‘navigate’) {
event.respondWith(caches.match(‘app-shell.html’));
}
});

تمام درخواست‌های ناوبری حال باید از طریق یک نسخه کش شده از HTML بازگردانده شوند. کدهای بالا همچنین شامل یک منطق مسیریابی کلاینت-ساید می‌شود که برای رندر محتوایی براساس URLها انجام می‌شود.

آموزش pwa

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

5 × یک =