முன்புற பின்புல மீட்டெடுப்பு முன்னேற்றம்: பதிவிறக்க முன்னேற்ற கண்காணிப்பு

நவீன வலை பயன்பாடுகளில், தொலை சேவையகங்களிலிருந்து தரவைப் பெறுவது ஒரு அடிப்படைத் தேவை. பெரிய கோப்புகளைப் பதிவிறக்குவது, API பதில்களைப் பெறுவது அல்லது பயன்பாட்டுத் தரவைப் புதுப்பிப்பது என எதுவாக இருந்தாலும், பயனர்கள் தடையற்ற மற்றும் தகவலறிந்த அனுபவத்தை எதிர்பார்க்கிறார்கள். இதில் முக்கியமான அம்சம் என்னவென்றால், பின்புல மீட்டெடுப்பு செயல்பாடுகளின் போது, குறிப்பாக பதிவிறக்க முன்னேற்றம் குறித்து கருத்துக்களை வழங்குவதாகும். இந்த கட்டுரை, முன்புறத்தில் பதிவிறக்க முன்னேற்றத்தைக் கண்காணிப்பதற்கான நுட்பங்களை ஆராய்கிறது, பயனர் அனுபவத்தை மேம்படுத்துகிறது மற்றும் தரவு பரிமாற்ற செயல்முறைகள் பற்றிய மதிப்புமிக்க நுண்ணறிவுகளை வழங்குகிறது.

பதிவிறக்க முன்னேற்ற கண்காணிப்பு ஏன் முக்கியமானது

பெரிய படம், ஆவணம் அல்லது முழுமையான தரவுத்தொகுப்பை பதிவிறக்குவதை கற்பனை செய்து பாருங்கள். எந்தவொரு முன்னேற்ற அறிகுறியும் இல்லாமல், பயன்பாடு வேலை செய்கிறதா, முடக்கப்பட்டதா அல்லது இணைப்பு சிக்கலை அனுபவிக்கிறதா என்று தெரியாமல் பயனர் இருளில் விடப்படுகிறார். இந்த கருத்து பற்றாக்குறை விரக்தி, கைவிடப்பட்ட பதிவிறக்கங்கள் மற்றும் எதிர்மறையான பயனர் அனுபவத்திற்கு வழிவகுக்கும். பதிவிறக்க முன்னேற்றத்தைக் கண்காணிப்பது இந்த சிக்கலை பின்வருமாறு தீர்க்கிறது:

• பயனர் அனுபவத்தை மேம்படுத்துதல்: முன்னேற்றப் பட்டைகள் அல்லது சதவீத குறிகாட்டிகள் போன்ற காட்சி குறிப்புகளை வழங்குவது, ஏதாவது நடக்கிறது என்றும், மீதமுள்ள பதிவிறக்க நேரத்தை மதிப்பிடுகிறது என்றும் பயனர்களுக்கு உறுதியளிக்கிறது.
• வெளிப்படைத்தன்மையை மேம்படுத்துதல்: பதிவிறக்கத்தின் முன்னேற்றத்தைக் காண்பிப்பது, எவ்வளவு தரவு மாற்றப்பட்டுள்ளது, எவ்வளவு மீதமுள்ளது என்பதைப் பயனர்கள் புரிந்து கொள்ள உதவுகிறது.
• பிழை கையாளுதலை எளிதாக்குதல்: முன்னேற்றத்தைக் கண்காணிப்பது, பிணைய பிழைகள் அல்லது மெதுவான இணைப்புகள் போன்ற சாத்தியமான சிக்கல்களைக் கண்டறிய டெவலப்பர்களை அனுமதிக்கிறது மற்றும் பொருத்தமான பிழை கையாளுதல் வழிமுறைகளை செயல்படுத்த அனுமதிக்கிறது. இது பயன்பாடு உடைந்ததாகத் தோன்றுவதைத் தடுக்கிறது மற்றும் மிகவும் வலுவான பிழை மீட்பு உத்திகளை செயல்படுத்துகிறது.
• உணரப்பட்ட செயல்திறனை அதிகரித்தல்: பதிவிறக்கம் நேரத்தை எடுத்துக்கொண்டாலும், முன்னேற்ற புதுப்பிப்புகள் பதிலளிக்கும் மற்றும் செயல்திறன் பற்றிய ஒரு கருத்தை உருவாக்குகின்றன, இது பயன்பாட்டை மிகவும் மெருகூட்டப்பட்டதாக உணர வைக்கிறது.

மீட்டெடுப்பு API மற்றும் முன்னேற்ற நிகழ்வுகள்

வலை உலாவிகளில் பிணைய கோரிக்கைகளை மேற்கொள்வதற்கான நவீன மற்றும் விருப்பமான முறை மீட்டெடுப்பு API ஆகும். இது தரவு மீட்டெடுப்பைக் கையாள ஒரு சக்திவாய்ந்த மற்றும் நெகிழ்வான வழியை வழங்குகிறது. துரதிர்ஷ்டவசமாக, நிலையான மீட்டெடுப்பு API, தானாகவே, பதிவிறக்க முன்னேற்ற நிகழ்வுகளுக்கு நேரடி அணுகலை வழங்காது. இருப்பினும், இதை அடைய நாம் நுட்பங்களைப் பயன்படுத்தலாம். குறிப்பாக, XMLHttpRequest (XHR) ஐப் பயன்படுத்துதல் அல்லது ஸ்ட்ரீமிங் பதில்களைப் பயன்படுத்துதல்.

முன்னேற்றத்தைக் கண்காணிப்பதற்கு XMLHttpRequest ஐப் பயன்படுத்துதல்

மீட்டெடுப்பு விருப்பமான முறையாக இருந்தாலும், XMLHttpRequest (XHR) கோரிக்கை வாழ்க்கை சுழற்சியில் அதிக விரிவான கட்டுப்பாட்டை வழங்குகிறது, இதில் முன்னேற்ற நிகழ்வுகளுக்கான அணுகலும் அடங்கும். XHR ஐப் பயன்படுத்தி பதிவிறக்க முன்னேற்றத்தைக் கண்காணிப்பதற்கான அடிப்படை எடுத்துக்காட்டு இங்கே:

            
function trackDownloadProgress(url, callback) {
  const xhr = new XMLHttpRequest();

  xhr.open('GET', url, true);

  xhr.onprogress = (event) => {
    if (event.lengthComputable) {
      const percentComplete = (event.loaded / event.total) * 100;
      callback(percentComplete);
    }
  };

  xhr.onload = () => {
    if (xhr.status === 200) {
      // Success
      callback(100);
      // Process the response
    } else {
      // Error
      callback(-1, xhr.status); // Indicate an error
    }
  };

  xhr.onerror = () => {
    callback(-1, 'Network Error'); // Indicate a network error
  };

  xhr.send();
}

// Example usage:
trackDownloadProgress('https://example.com/your-large-file.zip', (progress, error) => {
  if (error) {
    console.error('Download Error:', error);
    // Display an error message to the user
  } else {
    if (progress === -1) {
      console.error('Download Failed');
    } else {
      console.log('Download Progress:', progress.toFixed(2) + '%');
      // Update a progress bar element in your UI
    }
  }
});

            

              
                Copy
              
            
          

இந்த குறியீட்டில்:

• நாங்கள் ஒரு XMLHttpRequest பொருளை உருவாக்குகிறோம்.
• xhr.open() ஐப் பயன்படுத்தி முறை, URL மற்றும் கோரிக்கை ஒத்திசைவற்றதாக இருக்க வேண்டுமா (உண்மை) என்பதை நாங்கள் குறிப்பிடுகிறோம்.
• xhr.onprogress என்பது ஒரு நிகழ்வு கையாளுபவர், இது பதிவிறக்கம் முன்னேறும் போது அவ்வப்போது தூண்டப்படுகிறது. event.loaded இதுவரை பதிவிறக்கம் செய்யப்பட்ட தரவின் அளவைக் குறிக்கிறது, மற்றும் event.total வளத்தின் மொத்த அளவைக் குறிக்கிறது (சேவையகம் Content-Length தலைப்பை வழங்கினால்).
• (event.loaded / event.total) * 100 ஐப் பயன்படுத்தி முழுமையான சதவீதத்தை நாங்கள் கணக்கிடுகிறோம்.
• பதிவிறக்கம் முடிந்ததும் (அல்லது கோரிக்கை வெற்றிகரமாக முடிந்ததும்) xhr.onload அழைக்கப்படுகிறது. முடிவைத் தீர்மானிக்க xhr.status ஐ நாங்கள் சரிபார்க்கிறோம் (எ.கா., வெற்றிக்கு 200).
• xhr.onerror சாத்தியமான பிணையம் அல்லது இணைப்பு பிழைகளைக் கையாளுகிறது.
• UI ஐப் புதுப்பிக்க, முன்னேற்ற சதவீதத்தை callback செயல்பாட்டிற்கு அனுப்புகிறோம். முன்னேற்றத்திற்கான -1 மற்றும் காரணத்துடன் ஒரு பிழை சுட்டிக்காட்டப்படுகிறது.

குறிப்பு: சேவையகம் Content-Length தலைப்பை வழங்காவிட்டால் event.total 0 ஆக இருக்கலாம். இதுபோன்ற சந்தர்ப்பங்களில், முன்னேற்றத்தைக் கண்காணிப்பது குறைவாகவே இருக்கும், மேலும் நீங்கள் ஒரு நிச்சயமற்ற முன்னேற்ற குறிகாட்டியை மட்டுமே காட்ட முடியும் (எ.கா., சுழலும் சக்கரம்).

மீட்டெடுப்பு மற்றும் ஸ்ட்ரீமிங் பதில்களுடன் முன்னேற்றத்தைக் கண்காணித்தல்

நவீன உலாவிகள் பதிலை ஸ்ட்ரீம் செய்ய அனுமதிக்கின்றன, இது XHR நுட்பத்திற்கு ஒத்த தீர்வை வழங்குகிறது. பெரிய கோப்புகளைக் கையாளும் போது இது மிகவும் பயனுள்ளதாக இருக்கும். முக்கிய யோசனை என்னவென்றால், பதிலைப் ஸ்ட்ரீமாகப் படித்து, தரவு துண்டுகள் வரும்போது கண்காணிக்க ReadableStream ஐப் பயன்படுத்தவும்.

            
async function trackDownloadProgressFetch(url, callback) {
  try {
    const response = await fetch(url);

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const totalBytes = response.headers.get('content-length');
    let loadedBytes = 0;

    if (!response.body) {
        throw new Error('ReadableStream not yet supported');
    }

    const reader = response.body.getReader();

    while (true) {
      const { done, value } = await reader.read();

      if (done) {
        callback(100); // Download complete
        break;
      }

      loadedBytes += value.byteLength;

      let progress = 0;
      if (totalBytes) {
        progress = (loadedBytes / totalBytes) * 100;
      }

      callback(progress);
    }

  } catch (error) {
    console.error('Download error:', error);
    callback(-1, error.message); // Indicate an error
  }
}

// Example usage:
trackDownloadProgressFetch('https://example.com/your-large-file.zip', (progress, error) => {
  if (error) {
    console.error('Download Error:', error);
    // Display an error message to the user
  } else {
    if (progress === -1) {
      console.error('Download Failed');
    } else {
      console.log('Download Progress:', progress.toFixed(2) + '%');
      // Update a progress bar element in your UI
    }
  }
});

            

              
                Copy
              
            
          

இந்த குறியீடு எவ்வாறு செயல்படுகிறது என்பது இங்கே:

• கோரிக்கையைத் தொடங்க நாங்கள் fetch() ஐப் பயன்படுத்துகிறோம்.
• response.ok (200-299 வரம்பில் நிலை) உள்ளதா என சரிபார்க்கிறோம்.
• கோப்பு அளவைத் தீர்மானிக்க பதிலிலிருந்து content-length தலைப்பைப் பெறுகிறோம்.
• response.body என்பது பதில் உடலைக் குறிக்கும் ReadableStream ஆகும். இந்த ஸ்ட்ரீமுக்கு reader ஐப் பெறுகிறோம்.
• ஸ்ட்ரீமில் இருந்து தரவு துண்டுகளைப் படிக்க reader.read() ஐ மீண்டும் மீண்டும் அழைக்கிறோம்.
• ஸ்ட்ரீம் முழுமையாகப் படிக்கப்பட்டதா என்பதைக் done குறிக்கிறது. done உண்மையாக இருந்தால், பதிவிறக்கம் முடிந்தது.
• value என்பது தற்போதைய தரவுத் துண்டுகளைக் கொண்டிருக்கும் ArrayBuffer ஆகும்.
• நாங்கள் loadedBytes ஐப் புதுப்பித்து முன்னேற்றத்தைக் கணக்கிடுகிறோம்.
• UI ஐப் புதுப்பிக்க, callback செயல்பாட்டை அழைக்கிறோம்.

இந்த முறை ஒரு நவீன அணுகுமுறையை வழங்குகிறது, இது பெரிய கோப்புகளைக் கையாளும் போது சிறந்த செயல்திறனை வழங்குகிறது, ஏனெனில் நீங்கள் முழு கோப்பையும் ஒரே நேரத்தில் நினைவகத்தில் ஏற்றவில்லை.

பதிவிறக்க முன்னேற்றத்திற்கான UI ஐ செயல்படுத்துதல்

உங்களிடம் முன்னேற்றத் தரவு கிடைத்ததும், பதிவிறக்க நிலையை திறம்பட தொடர்பு கொள்ளும் பயனர் இடைமுகத்தை (UI) உருவாக்குவதே அடுத்த கட்டம். சில UI கூறுகள் மற்றும் சிறந்த நடைமுறைகள் இங்கே:

முன்னேற்றப் பட்டைகள்

பதிவிறக்க முன்னேற்றத்தைக் காட்ட முன்னேற்றப் பட்டைகள் மிகவும் பொதுவான மற்றும் உள்ளுணர்வு வழி. அவர்கள் பதிவிறக்கம் செய்யப்பட்ட தரவின் சதவீதத்தை காட்சி ரீதியாகக் குறிக்கிறார்கள். முன்னேற்றப் பட்டை பின்வருமாறு இருக்க வேண்டும்:

• முன்னேற்ற சதவீதத்தை தெளிவாகக் குறிக்கவும், எண் அல்லது காட்சி ரீதியாக.
• உங்கள் பயன்பாட்டின் வடிவமைப்புடன் பொருந்தக்கூடிய வண்ணங்கள் மற்றும் பாணிகளைப் பயன்படுத்தவும்.
• பதிவிறக்க விகிதத்தின் அடிப்படையில் மதிப்பிடப்பட்ட மீதமுள்ள நேரத்தைச் சேர்ப்பதைக் கவனியுங்கள், கிடைத்தால்.

            
<div class="progress-container">
  <div class="progress-bar" style="width: 0%;"></div>
  <span class="progress-text">0%</span>
</div>

            

              
                Copy
              
            
          

            
.progress-container {
  width: 100%;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}

.progress-bar {
  height: 20px;
  background-color: #4CAF50;
  width: 0%;
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
}

            

              
                Copy
              
            
          

            
function updateProgressBar(progress) {
  const progressBar = document.querySelector('.progress-bar');
  const progressText = document.querySelector('.progress-text');

  if (progress === -1) {
    progressBar.style.width = '100%';
    progressBar.style.backgroundColor = 'red';
    progressText.textContent = 'Error';
    return;
  }

  progressBar.style.width = progress + '%';
  progressText.textContent = progress.toFixed(0) + '%';
}

// Call updateProgressBar(progress) within your download progress callback.

            

              
                Copy
              
            
          

சுழலிகள் / நிச்சயமற்ற குறிகாட்டிகள்

மொத்த கோப்பு அளவு தெரியாதபோது (எ.கா., சேவையகம் `Content-Length` தலைப்பை வழங்கவில்லை), சுழலி அல்லது ஏற்றுதல் அனிமேஷன் போன்ற நிச்சயமற்ற முன்னேற்ற குறிகாட்டியைப் பயன்படுத்தலாம். இது சதவீதத்தை வழங்க முடியாவிட்டாலும், பதிவிறக்கம் நடந்து கொண்டிருக்கிறது என்பதை இது குறிக்கிறது.

நிலைச் செய்திகள்

பதிவிறக்க நிலையைக் குறிக்கும் உரைச் செய்திகளைக் காண்பிப்பது தெளிவையும் சூழலையும் வழங்குகிறது. இந்த செய்திகளில் பின்வருவன அடங்கும்:

• 'பதிவிறக்கம் தொடங்குகிறது...' (ஆரம்ப நிலை)
• 'பதிவிறக்கம் செய்கிறது...' (பதிவிறக்கம் செய்யும் போது)
• '50% பதிவிறக்கம் செய்யப்பட்டது...' (முன்னேற்றத்தின் போது)
• 'பதிவிறக்கம் முடிந்தது!' (வெற்றிகரமாக முடிந்ததும்)
• 'பதிவிறக்கம் தோல்வியடைந்தது. மீண்டும் முயற்சிக்கவும்.' (பிழையில்)

பிழை கையாளுதல்

வலுவான பிழை கையாளுதல் அவசியம். சாத்தியமான பிழைகளை கருணையுடன் கையாளுவதன் மூலம்:

• பயனருக்கு தகவலறிந்த பிழை செய்திகளைக் காண்பித்தல்.
• பதிவிறக்கத்தை மீண்டும் முயற்சிக்க பயனரை அனுமதித்தல்.
• பிழைகளை பிழைத்திருத்தத்திற்காக பதிவு செய்தல்.

முன்புற பதிவிறக்க முன்னேற்றத்தைக் கண்காணிப்பதற்கான சிறந்த நடைமுறைகள்

• பயனரின் பிணைய நிலைகளைக் கவனியுங்கள்: மெதுவான அல்லது நம்பகமற்ற பிணைய இணைப்புகள் நீண்ட பதிவிறக்க நேரங்களுக்கு வழிவகுக்கும். இந்த நிலைமைகளைக் கருத்தில் கொண்டு கருத்துக்களை வழங்கவும். மீதமுள்ள நேரத்தை நீங்கள் கணக்கிடலாம் (பிணைய வேகத்தைப் பொறுத்து இது தவறாக இருக்கலாம்) மேலும் 'பதிவிறக்கம் செய்கிறது... இதற்கு சில நிமிடங்கள் ஆகலாம்' போன்ற செய்தியைக் காட்டலாம்.
• புதுப்பிப்புகளை கட்டுப்படுத்தவும்: UI ஐ அடிக்கடி புதுப்பிப்பதை தவிர்க்கவும், ஏனெனில் இது செயல்திறனை பாதிக்கும். இடைவெளிகளில் (எ.கா., ஒவ்வொரு 100-200 மில்லி விநாடிகளிலும்) அல்லது முன்னேற்றம் கணிசமாக மாறும்போது மட்டுமே முன்னேற்றப் பட்டையைப் புதுப்பிக்கவும்.
• தெளிவான காட்சி கருத்துக்களை வழங்கவும்: தெளிவான மற்றும் சுருக்கமான முன்னேற்றப் பட்டை அல்லது சுழலியைப் பயன்படுத்தவும். பதிவிறக்க நிலையைப் புரிந்துகொள்வதை எளிதாக்குங்கள். உங்கள் பயன்பாட்டின் பிராண்டிங்கிற்கு ஏற்ற வண்ணங்களைப் பயன்படுத்துவதைக் கவனியுங்கள்.
• வெவ்வேறு கோப்பு வகைகளைக் கையாளவும்: உங்கள் முன்னேற்றக் கண்காணிப்பு பல்வேறு கோப்பு வகைகளை (படங்கள், ஆவணங்கள், வீடியோக்கள் போன்றவை) சரியாகக் கையாளுகிறதா என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள். கோப்பு வகைக்கு பொருத்தமான ஐகானைக் காண்பிப்பதைக் கவனியுங்கள்.
• சர்வதேசமயமாக்கல் (i18n): உலகளாவிய பார்வையாளர்களை ஆதரிக்க அனைத்து UI கூறுகளையும் (முன்னேற்றச் செய்திகள், பிழைச் செய்திகள் போன்றவை) பல மொழிகளில் மொழிபெயர்க்கவும். உங்கள் மொழிபெயர்ப்புகளை நிர்வகிக்க மொழிபெயர்ப்பு நூலகம் அல்லது சேவையைப் பயன்படுத்தவும். எடுத்துக்காட்டாக, ஒரு முன்னேற்றச் செய்தி சரியான சர்வதேசமயமாக்கலுக்காக பல்வேறு மொழிகளுக்கு மொழிபெயர்க்கப்பட வேண்டும்: "பதிவிறக்கம் செய்கிறது..."
• அணுகல்தன்மை: ஊனமுற்ற பயனர்களுக்கு உங்கள் முன்னேற்ற குறிகாட்டிகள் அணுகக்கூடியதாக இருப்பதை உறுதிப்படுத்திக் கொள்ளுங்கள். ஸ்கிரீன் ரீடர்களுக்கு சொற்பொருள் தகவல்களை வழங்க ARIA பண்புகளைப் பயன்படுத்தவும் (எ.கா., `aria-valuenow`, `aria-valuemin`, `aria-valuemax`).
• சோதனை: பல்வேறு பிணைய நிலைகளின் கீழ் (மெதுவான, வேகமான, நிலையற்ற) மற்றும் வெவ்வேறு சாதனங்களில் உங்கள் பதிவிறக்க முன்னேற்றக் கண்காணிப்பு செயல்படுத்தலை முழுமையாகச் சோதிக்கவும். அமைப்பு எதிர்பார்த்தபடி செயல்படுகிறதா என்பதை உறுதிப்படுத்த பல்வேறு கோப்பு அளவுகளுடன் சோதிக்கவும்.
• சேமிப்பு: அடிக்கடி பதிவிறக்கம் செய்யப்படும் கோப்புகளின் செயல்திறனை மேம்படுத்த சேமிப்பு உத்திகளை செயல்படுத்தவும். உலாவி சேமிப்பு மற்றும் சேவையக பக்க சேமிப்பு கோப்புகளை மீண்டும் பதிவிறக்கம் செய்ய வேண்டிய தேவையை குறைக்கலாம், இது உங்கள் பயன்பாட்டின் உணரப்பட்ட பதிலளிப்பை மேம்படுத்துகிறது.
• கோப்பு அளவு வரம்புகளைக் கவனியுங்கள்: பதிவிறக்கம் செய்ய அனுமதிக்கப்படும் கோப்புகளின் அளவைக் கவனத்தில் கொள்ளுங்கள். பெரிய கோப்புகளுக்கு, பதிவிறக்கத்தை சிறிய, நிர்வகிக்கக்கூடிய துண்டுகளாகப் பிரிப்பதைக் கவனியுங்கள், குறிப்பாக மொபைல் சாதனங்களில். அவர்களின் தரவுத் திட்டத்தை நுகரக்கூடிய மிக பெரிய கோப்பைப் பதிவிறக்கப் போவதாக இருந்தால், பயனருக்கு எச்சரிக்கைகளைக் காண்பி.
• பிழை அறிக்கை: பிழைத்திருத்தம் மற்றும் கண்காணிப்புக்கான பதிவிறக்க பிழைகளை பிடிக்க மற்றும் பதிவு செய்ய பிழை அறிக்கை வழிமுறைகளை செயல்படுத்தவும். பிழை தரவை சேகரிக்க Sentry அல்லது Rollbar போன்ற கருவிகளைப் பயன்படுத்தவும்.

மேம்பட்ட நுட்பங்கள் மற்றும் பரிசீலனைகள்

பின்னணி செயல்பாடுகளுக்கான வலை பணியாளர்கள்

முக்கிய நூலைத் தடுப்பதைத் தடுக்கவும் UI பதிலளிப்பை உறுதிப்படுத்தவும், பின்னணியில் பதிவிறக்க செயல்பாட்டைச் செய்ய வலை பணியாளர்களைப் பயன்படுத்துவதைக் கவனியுங்கள். இது உங்கள் UI ஐ சீராக வைத்திருக்கிறது மற்றும் பதிவிறக்கத்தின் போது உலாவி முடக்குவதைத் தடுக்கிறது. வலை பணியாளர் postMessage() ஐப் பயன்படுத்தி முக்கிய நூலுக்கு முன்னேற்ற புதுப்பிப்புகளைத் தெரிவிக்கலாம்.

            
// In your main script (e.g., main.js)
const worker = new Worker('download-worker.js');

worker.postMessage({ url: 'https://example.com/your-large-file.zip' });

worker.onmessage = (event) => {
  if (event.data.type === 'progress') {
    updateProgressBar(event.data.progress);
  } else if (event.data.type === 'error') {
    console.error('Download Error:', event.data.error);
    // Handle error
  } else if (event.data.type === 'complete') {
    console.log('Download Complete!');
    // Handle completion
  }
};

            

              
                Copy
              
            
          

            
// In your worker script (e.g., download-worker.js)
self.onmessage = async (event) => {
  const { url } = event.data;
  try {
    const response = await fetch(url);

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const totalBytes = response.headers.get('content-length');
    let loadedBytes = 0;

    if (!response.body) {
        throw new Error('ReadableStream not yet supported');
    }

    const reader = response.body.getReader();

    while (true) {
      const { done, value } = await reader.read();

      if (done) {
        self.postMessage({ type: 'complete' });
        break;
      }

      loadedBytes += value.byteLength;

      let progress = 0;
      if (totalBytes) {
        progress = (loadedBytes / totalBytes) * 100;
      }

      self.postMessage({ type: 'progress', progress: progress });
    }

  } catch (error) {
    self.postMessage({ type: 'error', error: error.message });
  }
};

            

              
                Copy
              
            
          

மீளக்கூடிய பதிவிறக்கங்கள்

பெரிய கோப்புகளுக்கு, மீளக்கூடிய பதிவிறக்கங்களை செயல்படுத்துவதைக் கவனியுங்கள். இது பதிவிறக்கத்தை இடைநிறுத்தி பின்னர் மீண்டும் தொடங்க பயனரை அனுமதிக்கிறது. பதிவிறக்கம் செய்ய பைட் வரம்பைக் குறிப்பிட உங்கள் HTTP கோரிக்கையில் `Range` தலைப்பைச் செயல்படுத்தவும். சேவையகம் பின்னர் கோப்பின் கோரப்பட்ட பகுதியை பதிலளிக்கிறது, மேலும் உலாவி விட்டுச் சென்ற இடத்தில் இருந்து மீண்டும் தொடங்கலாம். இது பிணைய குறுக்கீடுகளுக்கு எதிராக மீள்சக்தியை வழங்குகிறது.

துண்டுகளாக குறியாக்கம்

துண்டுகளாக குறியாக்கத்தைப் பயன்படுத்தும் போது, ​​`Content-Length` தலைப்பு இருக்காது. பயனருக்கு ஒரு நிச்சயமற்ற முன்னேற்றத்தைக் குறிக்க அல்லது ஆரம்பத்தில் அளவு தோராயமாக இருக்கும் ஒரு கலப்பின முறையைப் பயன்படுத்த நீங்கள் விரும்புவீர்கள். நேரடி வீடியோ ஊட்டத்தைப் போல, அளவு உடனடியாகத் தெரியாத ஒரு ஸ்ட்ரீமிங் சேவையைப் பயன்படுத்தும் போது இது வழக்கமாக நிகழ்கிறது.

குறுக்கு மூல வளப் பகிர்வு (CORS)

வேறு தோற்றத்திலிருந்து (டொமைன், புரோட்டோகால் அல்லது போர்ட்) வளங்களைப் பதிவிறக்கும்போது, ​​சேவையகம் CORS ஐ ஆதரிக்கிறதா என்பதை உறுதிப்படுத்தவும். குறுக்கு மூல கோரிக்கைகளை அனுமதிக்க சேவையகம் அதன் பதிலில் `Access-Control-Allow-Origin` தலைப்பை சேர்க்க வேண்டும். இல்லையெனில், உங்கள் பதிவிறக்க கோரிக்கைகள் உலாவியால் தடுக்கப்படலாம்.

உலாவி இணக்கத்தன்மை

உங்கள் செயல்படுத்தல் வெவ்வேறு உலாவிகள் மற்றும் சாதனங்களில் வேலை செய்வதை உறுதிப்படுத்திக் கொள்ளுங்கள். Chrome, Firefox, Safari, Edge மற்றும் மொபைல் சாதனங்களில் (iOS மற்றும் Android) போன்ற பிரபலமான உலாவிகளில் உங்கள் பதிவிறக்க முன்னேற்றக் கண்காணிப்பைச் சோதிக்கவும். அனைத்து அம்சங்களையும் முழுமையாக ஆதரிக்காத பழைய உலாவிகளை ஆதரிக்க பாலிஃபில்ஸ் அல்லது அம்சம் கண்டறிதலைப் பயன்படுத்துவதைக் கவனியுங்கள்.

உண்மையான உலக எடுத்துக்காட்டுகள்

பதிவிறக்க முன்னேற்ற கண்காணிப்பு எவ்வாறு திறம்பட பயன்படுத்தப்படுகிறது என்பதற்கான சில உண்மையான உலக எடுத்துக்காட்டுகளைப் பார்ப்போம்:

• கோப்பு பகிர்வு தளங்கள்: Google Drive, Dropbox மற்றும் WeTransfer போன்ற தளங்கள் கோப்பு பதிவேற்றங்கள் மற்றும் பதிவிறக்கங்களின் முன்னேற்றத்தைக் காட்ட முன்னேற்றப் பட்டைகளைப் பயன்படுத்துகின்றன. அவர்கள் பெரும்பாலும் மீதமுள்ள நேரம் மற்றும் மென்மையான பயனர் அனுபவத்திற்கான பிழை கையாளுதலை வழங்குகிறார்கள்.
• மென்பொருள் பதிவிறக்க தளங்கள்: பல மென்பொருள் பதிவிறக்க வலைத்தளங்கள் பதிவிறக்க செயல்பாட்டின் போது முன்னேற்றப் பட்டைகளைக் காட்டுகின்றன. இந்தப் பட்டைகள் பதிவிறக்கத்தின் முன்னேற்றம் குறித்து பயனர்களுக்குத் தெரிவிக்க உதவுகின்றன மற்றும் முடிக்க எடுக்கும் நேரத்தை மதிப்பிடுகின்றன. அதிகாரப்பூர்வ மொஸில்லா பயர்பாக்ஸ் பதிவிறக்க தளம் போன்ற தளங்கள் முன்னேற்றப் பட்டைகளைப் பயன்படுத்துகின்றன.
• ஆன்லைன் கற்றல் தளங்கள்: வீடியோ அல்லது ஆவண அடிப்படையிலான உள்ளடக்கத்தை வழங்கும் ஆன்லைன் கற்றல் தளங்கள் கல்விப் பொருட்களின் பதிவிறக்க நிலையைக் காட்ட முன்னேற்றக் கண்காணிப்பைப் பயன்படுத்துகின்றன.
• ஸ்ட்ரீமிங் சேவைகள்: ஸ்ட்ரீமிங் சேவைகள் சில நேரங்களில் உள்ளடக்கத்தின் முன் மீட்டெடுப்பு அல்லது சேமிப்பகத்திற்கான முன்னேற்றத்தைக் காட்டுகின்றன. இது பின்னணி செயல்திறனை மேம்படுத்துகிறது.
• இ-காமர்ஸ் இணையதளங்கள்: தயாரிப்பு படங்கள் அல்லது பிற சொத்துக்களைப் பதிவிறக்கும் போது இ-காமர்ஸ் தளங்கள் முன்னேற்றக் கண்காணிப்பைப் பயன்படுத்துகின்றன.

முடிவுரை

ஒரு நேர்மறையான மற்றும் தகவலறிந்த பயனர் அனுபவத்தை உருவாக்க முன்புறத்தில் பதிவிறக்க முன்னேற்றத்தைக் கண்காணிப்பது அவசியம். காட்சி கருத்துக்களை வழங்குவதன் மூலமும், பிழைகளை நிர்வகிப்பதன் மூலமும், சர்வதேசமயமாக்கல் மற்றும் அணுகல்தன்மையைக் கருத்தில் கொள்வதன் மூலமும், நீங்கள் மிகவும் பயனர் நட்பு மற்றும் நம்பகமான வலை பயன்பாடுகளை உருவாக்க முடியும். மீட்டெடுப்பு API அல்லது XMLHttpRequest ஐப் பயன்படுத்துதல், பொருத்தமான UI கூறுகள் மற்றும் சிறந்த நடைமுறைகளுடன் சேர்ந்து, பின்புல மீட்டெடுப்பு செயல்பாடுகளின் போது டெவலப்பர்கள் முக்கியமான கருத்துக்களை வழங்க உதவுகிறது, இது உலகெங்கிலும் உள்ள பயனர்களுக்கு மென்மையான மற்றும் அதிக ஈடுபாடு அனுபவத்தை உறுதி செய்கிறது. உங்கள் செயல்படுத்தலை வடிவமைக்கும்போது வெவ்வேறு பிணைய நிலைகள், கோப்பு வகைகள் மற்றும் உலாவி இணக்கத்தன்மையைக் கருத்தில் கொள்ள நினைவில் கொள்ளுங்கள்.