رهادی ف ی عل ی ف ر معServiceWorker ن ردهای آ ب و کار
علی فرهادی و کاربردهای آن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/
پایان