फ़ेच एपीआई एडवांस्ड: रिक्वेस्ट इंटरसेप्शन और रिस्पांस कैशिंग

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

फ़ेच एपीआई को समझना

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

बेसिक फ़ेच उपयोग

एक साधारण फ़ेच अनुरोध इस तरह दिखता है:

            
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log('Data:', data);
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });

            

              
                Copy
              
            
          

यह कोड निर्दिष्ट यूआरएल से डेटा प्राप्त करता है, HTTP त्रुटियों की जांच करता है, प्रतिक्रिया को JSON के रूप में पार्स करता है, और डेटा को कंसोल में लॉग करता है। एक मजबूत एप्लिकेशन सुनिश्चित करने के लिए त्रुटि प्रबंधन महत्वपूर्ण है।

रिक्वेस्ट इंटरसेप्शन

रिक्वेस्ट इंटरसेप्शन में सर्वर पर भेजे जाने से पहले नेटवर्क अनुरोधों को संशोधित करना या उनका निरीक्षण करना शामिल है। यह विभिन्न उद्देश्यों के लिए उपयोगी हो सकता है, जिनमें शामिल हैं:

• प्रमाणीकरण हेडर जोड़ना
• अनुरोध डेटा को बदलना
• डीबगिंग के लिए अनुरोधों को लॉग करना
• विकास के दौरान एपीआई प्रतिक्रियाओं का मॉक करना

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

सर्विस वर्कर्स: इंटरसेप्शन का आधार

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

            
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(registration => {
      console.log('Service Worker registered with scope:', registration.scope);
    })
    .catch(error => {
      console.error('Service Worker registration failed:', error);
    });
}

            

              
                Copy
              
            
          

यह कोड जांचता है कि ब्राउज़र सर्विस वर्कर्स का समर्थन करता है या नहीं और service-worker.js फ़ाइल को पंजीकृत करता है। स्कोप यह परिभाषित करता है कि सर्विस वर्कर किन यूआरएल को नियंत्रित करेगा।

रिक्वेस्ट इंटरसेप्शन को लागू करना

service-worker.js फ़ाइल के अंदर, आप fetch इवेंट का उपयोग करके अनुरोधों को इंटरसेप्ट कर सकते हैं:

            
self.addEventListener('fetch', event => {
  // Intercept all fetch requests
  event.respondWith(
    new Promise(resolve => {
      // Clone the request to avoid modifying the original
      const req = event.request.clone();

      // Modify the request (e.g., add an authentication header)
      const headers = new Headers(req.headers);
      headers.append('Authorization', 'Bearer your_api_key');

      const modifiedReq = new Request(req.url, {
        method: req.method,
        headers: headers,
        body: req.body,
        mode: 'cors',
        credentials: req.credentials,
        cache: req.cache,
        redirect: req.redirect,
        referrer: req.referrer,
        integrity: req.integrity
      });

      // Make the modified request
      fetch(modifiedReq)
        .then(response => resolve(response))
        .catch(error => {
          console.error('Fetch error in Service Worker:', error);
          // Optionally, return a default response or error page
          resolve(new Response('Offline', { status: 503, statusText: 'Service Unavailable' }));
        });
    })
  );
});

            

              
                Copy
              
            
          

यह कोड हर fetch अनुरोध को इंटरसेप्ट करता है, उसे क्लोन करता है, एक Authorization हेडर जोड़ता है, और फिर संशोधित अनुरोध करता है। event.respondWith() विधि ब्राउज़र को बताती है कि अनुरोध को कैसे संभालना है। अनुरोध को क्लोन करना महत्वपूर्ण है; अन्यथा, आप मूल अनुरोध को संशोधित कर रहे होंगे, जिससे अप्रत्याशित व्यवहार हो सकता है। यह संगतता सुनिश्चित करने के लिए सभी मूल अनुरोध विकल्पों को अग्रेषित करना भी सुनिश्चित करता है। त्रुटि प्रबंधन पर ध्यान दें: फ़ेच विफल होने की स्थिति में फ़ॉलबैक प्रदान करना महत्वपूर्ण है (उदाहरण के लिए, ऑफ़लाइन होने पर)।

उदाहरण: प्रमाणीकरण हेडर जोड़ना

रिक्वेस्ट इंटरसेप्शन का एक सामान्य उपयोग एपीआई अनुरोधों में प्रमाणीकरण हेडर जोड़ना है। यह सुनिश्चित करता है कि केवल अधिकृत उपयोगकर्ता ही सुरक्षित संसाधनों तक पहुंच सकते हैं।

            
self.addEventListener('fetch', event => {
  if (event.request.url.startsWith('https://api.example.com')) {
    event.respondWith(
      new Promise(resolve => {
        const req = event.request.clone();
        const headers = new Headers(req.headers);
        // Replace with actual authentication logic (e.g., retrieving token from local storage)
        const token = localStorage.getItem('api_token'); 

        if (token) {
          headers.append('Authorization', `Bearer ${token}`);
        } else {
           console.warn("No API token found, request may fail.");
        }

        const modifiedReq = new Request(req.url, {
          method: req.method,
          headers: headers,
          body: req.body,
          mode: 'cors',
          credentials: req.credentials,
          cache: req.cache,
          redirect: req.redirect,
          referrer: req.referrer,
          integrity: req.integrity
        });

        fetch(modifiedReq)
          .then(response => resolve(response))
          .catch(error => {
            console.error('Fetch error in Service Worker:', error);
            resolve(new Response('Offline', { status: 503, statusText: 'Service Unavailable' }));
          });
      })
    );
  } else {
    // Let the browser handle the request as usual
    event.respondWith(fetch(event.request));
  }
});

            

              
                Copy
              
            
          

यह कोड उन अनुरोधों में एक Authorization हेडर जोड़ता है जो https://api.example.com से शुरू होते हैं। यह लोकल स्टोरेज से एपीआई टोकन प्राप्त करता है। उचित टोकन प्रबंधन और सुरक्षा उपायों को लागू करना महत्वपूर्ण है, जैसे कि HTTPS और सुरक्षित स्टोरेज।

उदाहरण: अनुरोध डेटा को बदलना

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

            
self.addEventListener('fetch', event => {
  if (event.request.url.includes('/submit-form')) {
    event.respondWith(
      new Promise(resolve => {
        const req = event.request.clone();
        req.text().then(body => {
          try {
            const parsedBody = JSON.parse(body);
            // Transform the data (e.g., add a timestamp)
            parsedBody.timestamp = new Date().toISOString();

            // Convert the transformed data back to JSON
            const transformedBody = JSON.stringify(parsedBody);

            const modifiedReq = new Request(req.url, {
              method: req.method,
              headers: req.headers,
              body: transformedBody,
              mode: 'cors',
              credentials: req.credentials,
              cache: req.cache,
              redirect: req.redirect,
              referrer: req.referrer,
              integrity: req.integrity
            });

            fetch(modifiedReq)
              .then(response => resolve(response))
              .catch(error => {
                console.error('Fetch error in Service Worker:', error);
                resolve(new Response('Offline', { status: 503, statusText: 'Service Unavailable' }));
              });
          } catch (error) {
            console.error("Error parsing request body:", error);
            resolve(fetch(event.request)); // Fallback to original request
          }
        });
      })
    );
  } else {
    event.respondWith(fetch(event.request));
  }
});

            

              
                Copy
              
            
          

यह कोड /submit-form पर किए गए अनुरोधों को इंटरसेप्ट करता है, अनुरोध के बॉडी को JSON के रूप में पार्स करता है, एक टाइमस्टैम्प जोड़ता है, और फिर बदले हुए डेटा को सर्वर पर भेजता है। त्रुटि प्रबंधन यह सुनिश्चित करने के लिए आवश्यक है कि यदि अनुरोध का बॉडी वैध JSON नहीं है तो एप्लिकेशन खराब न हो।

रिस्पांस कैशिंग

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

रिस्पांस कैशिंग के लाभ

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

सर्विस वर्कर्स के साथ रिस्पांस कैशिंग लागू करना

सर्विस वर्कर्स रिस्पांस कैशिंग को लागू करने के लिए एक शक्तिशाली तंत्र प्रदान करते हैं। आप प्रतिक्रियाओं को संग्रहीत करने और पुनः प्राप्त करने के लिए Cache API का उपयोग कर सकते हैं।

            
const cacheName = 'my-app-cache-v1';
const cacheableUrls = [
  '/',
  '/index.html',
  '/styles.css',
  '/script.js',
  'https://api.example.com/data'
];

// Install event:  Cache static assets
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(cacheName)
      .then(cache => {
        console.log('Caching app shell');
        return cache.addAll(cacheableUrls);
      })
  );
});

// Activate event: Clean up old caches
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.filter(name => name !== cacheName)
          .map(name => caches.delete(name))
      );
    })
  );
});

// Fetch event: Serve cached responses or fetch from the network
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        // Cache hit - return response
        if (response) {
          return response;
        }

        // Not in cache - fetch from network
        return fetch(event.request).then(
          response => {
            // Check if we received a valid response
            if (!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // Clone the response (because it's a stream and can only be consumed once)
            const responseToCache = response.clone();

            caches.open(cacheName)
              .then(cache => {
                cache.put(event.request, responseToCache);
              });

            return response;
          }
        ).catch(error => {
          // Handle network error
          console.error("Fetch failed:", error);
          // Optionally, provide a fallback response (e.g., offline page)
          return caches.match('/offline.html');
        });
      })
  );
});

            

              
                Copy
              
            
          

यह कोड इंस्टॉलेशन इवेंट के दौरान स्थिर संपत्तियों को कैश करता है और फ़ेच इवेंट के दौरान कैश्ड प्रतिक्रियाओं को परोसता है। यदि कैश में कोई प्रतिक्रिया नहीं मिलती है, तो यह उसे नेटवर्क से प्राप्त करता है, उसे कैश करता है, और फिर उसे लौटाता है। activate इवेंट का उपयोग पुराने कैश को साफ करने के लिए किया जाता है जब सर्विस वर्कर अपडेट होता है। यह दृष्टिकोण यह भी सुनिश्चित करता है कि केवल वैध प्रतिक्रियाएं (स्टेटस 200 और प्रकार 'बेसिक') ही कैश की जाएं।

कैश रणनीतियाँ

आपकी एप्लिकेशन की ज़रूरतों के आधार पर आप कई अलग-अलग कैश रणनीतियों का उपयोग कर सकते हैं:

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

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

उदाहरण: एपीआई प्रतिक्रियाओं को कैश करना

यहां कैश-फर्स्ट रणनीति का उपयोग करके एपीआई प्रतिक्रियाओं को कैश करने का एक उदाहरण है:

            
self.addEventListener('fetch', event => {
  if (event.request.url.startsWith('https://api.example.com')) {
    event.respondWith(
      caches.match(event.request)
        .then(response => {
          // Cache hit - return response
          if (response) {
            return response;
          }

          // Not in cache - fetch from network
          return fetch(event.request).then(
            response => {
              // Check if we received a valid response
              if (!response || response.status !== 200 || response.type !== 'basic') {
                return response;
              }

              // Clone the response (because it's a stream and can only be consumed once)
              const responseToCache = response.clone();

              caches.open(cacheName)
                .then(cache => {
                  cache.put(event.request, responseToCache);
                });

              return response;
            }
          );
        })
    );
  } else {
    // Let the browser handle the request as usual
    event.respondWith(fetch(event.request));
  }
});

            

              
                Copy
              
            
          

यह कोड https://api.example.com से एपीआई प्रतिक्रियाओं को कैश करता है। जब कोई अनुरोध किया जाता है, तो सर्विस वर्कर पहले जांचता है कि प्रतिक्रिया पहले से कैश में है या नहीं। यदि है, तो कैश्ड प्रतिक्रिया लौटाई जाती है। यदि नहीं, तो अनुरोध नेटवर्क पर किया जाता है, और प्रतिक्रिया को लौटाए जाने से पहले कैश किया जाता है।

उन्नत विचार

कैश इनवैलिडेशन

कैशिंग के साथ सबसे बड़ी चुनौतियों में से एक कैश इनवैलिडेशन है। जब सर्वर पर डेटा बदलता है, तो आपको यह सुनिश्चित करना होगा कि कैश अपडेट हो। कैश इनवैलिडेशन के लिए कई रणनीतियाँ हैं:

• कैश बस्टिंग: संसाधन के यूआरएल में एक संस्करण संख्या या टाइमस्टैम्प जोड़ें। जब संसाधन बदलता है, तो यूआरएल बदल जाता है, और ब्राउज़र नया संस्करण प्राप्त करेगा।
• समय-आधारित समाप्ति: कैश्ड प्रतिक्रियाओं के लिए अधिकतम आयु निर्धारित करें। समाप्ति समय के बाद, ब्राउज़र सर्वर से एक नया संस्करण प्राप्त करेगा। अधिकतम आयु निर्दिष्ट करने के लिए Cache-Control हेडर का उपयोग करें।
• मैनुअल इनवैलिडेशन: कैश्ड प्रतिक्रियाओं को मैन्युअल रूप से हटाने के लिए caches.delete() विधि का उपयोग करें। यह सर्वर-साइड इवेंट या उपयोगकर्ता क्रिया द्वारा ट्रिगर किया जा सकता है।
• वास्तविक समय अपडेट के लिए वेबसॉकेट: सर्वर से क्लाइंट तक अपडेट पुश करने के लिए वेबसॉकेट का उपयोग करें, जब आवश्यक हो तो कैश को अमान्य करें।

कंटेंट डिलीवरी नेटवर्क (CDNs)

कंटेंट डिलीवरी नेटवर्क (CDNs) सर्वरों के वितरित नेटवर्क हैं जो सामग्री को उपयोगकर्ताओं के करीब कैश करते हैं। सीडीएन का उपयोग करने से दुनिया भर के उपयोगकर्ताओं के लिए विलंबता और बैंडविड्थ की खपत को कम करके प्रदर्शन में काफी सुधार हो सकता है। लोकप्रिय सीडीएन प्रदाताओं में क्लाउडफ्लेयर, अमेज़ॅन क्लाउडफ्रंट और अकामाई शामिल हैं। सीडीएन के साथ एकीकृत करते समय, सुनिश्चित करें कि Cache-Control हेडर सर्वोत्तम कैशिंग व्यवहार के लिए सही ढंग से कॉन्फ़िगर किए गए हैं।

सुरक्षा संबंधी विचार

रिक्वेस्ट इंटरसेप्शन और रिस्पांस कैशिंग को लागू करते समय, सुरक्षा निहितार्थों पर विचार करना आवश्यक है:

• HTTPS: पारगमन में डेटा की सुरक्षा के लिए हमेशा HTTPS का उपयोग करें।
• CORS: संसाधनों तक अनधिकृत पहुंच को रोकने के लिए क्रॉस-ओरिजिन रिसोर्स शेयरिंग (CORS) को ठीक से कॉन्फ़िगर करें।
• डेटा सैनिटाइजेशन: क्रॉस-साइट स्क्रिप्टिंग (XSS) हमलों को रोकने के लिए उपयोगकर्ता इनपुट को सैनिटाइज करें।
• सुरक्षित स्टोरेज: एपीआई कुंजी और टोकन जैसे संवेदनशील डेटा को सुरक्षित रूप से संग्रहीत करें (उदाहरण के लिए, HTTPS-ओनली कुकीज़ या एक सुरक्षित स्टोरेज एपीआई का उपयोग करके)।
• सबरिसोर्स इंटीग्रिटी (SRI): यह सुनिश्चित करने के लिए SRI का उपयोग करें कि तीसरे पक्ष के सीडीएन से प्राप्त संसाधनों के साथ छेड़छाड़ नहीं की गई है।

सर्विस वर्कर्स की डीबगिंग

सर्विस वर्कर्स की डीबगिंग चुनौतीपूर्ण हो सकती है, लेकिन ब्राउज़र के डेवलपर टूल मदद के लिए कई सुविधाएँ प्रदान करते हैं:

• एप्लिकेशन टैब: क्रोम डेवटूल्स में एप्लिकेशन टैब सर्विस वर्कर्स के बारे में जानकारी प्रदान करता है, जिसमें उनकी स्थिति, स्कोप और कैश स्टोरेज शामिल है।
• कंसोल लॉगिंग: सर्विस वर्कर गतिविधि के बारे में जानकारी लॉग करने के लिए console.log() स्टेटमेंट का उपयोग करें।
• ब्रेकप्वाइंट: निष्पादन के माध्यम से कदम उठाने और चर का निरीक्षण करने के लिए सर्विस वर्कर कोड में ब्रेकप्वाइंट सेट करें।
• अपडेट ऑन रीलोड: यह सुनिश्चित करने के लिए कि हर बार जब आप पृष्ठ को रीलोड करते हैं तो सर्विस वर्कर अपडेट हो जाता है, एप्लिकेशन टैब में "अपडेट ऑन रीलोड" को सक्षम करें।
• अनरिजिस्टर सर्विस वर्कर: सर्विस वर्कर को अनरिजिस्टर करने के लिए एप्लिकेशन टैब में "अनरिजिस्टर" बटन का उपयोग करें। यह समस्याओं का निवारण करने या एक साफ स्लेट से शुरू करने के लिए उपयोगी हो सकता है।

निष्कर्ष

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

इन उन्नत फ़ेच एपीआई तकनीकों में महारत हासिल करके, आप अपने वेब विकास कौशल को अगले स्तर पर ले जा सकते हैं और वास्तव में असाधारण वेब एप्लिकेशन बना सकते हैं।