ایپلی کیشنز کی تعمیر کریں جو آف لائن کام کرتے ہیں

Sep 11, 2025
کيسے

ایک طویل وقت کے لئے، آف لائن کی فعالیت، پس منظر کی مطابقت پذیری اور دھکا نوٹیفکیشن نے ان کے ویب ہم منصبوں سے مقامی اطلاقات کو مختلف کر دیا ہے. The. سروس کارکن API. کھیل ہی کھیل میں تبدیل کرنے والی ٹیکنالوجی ہے جو کھیل کے میدان میں چلتا ہے. اس ٹیوٹوریل میں، ہم اس صفحہ کو تعمیر کرنے کے لئے استعمال کریں گے جو کوئی انٹرنیٹ کنکشن نہیں ہے جبکہ مواد کی خدمت کرسکتا ہے.

01. ایک HTTPS سرور

سروس کارکنوں کے بارے میں سوچنے کا سب سے آسان طریقہ کوڈ کے ایک ٹکڑے کے طور پر ہے جو ایک کلائنٹ مشین پر سائٹ کی طرف سے نصب کیا جاتا ہے، پس منظر میں چلتا ہے، اور اس کے بعد اس سائٹ پر بھیجے جانے والی درخواستوں کو مداخلت اور جوڑی کرنے کے قابل بناتا ہے. کیونکہ یہ ایسی طاقتور صلاحیت ہے، ایک زندہ ماحول میں سروس کارکنوں کے ساتھ کام کرنے کے لئے آپ کو HTTPS پر چلنے کی ضرورت ہے. اس بات کو یقینی بناتا ہے کہ وہ استحصال نہیں کی جاسکتی ہیں، اس بات کا یقین کرکے سروس کارکن براؤزر کو ایک صفحے سے حاصل کرتا ہے حقیقی ہے.

ترقی کے مقاصد کے لئے، تاہم، ہم بغیر HTTPS کے بغیر چل سکتے ہیں http: // localhost / اس اصول کے استثنا کے طور پر اجازت دی جاتی ہے. شروع کرنے کا سب سے آسان طریقہ NPM کے ساتھ ہے HTTP سرور پیکیج 

 این پی ایم HTTP سرور انسٹال کریں
http-server -p 8000 -C-1

02. ایک بنیادی صفحہ قائم کریں

ابھی سرور پر کچھ بھی نہیں ہے، لہذا ہم خدمت کرنے کے لئے ایک بنیادی صفحہ بناتے ہیں. ہم ایک نیا index.html فائل بنائیں گے، اور جب ہم سرور چلاتے ہیں تو اب یہ قابل رسائی ہو گا http: // localhost: 8000. .

اس مرحلے میں، آپ یہ محسوس کریں گے کہ اگر آپ HTTP سرور کو ختم کرتے ہیں اور براؤزر میں صفحہ کو تازہ کر دیتے ہیں، تو آپ سائٹ تک پہنچنے کے بعد سے ایک غلطی کا صفحہ ملیں گے. یہ مکمل طور پر متوقع ہے کیونکہ ہم ابھی تک کسی بھی آف لائن مواد کو نہیں بناتے ہیں. 

 اور ایل ٹی؛! ڈیکٹائپ ایچ ٹی ایم ایل اور جی ٹی؛
& lt؛ ایچ ٹی ایم ایل اور جی ٹی؛
  & lt؛ سر اور جی ٹی؛
  & lt؛ میٹا چارسیس = "UTF-8" / & GT؛
  & lt؛ عنوان اور GT؛ سروس کارکن اور ایل ٹی؛ / عنوان اور جی ٹی؛
  & lt؛ سکرپٹ SRC = "site.js" & gt؛ & lt؛ / script & gt؛
  & lt؛ لنک REL = "Stylesheet" کی قسم = "ٹیکسٹ / سی ایس ایس" href = "custom.css" & gt؛
  & lt؛ / سر اور جی ٹی؛
  & lt؛ جسم اور جی ٹی؛
  & lt؛ ہیڈر اور جی ٹی؛
  & lt؛ h1 & gt؛ خوش آمدید اور LT؛ / H1 اور GT؛
  & lt؛ / ہیڈر اور جی ٹی؛
  & lt؛ div id = "مواد" اور GT؛
  & lt؛ p & gt؛ یہاں مواد & lt؛ / p & gt؛
  & lt؛ img src = "kitty.jpg" چوڑائی = "100٪" اور جی ٹی؛
  & lt؛ / div & gt؛
  & lt؛ / جسم اور جی ٹی؛
& lt؛ / ایچ ٹی ایم ایل اور جی ٹی؛

03. ایک سروس کارکن رجسٹر کریں

ہمارے پاس اب ایک ناقابل یقین غیر معمولی صفحہ چل رہا ہے، اور سروس کارکن کو نافذ کرنے کے بارے میں سوچنے کا وقت ہے. ہم کوڈنگ حاصل کرنے سے پہلے، سروس کارکنوں کی زندگی کو سمجھنے کے لئے یہ ایک لمحہ لینے کے قابل ہے.

یہ عمل آپ کے جاوا اسکرپٹ میں سروس کارکن کے 'رجسٹریشن' کے ساتھ بند کرتا ہے، جو براؤزر کو کارکن کو انسٹال کرنے کے لئے بتاتا ہے - اس کی زندگی کا پہلا مرحلہ. اس کی زندگی بھر میں، ایک سروس کارکن مندرجہ ذیل ریاستوں میں سے ایک میں ہوں گے:

  • انسٹال کرنا: ایک بار سروس کارکن رجسٹرڈ ہونے کے بعد، اس کی تنصیب عام طور پر جامد مواد کو ڈاؤن لوڈ کرنے اور کیش کو ڈاؤن لوڈ کرنے کے لئے استعمال کیا جاتا ہے
  • انسٹال: کارکن نظریاتی طور پر استعمال کے لئے تیار ہے لیکن فوری طور پر چالو نہیں کرتا
  • چالو کرنا: ایک انسٹال سروس کارکن خود کو چالو کرے گا یا تو موجودہ سروس کارکن نہیں ہے، یا بعض شرائط ختم ہونے کے لئے موجودہ ایک کی قیادت کریں؛ سرگرمی عام طور پر پرانی فائلوں کو کیش آف آف لائن مواد سے صاف کرنے کے لئے استعمال کیا جاتا ہے
  • چالو: سروس کارکن اب دستاویز پر کنٹرول کرتے ہیں، اور درخواستوں کو سنبھال سکتے ہیں
  • بے شمار: اگر سروس کارکن انسٹال یا فعال کرنے میں ناکام رہے تو، یا اگر یہ ایک نیا سروس کارکن کی طرف سے تبدیل ہوجائے تو

04. آپ رجسٹرڈ ہیں چیک کریں

چلو سروس کارکن رجسٹر کریں. یہ مؤثر طور پر جاوا اسکرپٹ فائل میں براؤزر کو پوائنٹس دیتا ہے جو سروس کارکن کے رویے کی وضاحت کرتا ہے. رجسٹریشن سروس کے اعتراض کا استعمال کرتے ہوئے کیا جاتا ہے جو API میں داخلہ نقطہ ہے. ہم یہ بھی چیک کریں گے کہ ایسا کرنے کی کوشش کرنے سے قبل API اصل میں براؤزر میں موجود ہے.

The. رجسٹر () فنکشن ہر وقت صفحہ بوجھ کو محفوظ طریقے سے بلایا جا سکتا ہے، اور براؤزر اس بات کا تعین کرے گا کہ سروس کارکن پہلے سے ہی رجسٹرڈ ہو چکا ہے. 

 اگر (نیویگیٹر میں 'سروس ورکر') {
  ونڈو. Addeventlistener ('لوڈ'، فنکشن () {
  نیویگیٹر. serviceworker.register ('serviceworker.js'، {دائرہ کار: './'}).
  کنسول. log ("سروس کارکن کامیابی سے رجسٹرڈ.")؛
  }، فنکشن (غلطی) {
  کنسول. log ("سروس کارکن رجسٹریشن میں خرابی:" + غلطی)؛
  })؛
  })؛
}

05. سروس کارکن کو لاگو کریں

اگلا ہمیں سروس کارکن خود کو لاگو کرنے کی ضرورت ہے. سروس کارکن اپنے صفحے پر اپنی زندگی کی زندگی اور سرگرمی سے متعلق ایک رینج کے لئے سن سکتے ہیں. سب سے اہم لوگ انسٹال کرتے ہیں، چالو اور لے جاتے ہیں.

چلو ایک سننے کے لئے شروع کرتے ہیں انسٹال واقعہ، جس میں کارکن کی تنصیب مکمل ہوجاتی ہے. یہ ہمیں سروس کارکن کو ہدایت کرنے کے قابل بناتا ہے کہ موجودہ فولڈر میں کسی کیش میں کچھ آف لائن مواد شامل کریں. ہمیں اپنے کیش کا نام بھی کرنے کی ضرورت ہے - چونکہ پرانے کیش جاری رہ سکتی ہے، اس کیش کا نام اپ ڈیٹ / ورژن اپ ڈیٹ کرنا آپ کو بعد میں مواد کے نئے ورژن کی خدمت کرنے کے قابل بناتا ہے. 

 var currentcache = 'ڈیمو کیش'؛
Self.addeventlistener ('انسٹال'، ایونٹ = & gt؛ {
  Event.Waittil (
  Caches.Open (Curauntcache) .یہ (فنکشن (کیش) {
  کنسول .log ("کیش میں مواد شامل کرنا.")؛
  cache.addall واپس لو ([
  './index_offline.html'،
  './kitty_offline.jpg'
  './custom.css'
  ])؛
  })
  )؛
})؛

06. ایونٹ ایونٹ

جب ہم لوڈ ہو جائیں گے تو ہمارا صفحہ اب مواد کیش کریں گے، لیکن ہمیں درخواستوں میں مداخلت کرنے اور اس کیش میں ان کو ری ڈائریکٹ کرنے کے لئے کچھ میکانزم کی ضرورت ہے. ایسا کرنے کے لئے، ہمیں سننے کی ضرورت ہے لٹا واقعات، جس میں ایک درخواست جیسے ہماری حاصل ہوتی ہے وہ شروع ہوتا ہے index.html. فائل نیٹ ورک میں بنایا گیا ہے. پھر ہم کیش کے خلاف درخواست سے مل کر، اور اگر پایا جاتا ہے تو کیش وسائل کی خدمت کریں. دوسری صورت میں، ہم سرور کے لئے API درخواست پر واپس آتے ہیں.

اس نقطہ نظر کے قابل ہے کہ ہمارے پاس جاوا اسکرپٹ وعدوں پر کام کرنے کے لئے ہمارے پاس بھاری انحصار ہے. یہ ایک چھوٹا سا مشکل ہوسکتا ہے، لہذا اگر آپ نے پہلے ان کا استعمال نہیں کیا ہے تو اس کے ساتھ واقف ہونے کے قابل ہیں. 

 Self.addeventlistener ('Fetch'، ایونٹ = & gt؛ {
  واقعہ. جواب دیں (
  Caches.match (event.request) .یہ (جواب = & gt؛ {
  واپسی کا جواب || لے لو (ایونٹ. request)؛
  })
   )؛
    })؛

07. اضافی ایونٹ بڑھاؤ

اگر آپ اب اسے آزمائیں (HTTP سرور کو ختم کریں اور صفحے کو تازہ کر دیں)، آپ کو یہ معلوم ہونا چاہئے کہ آپ کا صفحہ آن لائن اور آف لائن دونوں کام کرتا ہے. تاہم، یہ ممکن ہے کہ آپ زیادہ ذہین آف لائن رویے چاہتے ہیں، جب سرور دستیاب نہیں ہے تو مختلف مواد یا فعالیت دستیاب ہے.

اس کو حاصل کرنے کے لئے، ہم ہماری توسیع کر سکتے ہیں لٹا واقعہ کا جواب خاص طور پر نیویگیشن کی درخواستوں کے لئے چیک کرنے اور ایک مختلف آف لائن صفحہ کے ساتھ جواب دینے کے لۓ ایک دوسرے کا پتہ چلا ہے. یہ index_offline.html. فائل آپ کے آن لائن صفحہ کی ایک تغیر ہوسکتی ہے، یا مکمل طور پر مختلف، اور دیگر وسائل بھی استعمال کر سکتے ہیں جنہیں آپ نے اس طرح کی طرح کیش کیا ہے custom.css. . 

 Self.addeventlistener ('Fetch'، ایونٹ = & gt؛ {
  اگر (ایونٹ. request.mode === 'نیویگیشن') {
  واقعہ. جواب دیں (
  لے لو (ایونٹ. request) .catch (غلطی = & gt؛ {
  کنسول .log ("صفحہ دستیاب نہیں. آف لائن مواد واپس.")؛
  کیشوں کو واپس لو. ('./ index_offline.html')؛
  })
  )؛
  } اور
  واقعہ. جواب دیں (
  Caches.match (event.request) .یہ (جواب = & gt؛ {
  واپسی کا جواب || لے لو (ایونٹ. request)؛
  })
  )؛
  }
})؛

08. کیش کو حذف کریں

ہمیں ایک اور چیز ہے جو ہمیں ضرورت ہے. اگر آپ اب آپ کے آف لائن مواد کو تبدیل کرنے کی کوشش کرتے ہیں، تو آپ کو یہ پتہ چلا جاسکتا ہے کہ جب آپ اپنے صفحے کو آزمائیں گے تو آپ اب بھی پرانے ورژن حاصل کرتے ہیں! یہی وجہ ہے کہ بڑی عمر کی فائلیں اب بھی محفوظ ہیں.

آپ کو ان کی خدمت کرنے سے روکنے کے لئے کیش سے پرانے فائلوں کو صاف کرنے کے لئے کچھ لاگو کرنے کی ضرورت ہے. یہ ایک کے جواب میں کیا جاتا ہے محرک کریں واقعہ اور تمام کیشوں کو حذف کرنا جو موجودہ کام میں بیان کردہ نام سے متفق نہیں ہے. اس کے بعد آپ ہر بار جب آپ اپنے آف لائن مواد میں ترمیم کرتے ہیں تو ہر وقت ایک ورژن نمبر شامل کرسکتے ہیں، اس بات کا یقین کرنے کے لئے کہ یہ تازہ ترین ہے. 

 یہ. Addeventlistener ('چالو'، ایونٹ = & gt؛ {
  Var Activecaches = [currentcache]؛
  کنسول. log ("سروس کارکن چالو. کیش کی جانچ پڑتال کی تازہ ترین تاریخ ہے.")؛
  Event.Waittil (
  caches.keys (). پھر (کی فہرست = & gt؛ {
  WERVER.ALL (Keylist.Map (کلیدی = & gt؛ {
  اگر (Activecaches.indexof (کلیدی) === -1) {
  کنسول. log ("پرانے کیش کو حذف کرنا" + کلیدی)؛
  Caches.delete (کلیدی) واپس لو؛
  }
  })؛
  })
  )؛
})؛

یہ مضمون ویب ڈیزائنر میگزین مسئلہ # 268 میں شائع کیا گیا تھا. اب سبسکرائب کریں.

مزید پڑھ:

  • APIS کے لئے ایک کوڈر کا گائیڈ
  • تین.js کا استعمال کرتے ہوئے ویب جی ایل کے ساتھ شروع کرو
  • 2018 کے لئے 12 بھاری ویب ڈیزائن رجحانات

کيسے - انتہائی مشہور مضامین

گلاب کیسے بنانا: ابتدائی اور اعلی درجے کی تجاویز

کيسے Sep 11, 2025

گلاب کیسے بنانا روایات گلاب ویڈیو کیسے ڈرائیو روایات گلاب کیسے بنانا: ..

بلما کے ساتھ شروع کریں

کيسے Sep 11, 2025

(تصویری کریڈٹ: بلما) بلما کا استعمال کرتے ہوئے شروع کرنا چاہتے ہی�..

3D آرٹ میں 2D عکاسی کو تبدیل کریں

کيسے Sep 11, 2025

میرا سفر کرنے میں میرا سفر 3D آرٹ کچھ سال پہلے شروع ہوا جب میرے ب�..

19 ویں صدی کے ماسٹر کی طرح پینٹ کیسے کریں

کيسے Sep 11, 2025

19 ویں صدی آرٹ کے لئے ایک شاندار وقت تھا. فنکاروں کو اعلی سلسلے میں منعقد ..

ان سب سے اوپر تجاویز کے ساتھ اپنے تیل کی پینٹنگز کے لئے vibrancy شامل کریں

کيسے Sep 11, 2025

مواد مارجولین ایک درمیانے درجے کے طور پر لیسڈ تیل کا استعم�..

Sketchable کے ساتھ کنٹرول اور ہموار سٹروک پینٹ

کيسے Sep 11, 2025

Sketchable. ونڈوز 10 کے لئے ایک پینٹنگ اپلی کیشن ہے. یہ آپ کو بڑی تصاویر پر بڑے تصاویر پر بڑے اسٹروک پینٹ ک�..

ایک تاثرات کی طرح پینٹ

کيسے Sep 11, 2025

تاثرات آرٹ ورک تازہ اور غیر معمولی تھا، اور جرات مندانہ برشسٹروک کے سات..

حقیقت پسندانہ سی جی کپڑا کیسے بنائیں

کيسے Sep 11, 2025

3D میں کپڑے اور کپڑے کے ساتھ کام کرتے وقت، یہ اچھی قرارداد اور ایک عظیم ن�..

اقسام