Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

583 views

Published on

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

Published in: Education
  • Be the first to comment

  • Be the first to like this

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

  1. 1. ‫فرهادی‬ ‫علی‬ ‫معرفی‬ServiceWorker‫آن‬ ‫کاربردهای‬ ‫و‬
  2. 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. 3. ServiceWorker ServiceWorker‫چیست؟‬ •‫اسکریپتی‬‫است‬‫مشابه‬WebWorker‫که‬‫در‬‫پس‬‫زمینه‬‫و‬‫در‬context ‫ی‬‫مستقل‬‫از‬‫صفحه‬‫وب‬‫اجرا‬‫‌شود‬‫ی‬‫م‬. •‫زمانی‬‫که‬‫نیاز‬‫نیست‬‫اجرای‬‫آن‬‫متوقف‬‫شده‬‫و‬‫دوباره‬‫در‬‫هنگام‬‫نی‬‫از‬‫اجرا‬ ‫می‬‫شود‬. •‫میتواند‬‫به‬‫صورت‬‫رویدادگر‬‫حتی‬‫زمانی‬‫که‬‫هیچ‬‫صفحه‬‫ای‬‫باز‬‫ن‬‫یست‬‫اجرا‬ ‫شود‬. •‫کاربرد‬‫اصلی‬‫آن‬‫عمل‬‫کردن‬‫به‬‫صورت‬‫یک‬‫پروکسی‬‫بین‬‫صفح‬‫ه‬‫وب‬‫و‬‫شبکه‬ ‫است‬. •‫به‬‫عنوان‬‫بستری‬‫برای‬‫سایر‬‫استانداردهایی‬‫که‬‫احتیاج‬‫به‬‫یک‬‫س‬‫رویس‬ ‫پس‬‫زمینه‬‫دارند‬‫عمل‬‫می‬‫کند‬. •‫به‬‫دالیل‬‫امنیتی‬‫فقط‬‫با‬HTTPS‫کار‬‫می‬‫کند‬.
  4. 4. ServiceWorker Life Cycle Install Activate Idle/Terminate ‫یک‬ ‫حیات‬ ‫چرخه‬ServiceWorker: •‌‫بار‌اول‌که‬register‌‫میشود‌رویداد‬install‫فراخوانی‌میشود‬. •‌‫زمانی‌که‌فرایند‌نصب‌خاتمه‌یابد‌رویداد‬activate‫فراخوانی‌میشود‬. •‌،‫پس‌از‌اتمام‌فرایند‌فعال‌سازی‬ServiceWorker‫میتواند‌کنترل‌صفحات‌را‌به‌دست‌بگیرد‬. •‌‫زمانی‌که‌هیچ‌صفحه‌ای‌باز‌نباشد،‌مرورگر‬ServiceWorker‫را‌متوقف‌میکند‬. •‌‫در‌صورت‌نیاز‬(‫به‌صورت‌رویدادگرا‬)ServiceWorker‫مجددا‌اجرا‌میشود‬. •‌‫زمانی‌که‌فایل‬ServiceWorker‫تغییر‌کند،‌مجددا‌فرایند‌نصب‌انجام‌میشود‌ولی‌فرایند‌فعال‌س‬‌‫ازی‌انجام‬ ‫نمیشود‌تا‌تمام‌صفحات‬‌‫تحت‌کنترل‬ServiceWorker‌‫قبلی‌بسته‌شوند،‌سپس‬ServiceWorker‌‫جدید‬ ‫فعال‌شده‌و‌کنترل‌را‌در‌دست‌می‌گیرد‬.
  5. 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. 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. 7. ServiceWorker for Push Notifications ‫مزایای‬Push‫نسبت‬‫به‬WebSocket •‫ارتباط‬WebSocket‫با‬‫بسته‬‫شدن‬‫صفحه‬‫قطع‬‫میشود‬‫ولی‬ ServiceWorker‫حتی‬‫زمانی‬‫که‬‫صفحه‬‫سایت‬‫بست‬‫ه‬ ‫است‬‫هم‬‫رویداد‬push‫را‬‫دریافت‬‫میکند‬. •‫در‬‫صورت‬‫افزایش‬‫تعداد‬‫کاربران‬‫برای‬‫استفاده‬‫از‬ WebSocket‫منابع‬‫بیشتری‬‫سمت‬‫سرور‬‫نیاز‬‫است‬‫تا‬ ‫تعداد‬‫زیاد‬‫اتصال‬‫همزمان‬‫را‬‫پاسخگو‬‫باشد‬.‫اما‬‫در‬‫ص‬‫ورت‬ ‫استفاده‬‫از‬Push API‫این‬‫وظیفه‬‫به‬‫عهده‬‫سرویس‬‫دهن‬‫ده‬ Push‫خواهد‬‫بود‬. •‫در‬‫گوشی‬‫های‬‫هوشمند‬‫که‬‫منابع‬‫کمتری‬‫در‬‫اختیار‬‫د‬‫ارند‬ ‫استفاده‬‫از‬Push‫بسیار‬‫بهینه‬‫تر‬‫است‬.
  8. 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. 9. ‫پایان‬

×