एक प्रगतिशील वेब ऐप कैसे बनाएं

Sep 14, 2025
कैसे करना है

मोबाइल अब वेब के आधे से अधिक वेब यातायात के लिए खाते हैं, और वेब एप्लिकेशन उपयोगकर्ताओं को ब्राउज़र में चीजें करने में सक्षम बनाता है जो मूल ऐप्स प्रतिद्वंद्वी है, लेकिन एक समस्या है: कनेक्शन और डिवाइस की गुणवत्ता दुनिया भर में व्यापक रूप से भिन्न होती है।

सियोल में बिजली के तेजी से कनेक्शन पर उपयोगकर्ताओं को खानपान, और पुराने फोन पर ग्रामीण भारत में उपयोगकर्ता, नवीनतम उपयोगिता चुनौती है, और प्रगतिशील वेब ऐप समाधान हैं।

पीडब्ल्यूए सबसे महत्वपूर्ण सामग्री को लोड करने के लिए प्रगतिशील वृद्धि का उपयोग करते हैं, फिर आवश्यकतानुसार प्रस्तुतिकरण और कार्यात्मक अतिरिक्त जोड़ें, जिसका अर्थ है कि आपके सभी उपयोगकर्ताओं को जितनी जल्दी हो सके एक ही कोर अनुभव मिलता है। यदि आप सबसे बड़े संभावित दर्शकों तक पहुंचना चाहते हैं, तो पीडब्ल्यूए जाने का रास्ता है।

  • एक आकर्षक उपयोगकर्ता अनुभव के लिए 10 कदम

हालांकि प्रगतिशील वेब ऐप्स वेब पर बहुत सारे लाभ और कार्यक्षमता लाते हैं, लेकिन उन्हें आपके पूरे आवेदन को फिर से लिखने की आवश्यकता नहीं है। किसी भी ऐप को कुछ अतिरिक्त परतों को जोड़कर पीडब्ल्यूए में परिवर्तित किया जा सकता है।

सर्वोत्तम परिणामों के लिए, आप शुरुआत से प्रदर्शन पर एक मजबूत जोर देना चाहते हैं - लेकिन यह किसी भी वेब ऐप के बारे में सच है। यहां, हम आपके ऐप को प्रगतिशील बनाने के लिए चरणों के माध्यम से चलेंगे।

यदि आप एक चिकनी चलने वाली साइट बनाना चाहते हैं, तो सुनिश्चित करें कि आपका वेब होस्टिंग स्पॉट पर है और एक सभ्य का उपयोग करें वेबसाइट निर्माता ।

01. HTTPS पर परोसें [4 9]

आइए ईमानदार रहें: आपको वैसे भी ऐसा करना चाहिए। एसएसएल वेब पर सुरक्षा की एक अतिरिक्त परत जोड़ता है, जिससे आपके उपयोगकर्ताओं को आपकी साइट का उपयोग करने में सुरक्षित महसूस करने में मदद मिलती है। पीडब्ल्यूएएस के साथ, सेवा श्रमिकों का उपयोग करने और होम स्क्रीन स्थापना की अनुमति देने के लिए एचटीटीपीएस आवश्यक है। आप छोटे खर्च पर अपने डोमेन रजिस्ट्रार से एक एसएसएल प्रमाणपत्र खरीद सकते हैं और फिर इसे अपनी होस्टिंग सेवा के माध्यम से कॉन्फ़िगर कर सकते हैं।

02. एक आवेदन खोल बनाएँ [4 9]

आपका ऐप शैल पहली चीज है जो लोड करती है - जो पहली चीज उपयोगकर्ता को देखती है। यह पूरी तरह से आपके इंडेक्स HTML दस्तावेज़ में मौजूद होना चाहिए, इनलाइन सीएसएस के साथ, यह सुनिश्चित करने के लिए कि यह जितनी जल्दी हो सके दिखाई देता है और आपका उपयोगकर्ता आवश्यक से अधिक समय तक एक सफेद स्क्रीन पर नहीं देख रहा है। आवेदन खोल प्रगतिशील वृद्धि के पैटर्न का हिस्सा बनता है। आपके ऐप को जितनी जल्दी हो सके उपयोगकर्ता की सामग्री देनी चाहिए, और उसके बाद इसे और अधिक डेटा (संभावित जावास्क्रिप्ट) लोड के रूप में बढ़ाएं।

नीचे दिया गया उदाहरण React.js एप्लिकेशन से लिया गया है। उपयोगकर्ता को ऐप की रूपरेखा और index.html में लोडिंग सूचक के साथ प्रस्तुत किया जाता है। फिर, एक बार जब जावास्क्रिप्ट लोड हो जाता है और जूते को प्रतिक्रिया देता है, तो पूर्ण आवेदन खोल के भीतर प्रदान किया जाता है। 

 & lt;! - index.html - & gt;
& lt; शरीर & gt;
& lt; div id = "रूट" & gt;
  & lt; div id = "कंटेनर" & gt;
  & lt; div class = "आंतरिक-कंटेनर" & gt;
  & 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 = "लोगो" आईडी = "लोडर" / & gt;
  & lt; / div & gt;
  & lt; / div & gt;
  & lt; / div & gt;
  & lt; / div & gt;
& lt; / शरीर & gt;
// index.js
ReactDom.Render (
& lt; ऐप / & gt ;;
document.getElementByID ('रूट')
);
[5 9]
  

   03. एक सेवा कार्यकर्ता पंजीकृत करें
  [4 9]
  

   पीडब्ल्यूए उपहारों के पूर्ण स्पेक्ट्रम में टैप करने के लिए (पुश नोटिफिकेशन, कैशिंग, इंस्टॉल प्रॉम्प्ट्स) आपको एक सेवा कार्यकर्ता की आवश्यकता होगी।
  

  

   सौभाग्य से, वे स्थापित करने के लिए बहुत आसान हैं। नीचे, हम पहले जांच करते हैं कि उपयोगकर्ता का ब्राउज़र सेवा श्रमिकों का समर्थन करता है या नहीं। फिर, यदि हां, तो हम सेवा कार्यकर्ता फ़ाइल को पंजीकृत करने के साथ आगे बढ़ सकते हैं, यहां कहा जाता है
   
    सेवा-कार्यकर्ता.जेएस
   
   । ध्यान दें कि इस बिंदु पर उस फ़ाइल के अंदर किसी भी विशेष की आवश्यकता नहीं है - यह खाली हो सकता है।
  

  

   नीचे दिए गए उदाहरण में, हालांकि, हम दिखाते हैं कि तीन प्रमुख सेवा कार्यकर्ता जीवनसूचित कार्यक्रमों में कैसे टैप करें। ये 'इंस्टॉल' हैं, जब उपयोगकर्ता पहले आपके पृष्ठ पर जाता है; पंजीकरण पूरा होने से ठीक पहले, 'सक्रिय'; और 'लाने', जब एप्लिकेशन नेटवर्क अनुरोध करता है। आखिरी वाला कैशिंग और ऑफ़लाइन क्षमता के लिए प्रासंगिक है।
  

  
& lt; स्क्रिप्ट और जीटी;
  यदि ('सेवा सेवाकर्ता' नेविगेटर में) {
  window.addeventlistener ('लोड', समारोह () {
  navigator.serviceworker.register ('सेवा-कार्यकर्ता .js')। फिर (कार्य (पंजीकरण) {
  // पंजीकरण सफल रहा
  Console.log ('पंजीकृत!');
  }, फ़ंक्शन (ERR) {
  // पंजीकरण विफल :(
  Console.log ('सेवा कार्यकर्ता पंजीकरण विफल:', ERR);
  })। कैच (फ़ंक्शन (ERR) {
  Console.log (ERR);
  });
  });
  } अन्य {
  Console.log ('सेवा कार्यकर्ता समर्थित नहीं है');
  }
  & lt; / स्क्रिप्ट & gt;
// सेवा-कार्यकर्ता.जेएस
self.addeventlistener ('स्थापित', फ़ंक्शन () {
  Console.log ('स्थापित!');
});
self.addeventlistener ("सक्रिय", घटना = & gt; {
  Console.log ('सक्रिय!');
});
self.addeventlistener ('fetch', समारोह (घटना) {
  Console.log ('fetch!', Event.Request);
}); [5 9]
  

   04. पुश नोटिफिकेशन जोड़ें
  [4 9]
  

   सेवा कर्मचारी आपके उपयोगकर्ताओं को वेब पुश एपीआई के माध्यम से पुश नोटिफिकेशन प्राप्त करने की अनुमति देते हैं। इसे एक्सेस करने के लिए, आप में टैप कर सकते हैं
   
    self.registration.pushmanager
   
   आपकी सेवा कार्यकर्ता फ़ाइल के भीतर से। चूंकि पुश अधिसूचनाओं को भेजने से आपके बैकएंड सेटअप पर भारी निर्भरता है, हम यहां इसमें गोता नहीं देंगे।
  

  

   यदि आप स्क्रैच से ऐप शुरू कर रहे हैं, तो Google की फायरबेस सेवा अपेक्षाकृत दर्द रहित पुश नोटिफिकेशन के लिए फायरबेस क्लाउड मैसेजिंग के साथ आती है (याद रखें: सुनिश्चित करें कि आप अपनी डिज़ाइन फ़ाइलों को सुरक्षित रखें
   
    घन संग्रहण)
   
   । नीचे दिया गया कोड दिखाता है कि पुश एपीआई के माध्यम से पुश नोटिफिकेशन के लिए पंजीकरण कैसे करें।
  

  

  

  
 navigator.serviceworker.ready.then (समारोह (पंजीकरण) {
  अगर (पंजीकरण। pushmanager) {
    चेतावनी ('कोई पुश अधिसूचना समर्थन।');
    विवरण झूठा है;
  }
  // पुश प्रबंधक से `पुश अधिसूचना` की सदस्यता लेने के लिए
  पंजीकरण। pushmanager.subscrib ({)
  Uservisileonly: True // प्राप्त होने पर हमेशा अधिसूचना दिखाएं
  })
  .then (कार्य (सदस्यता) {
  console.log ('सदस्यता');
  })
  .कैच (फंक्शन (त्रुटि) {
  Console.log ('सदस्यता त्रुटि:', त्रुटि);
  });
}) [5 9]
  

   05. एक वेब ऐप प्रकट करें
  [4 9]
  

   अपने आवेदन को स्थापित करने योग्य बनाने के लिए, आपको एक शामिल करने की आवश्यकता है
   
    manifest.json
   
   आवेदन की रूट निर्देशिका में। आप इसे अपने आवेदन के विवरण के रूप में सोच सकते हैं, जो आप ऐप स्टोर में सबमिट कर सकते हैं। इसमें आइकन, एक स्पलैश स्क्रीन, एक नाम और विवरण शामिल है।
  

  

   उपयोगकर्ता की होम स्क्रीन से लॉन्च होने पर आपका एप्लिकेशन कैसा दिखाई देता है, इसके लिए कुछ कॉन्फ़िगरेशन भी है: क्या आप ब्राउज़र में पता बार दिखाना चाहते हैं या नहीं? आप किस रंग को स्टेटस बार चाहते हैं? और इसी तरह। ध्यान दें कि एक उचित
   
    manifest.json
   
   विभिन्न उपकरणों के लिए आइकन आकार का एक पूर्ण स्पेक्ट्रम शामिल होना चाहिए। नीचे दिया गया कोड आपके प्रकट गुणों में से कुछ का पूर्वावलोकन है।
  

  [9 6] {
  "SHORT_NAME": "चैट",
  "नाम": "चैट",
  "प्रतीक": [
  {
  "एसआरसी": "/ संपत्ति / icon.png",
  "आकार": "192x192",
  "प्रकार": "छवि / पीएनजी"
  }
  ],
  "START_URL": "/? utm_source = homescreen",
  "पृष्ठभूमि_कॉलर": "# E05A47",
  "थीम_कलर": "# E05A47",
  "प्रदर्शन": "स्टैंडअलोन"
} [5 9]
  

   06. इंस्टॉल प्रॉम्प्ट को कॉन्फ़िगर करें
  [4 9]
  

   जब कोई उपयोगकर्ता एक सेवा कार्यकर्ता के साथ एक पीडब्ल्यूए जाता है और प्रकट होता है, तो क्रोम स्वचालित रूप से उन्हें अपने होमस्क्रीन में स्थापित करने के लिए संकेत देगा, निम्नलिखित दिए गए: उपयोगकर्ता को यात्रा के बीच पांच मिनट के साथ साइट पर दो बार जाना चाहिए।
  

  

   यहां विचार यह है कि जब तक उपयोगकर्ता आपके आवेदन में रुचि प्रदर्शित नहीं करता है, और उसके बाद उन्हें अपने डिवाइस का निर्धारण करने के लिए कहें (यह मूल ऐप दृष्टिकोण के विपरीत है, जो उस निवेश के लिए पूछता है)।
  

  

   लेकिन ऐसे मामले हो सकते हैं जहां आप विभिन्न स्थितियों में इंस्टॉल प्रॉम्प्ट दिखाना चाहते हैं, जैसे कि उपयोगकर्ता के बाद एक विशेष उपयोगी कार्रवाई करता है। ऐसा करने के लिए, हम रोकते हैं
   
    ShareStallOMPT
   
   घटना और इसे बाद में सहेजें, फिर जब हम फिट देखते हैं तो प्रॉम्प्ट को तैनात करें।
  

  
 window.addeventlistener ('shareinstallprompt', e = & gt; {
  Console.log ('ShareStallPrompt ईवेंट निकाल दिया गया');
  E.PreventDefault ();
  // घटना को छेड़छाड़ करें ताकि इसे बाद में ट्रिगर किया जा सके।
  this.deferredprompt = e;
  विवरण झूठा है;
  });
// जब आप प्रॉम्प्ट को ट्रिगर करना चाहते हैं:
this.deferredprompt.prompt ();
  this.deferredprompt.userchoice.then (पसंद = & gt; {
  console.log (पसंद);
  });
this.deferredprompt = null; [5 9]
  

   07. अपने ऐप के प्रदर्शन का विश्लेषण करें
  [4 9]
  

   प्रदर्शन पीडब्ल्यूए का दिल और आत्मा है। आपका ऐप सभी नेटवर्क स्थितियों पर उपयोगकर्ताओं के लिए तेज़ होना चाहिए। कैशिंग और ऑफ़लाइन क्षमता बहुत मदद करती है, लेकिन दिन के अंत में, आपके एप्लिकेशन को तेज़ होना चाहिए भले ही उपयोगकर्ता के पास सेवा कार्यकर्ता प्रौद्योगिकी का समर्थन करने के लिए ब्राउज़र न हो। यह प्रगतिशील वृद्धि की परिभाषा है - डिवाइस आधुनिकता या नेटवर्क की स्थिति के बावजूद, सभी के लिए एक महान अनुभव प्रदान करें।
  

  
ऐसा करने के लिए, मेट्रिक्स का एक उपयोगी सेट रेल प्रणाली है। रेल वह है जो Google 'उपयोगकर्ता केंद्रित प्रदर्शन मॉडल' कहता है - हमारे ऐप के प्रदर्शन को मापने के लिए दिशानिर्देशों का एक सेट।
  

  

   एक्रोनिम प्रतिक्रिया के लिए खड़ा है (आपके ऐप को उपयोगकर्ता क्रियाओं का जवाब देने में कितना समय लगता है), एनीमेशन (60fps पर एनीमेशन गति रखते हुए), निष्क्रिय (समय का उपयोग करके जब आपका ऐप अतिरिक्त संपत्ति को लोड करने और कैश करने के लिए कुछ और नहीं कर रहा है) और लोड (अपने ऐप को एक सेकंड या उससे कम में लोड करना)।
  

  

   यहां आवेदन लोडिंग के लिए सार्थक बेंचमार्क की एक सारणी है, जैसा कि मेगिन कीर्नी, टेक लेखक द्वारा आपूर्ति की गई है
   
    Google वेब बुनियादी बातों
   
   ।
  

  
   

    

     

      

       
        
        [12 9]
        delay and user reaction
       
      

     

    

    

     
      छवि को बढ़ाने के लिए शीर्ष दाईं ओर स्थित आइकन पर क्लिक करें
     
    

   [13 9]
  

  

   08. लाइटहाउस के साथ अपने ऐप का ऑडिट करें
  [4 9]
  

   Google वेब के भविष्य के रूप में प्रगतिशील वेब ऐप्स को धक्का देने वाला सबसे बड़ा चैंपियन है। इस प्रकार, इसने आपके पीडब्ल्यूए विकास का मार्गदर्शन करने के लिए एक उपयोगी उपकरण की आपूर्ति की है।
  

  

   पूर्व में लाइटहाउस कहा जाता था और क्रोम एक्सटेंशन के रूप में आपूर्ति की जाती है, क्रोम 60 के रूप में यह 'ऑडिट्स' टैब के तहत क्रोम देवटूल का एक हिस्सा है। क्या लाइटहाउस आपके आवेदन को विभिन्न स्थितियों के तहत चला जाता है और पीडब्ल्यूए दिशानिर्देशों के अनुसार इसकी प्रतिक्रिया और सफलता को मापता है। यह आपको 100 में से स्कोर देता है। यह एक ही समय में वेब सर्वोत्तम प्रथाओं पर आपके ऐप को भी स्कोर कर सकता है।
  

  

   निम्नलिखित पाठ लाइटहाउस मानों की एक सूची है। उपयोग में विवरण भी दिखाता है।
  

  
    
   
  • 
    एक सेवा कार्यकर्ता पंजीकृत करता है
   
    • 
   
  • 
    ऑफ़लाइन होने पर 200 के साथ प्रतिक्रिया करता है
   
    • 
   
  • 
    जावास्क्रिप्ट उपलब्ध होने पर कुछ सामग्री शामिल है
   
    • 
   
  • 
    Https का उपयोग करता है
   
    • 
   
  • 
    HTTPS को HTTP ट्रैफ़िक को पुनर्निर्देशित करता है
   
    • 
   
  • 
    पृष्ठ लोड 3 जी पर पर्याप्त तेज़ है
   
    • 
   
  • 
    उपयोगकर्ता को वेब ऐप इंस्टॉल करने के लिए कहा जा सकता है
   
    • 
   
  • 
    एक कस्टम स्पलैश स्क्रीन के लिए कॉन्फ़िगर किया गया
   
    • 
   
  • 
    पता बार ब्रांड रंगों से मेल खाता है
   
    • 
   
  • 
    एक
    
     & lt; मेटा नाम = "व्यूपोर्ट" & gt;
    
    टैग के साथ
    
     चौड़ाई
    
    या
    
     प्रारंभिक-पैमाना
    
   
    • 
   
  • 
    व्यूपोर्ट के लिए सामग्री का सही आकार है
   
    • 
  

  

   
    यह लेख मूल रूप से वेब डिजाइनर में दिखाई दिया;
   
   
    
     यहां सदस्यता लें
    
   
   
    ।
   
  

  

   
    संबंधित आलेख:
   
  

  
    
   
  • 
    
     PWAS: मोबाइल क्रांति में आपका स्वागत है
    
   
    • 
   
  • 
    
     मोबाइल ऐप्स में एनीमेशन का उपयोग कैसे करें
    
   
    • 
   
  • 
    
     9 अद्भुत पीडब्ल्यूए रहस्य
    
   
    •

कैसे करना है - सर्वाधिक लोकप्रिय लेख

How to refine your design portfolio

कैसे करना है Sep 14, 2025

आपके पोर्टफोलियो को बैग में अगली परियोजना प्राप्त करने की कुंजी है, इसलि�..

Create animated CSS art

कैसे करना है Sep 14, 2025

(छवि क्रेडिट: टिफ़नी Choong) [1 9] सीएसएस छवियां बना..

Get started with Express.JS

कैसे करना है Sep 14, 2025

Node.js के साथ ब्राउज़र-सामना करने वाले अनुप्रयोगों क..

Create clouds with FumeFX for 3ds Max

कैसे करना है Sep 14, 2025

यह चरण-दर-चरण मार्गदर्शिका यथार्थवादी बादलों के �..

आपकी वेबसाइट के एसईओ को बढ़ावा देने के 5 तरीके

कैसे करना है Sep 14, 2025

एसईओ: यह एक गंदे काम है लेकिन किसी को यह करना है, और ..

How to emphasise the focal point of an image

कैसे करना है Sep 14, 2025

अपने तत्वों का उपयोग करना पेंसिल अंडरड्रॉलिं�..

Make a composite in Photoshop

कैसे करना है Sep 14, 2025

एडोब आज वीडियो ट्यूटोरियल की एक नई श्रृंखला लॉन्च कर रहा है जिसे इसे अब ब�..

How to make a flexible ribbon rig

कैसे करना है Sep 14, 2025

रिबन रिग काफी आम हैं 3 डी कला इन दिनों उत्पाद�..

श्रेणियाँ