در این ارائه به معرفی قابلیت جدیدی در مروگر ها با عنوان Service Worker می پردازیم، قابلیتی که کمک میکند اپلیکیشن های تحت وب به اپلیکیشن های native نزدیکتر شوند. سابقا محدوده عمل یک اپلیکیشن تحت وب صرفا یک صفحه وب بود، اما اکنون Service Worker به اپلیکیشن تحت وب این امکان را میدهد که در ورای یک صفحه وب به حیات خودش ادامه دهد. همچنین این تکنولوژی به عنوان بستری برای قابلیت های دیگر نظیر Push Notification، مدیریت محتوای آفلاین، همگام سازی در پس زمینه و مواردی از این دست که سابقا فقط در اپلیکیشن های native قابل پیاده سازی بود، عمل می‌کند.

1. ‫فرهادی‬ ‫علی‬
‫معرفی‬ServiceWorker‫آن‬ ‫کاربردهای‬ ‫و‬

2. HTML 5 Semantics,
Document Object Model
App Cache, Local Storage,
Indexed DB, File API
GeoLocation, Drag and Drop,
Full Screen API, Notification
Web Sockets, Push API
WebRTC
‫امروز‬ ‫تا‬ ‫گذشته‬ ‫از‬ ‫وب‬ ‫استانداردهای‬
Multimedia, Animation,
Poiter Lock, Web Audio
SVG, Canvas,
WebGL, CSS3 3D
Web Workers, Shared Workers,
Shadow DOM, History API
CSS Object Model, Media Query,
WOFF, CSS Animation and Effects

3. ServiceWorker
ServiceWorker‫چیست؟‬
•‫اسکریپتی‬‫است‬‫مشابه‬WebWorker‫که‬‫در‬‫پس‬‫زمینه‬‫و‬‫در‬context
‫ی‬‫مستقل‬‫از‬‫صفحه‬‫وب‬‫اجرا‬‫‌شود‬‫ی‬‫م‬.
•‫زمانی‬‫که‬‫نیاز‬‫نیست‬‫اجرای‬‫آن‬‫متوقف‬‫شده‬‫و‬‫دوباره‬‫در‬‫هنگام‬‫نی‬‫از‬‫اجرا‬
‫می‬‫شود‬.
•‫میتواند‬‫به‬‫صورت‬‫رویدادگر‬‫حتی‬‫زمانی‬‫که‬‫هیچ‬‫صفحه‬‫ای‬‫باز‬‫ن‬‫یست‬‫اجرا‬
‫شود‬.
•‫کاربرد‬‫اصلی‬‫آن‬‫عمل‬‫کردن‬‫به‬‫صورت‬‫یک‬‫پروکسی‬‫بین‬‫صفح‬‫ه‬‫وب‬‫و‬‫شبکه‬
‫است‬.
•‫به‬‫عنوان‬‫بستری‬‫برای‬‫سایر‬‫استانداردهایی‬‫که‬‫احتیاج‬‫به‬‫یک‬‫س‬‫رویس‬
‫پس‬‫زمینه‬‫دارند‬‫عمل‬‫می‬‫کند‬.
•‫به‬‫دالیل‬‫امنیتی‬‫فقط‬‫با‬HTTPS‫کار‬‫می‬‫کند‬.

4. ServiceWorker Life Cycle
Install
Activate
Idle/Terminate
‫یک‬ ‫حیات‬ ‫چرخه‬ServiceWorker:
•‌‫بار‌اول‌که‬register‌‫میشود‌رویداد‬install‫فراخوانی‌میشود‬.
•‌‫زمانی‌که‌فرایند‌نصب‌خاتمه‌یابد‌رویداد‬activate‫فراخوانی‌میشود‬.
•‌،‫پس‌از‌اتمام‌فرایند‌فعال‌سازی‬ServiceWorker‫میتواند‌کنترل‌صفحات‌را‌به‌دست‌بگیرد‬.
•‌‫زمانی‌که‌هیچ‌صفحه‌ای‌باز‌نباشد،‌مرورگر‬ServiceWorker‫را‌متوقف‌میکند‬.
•‌‫در‌صورت‌نیاز‬(‫به‌صورت‌رویدادگرا‬)ServiceWorker‫مجددا‌اجرا‌میشود‬.
•‌‫زمانی‌که‌فایل‬ServiceWorker‫تغییر‌کند،‌مجددا‌فرایند‌نصب‌انجام‌میشود‌ولی‌فرایند‌فعال‌س‬‌‫ازی‌انجام‬
‫نمیشود‌تا‌تمام‌صفحات‬‌‫تحت‌کنترل‬ServiceWorker‌‫قبلی‌بسته‌شوند،‌سپس‬ServiceWorker‌‫جدید‬
‫فعال‌شده‌و‌کنترل‌را‌در‌دست‌می‌گیرد‬.

5. ServiceWorker for Offline Apps
‫چرا‬‫از‬AppCache‫استفاده‬‫نکنیم؟‬
•‫بیش‬‫از‬‫حد‬‫پیچیده‬‫است‬.
•‫انعطاف‬‫پذیر‬‫نیست‬‫و‬‫فقط‬‫برای‬Use Case‫های‬‫خاص‬
‫کاربرد‬‫دارد‬.
• “The ApplicationCache spec is like an onion:
it has many many layers, and as you peel
through them you’ll be reduced to tears.”
•‫در‬‫آینده‬ServiceWorker‫جایگزین‬AppCache
‫خواهد‬‫شد‬.

6. ServiceWorker for Offline Apps
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js');
}
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open('static-v1').then(function(cache) {
return cache.addAll([
'/index.html',
'/fallback.html',
new Request('//mycdn.com/style.css', {mode: 'no-cors'}),
new Request('//mycdn.com/script.js', {mode: 'no-cors'})
]);
})
);
});
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || event.default();
}).catch(function() {
return caches.match('/fallback.html');
})
);
});
in index.html:
in sw.js:

7. ServiceWorker for Push Notifications
‫مزایای‬Push‫نسبت‬‫به‬WebSocket
•‫ارتباط‬WebSocket‫با‬‫بسته‬‫شدن‬‫صفحه‬‫قطع‬‫میشود‬‫ولی‬
ServiceWorker‫حتی‬‫زمانی‬‫که‬‫صفحه‬‫سایت‬‫بست‬‫ه‬
‫است‬‫هم‬‫رویداد‬push‫را‬‫دریافت‬‫میکند‬.
•‫در‬‫صورت‬‫افزایش‬‫تعداد‬‫کاربران‬‫برای‬‫استفاده‬‫از‬
WebSocket‫منابع‬‫بیشتری‬‫سمت‬‫سرور‬‫نیاز‬‫است‬‫تا‬
‫تعداد‬‫زیاد‬‫اتصال‬‫همزمان‬‫را‬‫پاسخگو‬‫باشد‬.‫اما‬‫در‬‫ص‬‫ورت‬
‫استفاده‬‫از‬Push API‫این‬‫وظیفه‬‫به‬‫عهده‬‫سرویس‬‫دهن‬‫ده‬
Push‫خواهد‬‫بود‬.
•‫در‬‫گوشی‬‫های‬‫هوشمند‬‫که‬‫منابع‬‫کمتری‬‫در‬‫اختیار‬‫د‬‫ارند‬
‫استفاده‬‫از‬Push‫بسیار‬‫بهینه‬‫تر‬‫است‬.

8. References & Image Credits
• ServiceWorker Cookbook
https://serviceworke.rs/
• Is ServiceWorker ready?
https://jakearchibald.github.io/isserviceworkerready/
• Using ServiceWorkers
https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers
• MDN :: ServiceWorker API
https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
• Push API Draft Specification
https://w3c.github.io/push-api/
• ServiceWorker Draft Specifications
https://slightlyoff.github.io/ServiceWorker/spec/service_worker/
• Application Cache is a Douchebag
http://alistapart.com/article/application-cache-is-a-douchebag
• Building Offline Sites with ServiceWorkers and UpUp
https://dev.opera.com/articles/offline-with-upup-service-workers/

9. ‫پایان‬