علی فرهادی و کاربردهای آنServiceWorkerمعرفی

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 APIWebRTC

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

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

ServiceWorkerServiceWorker چیست؟

ک�ه در پس زمینه و در WebWorkerاس�کریپتی اس�ت مشاب�ه •context.ی مستقل از صفحه وب اجرا می شود

در • دوباره و متوقف شده آ�ن اجرای نیس�ت نیاز ک�ه زمان�ی هنگام نیاز اجرا می شود.

میتوان�د ب�ه ص�ورت رویدادگ�ر حت�ی زمان�ی ک�ه هی�چ صفحه ای باز •نیست اجرا شود.

بین • پروکس�ی ی�ک ب�ه ص�ورت کردن عم�ل آ�ن اص�لی کاربرد صفحه وب و شبکه است.

ب�ه عنوان بس�تری برای س�ایر اس�تانداردهایی ک�ه احتیاج ب�ه یک •سرویس پس زمینه دارند عمل می کند.

کار می کند.HTTPSبه دالیل امنیتی فقط با •

ServiceWorker Life Cycle

Install

Activate

Idle/Terminate

:ServiceWorkerچرخه حیات یک

فراخوانی میشود.install میشود رویداد registerبار اول که • فراخوانی میشود.activateزمانی که فرایند نصب خاتمه یابد رویداد • میتواند کنترل صفحات را به دست ServiceWorkerپس از اتمام فرایند فعال سازی، •

بگیرد. را متوقف میکند.ServiceWorkerزمانی که هیچ صفحه ای باز نباشد، مرورگر • مجددا اجرا میشود.ServiceWorkerدر صورت نیاز )به صورت رویدادگرا( • تغییر کند، مجددا فرایند نصب انجام میشود ولی فرایند ServiceWorkerزمانی که فایل •

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

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.”

آینده • AppCache جایگزین ServiceWorkerدر خواهد شد.

ServiceWorker for Offline Appsif ('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:

ServiceWorker for Push NotificationsWebSocket نسبت به Pushمزایای

ب�ا بس�ته شدن ص�فحه قطع WebSocketارتباط •ول�ی که ServiceWorkerمیشود زمان�ی حت�ی

را pushص�فحه س�ایت بس�ته اس�ت هم رویداد دریافت میکند.

در ص�ورت افزای�ش تعداد کاربران برای استفاده • منابع بیشتری سمت سرور نیاز WebSocketاز

پاسخگو را اتص�ال همزمان زیاد تعداد ت�ا اس�ت این Push APIباشد. ام�ا در ص�ورت اس�تفاده از

دهنده عهده س�رویس ب�ه خواهد Pushوظیف�ه بود.

در • کمتری منابع ک�ه هوشمن�د های گوش�ی در از اس�تفاده دارن�د تر Pushاختیار بهین�ه بس�یار

است.

References & Image Credits• ServiceWorker Cookbook

https://serviceworke.rs/

• Is ServiceWorker ready?https://jakearchibald.github.io/isserviceworkerready/

• Using ServiceWorkershttps://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers

• MDN :: ServiceWorker APIhttps://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API

• Push API Draft Specificationhttps://w3c.github.io/push-api/

• ServiceWorker Draft Specificationshttps://slightlyoff.github.io/ServiceWorker/spec/service_worker/

• Application Cache is a Douchebaghttp://alistapart.com/article/application-cache-is-a-douchebag

• Building Offline Sites with ServiceWorkers and UpUphttps://dev.opera.com/articles/offline-with-upup-service-workers/

پایان