ترقی پسند ویب اپلی کیشن کی تعمیر کیسے کریں

Sep 11, 2025
کيسے

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

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

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

  • ایک مصروف صارف کے تجربے کے لئے 10 مراحل

اگرچہ ترقی پسند ویب اطلاقات ویب پر بہت سارے فوائد اور فعالیت لاتے ہیں، انہیں اپنی پوری درخواست کو دوبارہ لکھنا ضروری نہیں ہے. کسی بھی اپلی کیشن کو اس میں کچھ اضافی تہوں کو شامل کرکے ایک پی ڈبلیو اے میں تبدیل کیا جاسکتا ہے.

بہترین نتائج کے لئے، آپ شروع سے کارکردگی پر مضبوط زور ڈالنا چاہتے ہیں - لیکن یہ کسی بھی ویب ایپ کی سچائی ہے. یہاں، ہم آپ کے ایپ ترقی پسند بنانے کے لئے اقدامات کے ذریعے چلیں گے.

اگر آپ کو ایک ہموار چل رہا ہے سائٹ بنانا چاہتے ہیں، تو آپ کو یقینی بنائیں ویب میزبانی جگہ ہے اور ایک مہذب استعمال کرتے ہیں ویب سائٹ بلڈر .

01. https پر خدمت کریں

چلو ایماندار ہو: آپ کو یہ ویسے بھی کرنا چاہئے. SSL ویب تک سیکورٹی کی ایک اضافی پرت میں اضافہ کرتا ہے، آپ کے صارفین کو آپ کی ویب سائٹ کا استعمال کرنے میں محفوظ محسوس کرنے میں مدد ملتی ہے. PWAS کے ساتھ، HTTPS سروس کارکنوں کو استعمال کرنے اور گھر کی سکرین کی تنصیب کی اجازت دینے کے لئے ضروری ہے. آپ اپنے ڈومین رجسٹرار سے تھوڑا اخراجات سے SSL سرٹیفکیٹ خرید سکتے ہیں اور پھر آپ کے میزبانی کی خدمت کے ذریعے اسے ترتیب دیں.

02. ایک درخواست شیل بنائیں

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

ذیل میں مثال کے طور پر ایک reasect.js درخواست سے لیا جاتا ہے. صارف ایپ کی ایک سطر اور انڈیکس. html میں ایک لوڈنگ اشارے کے ساتھ پیش کیا جاتا ہے. اس کے بعد، جاوا اسکرپٹ بوجھ اور رد عمل کے جوتے کے بعد، مکمل درخواست شیل کے اندر پیش کی جاتی ہے. 

 & lt؛! - index.html - & gt؛
& lt؛ جسم اور جی ٹی؛
& lt؛ div id = "جڑ" اور GT؛
  & lt؛ div id = "کنٹینر" اور GT؛
  & lt؛ div class = "اندرونی کنٹینر" اور جی ٹی؛
  & lt؛ div id = "ہیڈر" اور GT؛
  & lt؛ img src = "/ اثاثوں / icon.png" alt = "علامت (لوگو) / & gt؛
  & lt؛ h1 & gt؛ چیٹ & lt؛ / h1 & gt؛
  & lt؛ / div & gt؛
  & lt؛ div id = "لوڈنگ کنٹینر" اور GT؛
  & lt؛ img src = "/ اثاثوں / icon.png" alt = "علامت (لوگو)" ad = "لوڈر" / & gt؛
  & lt؛ / div & gt؛
  & lt؛ / div & gt؛
  & lt؛ / div & gt؛
  & lt؛ / div & gt؛
& lt؛ / جسم اور جی ٹی؛
// index.js.
Reactdom.render (
& lt؛ اے پی پی / اور جی ٹی؛
دستاویز. PetElementByid ('جڑ')
)؛

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

PWA Goodies کے مکمل سپیکٹرم میں نل کرنے کے لئے (پش اطلاعات، کیشنگ، انسٹال کریں) آپ کو ایک سروس کارکن کی ضرورت ہوگی.

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

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

& lt؛ سکرپٹ اور جی ٹی؛
  اگر (نیویگیٹر میں 'سروس ورکر') {
  ونڈو. Addeventlistener ('لوڈ'، فنکشن () {
  نیویگیٹر. serviceworker.register ('سروس-کارکن'). پھر (فنکشن (رجسٹریشن) {
  // رجسٹریشن کامیاب تھا
  کنسول .log (رجسٹرڈ! ')؛
  }، فنکشن (ERR) {
  // رجسٹریشن نہیں ہو سکی :(
  کنسول. log ('سروس ورکس رجسٹریشن ناکام ہوگیا:'، غلط)؛
  }). پکڑو (فنکشن (غلط) {
  کنسول .log (غلط)؛
  })؛
  })؛
  } اور
  کنسول .log ('سروس کارکن کی حمایت نہیں کی جاتی ہے')؛
  }
  & lt؛ / script & gt؛
// سروس ورکر. js.
self.addeventlistener ('انسٹال'، فنکشن () {
  کنسول .log (انسٹال کریں! ')؛
})؛
self.addeventlistener ("چالو"، ایونٹ = & gt؛ {
  کنسول .log ('چالو کریں!')؛
})؛
self.addeventlistener ('Fetch'، فنکشن (ایونٹ) {
  کنسول. log ('fetch!'، ایونٹ. request)؛
})؛

04. دھکا نوٹیفکیشن شامل کریں

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

اگر آپ خرگوش سے ایک اپلی کیشن شروع کررہے ہیں تو، Google کی فائر بیسس سروس نسبتا دردناک دھکا نوٹیفکیشن کے لئے فائر بیس بادل پیغام رسانی کے ساتھ آتا ہے (یاد رکھیں: اس بات کو یقینی بنائیں کہ آپ اپنے ڈیزائن فائلوں کو محفوظ رکھیں کلاؤڈ اسٹوریج) . مندرجہ ذیل کوڈ سے پتہ چلتا ہے کہ دھکا API کے ذریعہ دھکا اطلاعات کے لئے کس طرح رجسٹر کرنے کے لئے رجسٹر کریں. 

 نیویگیٹر. serviceworker.ready.ren (فنکشن (رجسٹریشن) {
  اگر (! رجسٹریشن. pushmanager) {
    انتباہ ('کوئی دھکا اطلاعات کی حمایت نہیں.')؛
    غلط واپسی
  }
  // دھکا مینیجر سے `دھکا نوٹیفکیشن 'سبسکرائب کریں
  رجسٹریشن. pushmanager.subscribe ({
  USERVISINELONLY: درست // موصول ہونے پر ہمیشہ نوٹیفکیشن دکھائیں
  })
  .یہ (فنکشن (سبسکرائب) {
  کنسول .log ('سبسکرائب کیا.')؛
  })
  .catch (فنکشن (غلطی) {
  کنسول .log ('سبسکرائب کی خرابی:'، غلطی)؛
  })؛
})

05. ویب اپلی کیشن شامل کریں

آپ کی درخواست نصب کرنے کے لۓ، آپ کو ایک شامل کرنے کی ضرورت ہے منشور. json. درخواست کی جڑ ڈائرکٹری میں. آپ اس کے بارے میں سوچ سکتے ہیں کہ آپ اپنی درخواست کی وضاحت کے طور پر، جیسے آپ اپلی کیشن اسٹور کو جمع کر سکتے ہیں. اس میں شبیہیں، ایک سپاش اسکرین، ایک نام اور وضاحت شامل ہے.

اس کے لئے کچھ ترتیب بھی ہے کہ آپ کی درخواست کس طرح ظاہر ہوتی ہے جب یہ صارف کی ہوم اسکرین سے شروع ہوتا ہے: کیا آپ براؤزر میں ایڈریس بار کو ظاہر کرنا چاہتے ہیں یا نہیں؟ کیا رنگ آپ کی حیثیت کا بار بننا چاہتے ہیں؟ اور اسی طرح. نوٹ کریں کہ ایک مناسب منشور. json. مختلف آلات کے لئے آئکن سائز کا مکمل سپیکٹرم شامل ہونا چاہئے. ذیل میں کوڈ آپ کے منفی میں سے کچھ خصوصیات میں سے کچھ پیش نظارہ ہے. 

 {
  "Short_name": "چیٹ"،
  "نام": "چیٹ"،
  "شبیہیں": [
  {
  "SRC": "/ اثاثوں / icon.png"،
  "سائز": "192x192"،
  "قسم": "تصویر / PNG"
  }
  ]،
  "start_url": "/ UTM_Source = ہوم اسکرین"،
  "پس منظر_ رنگ": "# E05A47"،
  "Theme_color": "# E05A47"،
  "ڈسپلے": "اسٹینڈل"
}

06. فوری طور پر انسٹال کریں

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

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

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

 ونڈو. ایڈوانٹ لسٹینر ('پہلے سے ہی ان کی ترتیبات'، ای = & gt؛ {
  کنسول. log ('' پہلے سے ہی ان کی فہرست پر مبنی واقعہ ')؛
  e.prepressdefault ()؛
  // اس واقعے کو پھینک دیں تاکہ بعد میں اسے شروع کیا جاسکتا ہے.
  یہ. deferfredprompt = ای؛
  غلط واپسی
  })؛
// جب آپ فوری طور پر ٹرگر کرنا چاہتے ہیں:
یہ. deferfredprompt.prompt ()؛
  یہ. deferfredprompt.userchoice.hen (انتخاب = & gt؛ {
  کنسول .log (انتخاب)؛
  })؛
یہ. deferfredprompt = نیل؛

07. اپنے ایپ کی کارکردگی کا تجزیہ کریں

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

ایسا کرنے کے لئے، میٹرکس کا ایک مفید سیٹ ریل سسٹم ہے. ریل وہی ہے جو Google ایک 'صارف سینٹرل کارکردگی ماڈل' کہتے ہیں - ہمارے ایپ کی کارکردگی کی پیمائش کے لئے ہدایات کا ایک سیٹ.

جواب کے جواب کے لئے کھڑا ہے (آپ کے ایپ کو صارف کے اعمال کا جواب دینے کے لئے کتنا وقت لگتا ہے)، حرکت پذیری (60fps پر حرکت پذیری کی رفتار کو برقرار رکھنے)، بیکار (وقت کا استعمال کرتے وقت جب آپ کے ایپ کو اضافی اثاثوں کو لوڈ کرنے اور اضافی اثاثوں کو لوڈ کرنے کے لئے کچھ اور نہیں کر رہا ہے) اور لوڈ (آپ کے ایپ کو ایک سیکنڈ یا کم میں لوڈ کرنا).

یہاں ایپلی کیشن لوڈنگ کے لئے بامعنی معیارات کی ایک میز ہے، جیسا کہ میگین کیئر کی طرف سے فراہم کی جاتی ہے، ٹیکسٹ مصنف گوگل ویب بنیادی اصول .

delay and user reaction

تصویر کو بڑھانے کے لئے سب سے اوپر دائیں میں آئکن پر کلک کریں

08. لائٹ ہاؤس کے ساتھ اپنا ایپ آڈٹ

گوگل ویب کے مستقبل کے طور پر ترقی پسند ویب اطلاقات کو فروغ دینے والا سب سے بڑا چیمپئن ہے. اس طرح، اس نے آپ کے PWA ترقی کی رہنمائی کے لئے ایک مفید آلہ فراہم کیا ہے.

پہلے سے ہی لائف ہاؤس کہا جاتا ہے اور کروم کی توسیع کے طور پر فراہم کی گئی ہے، کروم 60 کے طور پر یہ 'آڈٹ' ٹیب کے تحت کروم devtools کا ایک حصہ ہے. کیا لائٹ ہاؤس آپ کی درخواست مختلف حالتوں کے تحت چلاتا ہے اور پی ڈبلیو اے کے ہدایات کے مطابق اس کے جواب اور کامیابی کی پیمائش کرتا ہے. اس کے بعد آپ کو 100 سے زائد سکور فراہم کرتا ہے. یہ آپ کے ایپ کو ایک ہی وقت میں ویب بہترین طریقوں پر بھی اسکور کرسکتا ہے.

مندرجہ ذیل متن اقدار لائٹھورہ کی ایک فہرست ہے. استعمال میں وضاحت بھی ظاہر کرتا ہے.

  • ایک سروس کارکن رجسٹر
  • آف لائن جب 200 کے ساتھ جواب دیا جاتا ہے
  • جاوا اسکرپٹ دستیاب نہیں ہے جب کچھ مواد پر مشتمل ہے
  • https کا استعمال کرتا ہے
  • HTTPS پر HTTP ٹریفک کو ری ڈائریکٹ
  • صفحہ لوڈ 3G پر کافی تیز ہے
  • صارف کو ویب اپلی کیشن انسٹال کرنے کے لئے حوصلہ افزائی کی جا سکتی ہے
  • اپنی مرضی کے سپلیش اسکرین کے لئے تشکیل دیا
  • ایڈریس بار برانڈ رنگوں سے ملتا ہے
  • ایک & lt؛ میٹا نام = "Viewport" اور GT؛ ٹیگ کے ساتھ چوڑائی یا ابتدائی پیمانے پر
  • مواد Viewport کے لئے صحیح طریقے سے سائز کا سائز ہے

یہ مضمون اصل میں ویب ڈیزائنر میں شائع ہوا؛ یہاں سبسکرائب کریں .

متعلقہ مضامین:

  • PWAS: موبائل انقلاب میں خوش آمدید
  • موبائل اطلاقات میں حرکت پذیری کا استعمال کیسے کریں
  • 9 حیرت انگیز PWA راز

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

گوگل میں درجہ بندی کیسے کریں

کيسے Sep 11, 2025

(تصویری کریڈٹ: Buzzfeed) لہذا، آپ جاننا چاہتے ہیں کہ Google میں درجہ بندی..

گرو CMS کے ساتھ شروع کریں

کيسے Sep 11, 2025

(تصویری کریڈٹ: مستقبل) گرو ایک فرق کے ساتھ ایک مواد مینجمنٹ سسٹم (C..

3D گھاس کیسے بنانا

کيسے Sep 11, 2025

مختلف قسم کے مختلف طریقوں میں 3D گھاس پیدا کی جا سکتی ہے اور کسی بھی قدرت�..

تخلیق اور متحرک SVG کثیر اجزاء

کيسے Sep 11, 2025

اس سبق میں ہم SVG Triangles سے باہر کی ایک قسم کی تصاویر بنائے جائیں گے، اور ای..

ذمہ دار ویب نوع ٹائپ کے قواعد

کيسے Sep 11, 2025

ذمہ دار ویب نوع ٹائپ مشکل ہے - آپ کو دونوں ڈیزائن چپس اور تکنیکی معلومات دونوں کی ضرورت ہے. لیکن تاہم یہ مشک..

مایا میں اپنی مرضی کے مطابق رگ کنٹرول کیسے بنائیں

کيسے Sep 11, 2025

یہ مایا ٹیوٹوریل آپ کو اپنی مرضی کے مطابق رگوں کی تعمیر کیسے کر�..

postcss-flexbox کے ساتھ پیچیدہ ترتیب کی تعمیر

کيسے Sep 11, 2025

FlexBox سی ایس ایس بلٹ کو کم کرنے کے لئے ایک عظیم آلے ہے، اور کچھ چینی میں ذر..

تخلیقی طور پر پورٹریٹ اور چہرے سے آگاہی کے ساتھ تخلیق کریں

کيسے Sep 11, 2025

ہمارے پاس سبھی فوٹوشاپ میں شراب کے آلے کے ساتھ ایک کھیل تھا، لیکن فوٹوش�..

اقسام