உலகளாவிய வலைப் பயன்பாடுகளில், Fetch API-யின் மேம்பட்ட அம்சங்களான கோரிக்கை இடைமறித்தல் மற்றும் மறுமொழி தேக்குதல் மூலம் செயல்திறனை மேம்படுத்துங்கள்.
Fetch API மேம்பட்டது: உலகளாவிய வலைப் பயன்பாடுகளுக்கான கோரிக்கை இடைமறித்தல் மற்றும் மறுமொழி தேக்குதல் ஒப்பீடு
தொடர்ந்து மாறிவரும் வலை மேம்பாட்டு உலகில், செயல்திறன் மற்றும் பதிலளிப்புத் தன்மை மிக முக்கியமானவை. உலகளாவிய பார்வையாளர்களுக்கு, நெட்வொர்க் தாமதம் மற்றும் இணைப்பு நிலைத்தன்மை வியத்தகு முறையில் மாறுபடும் என்பதால், நமது பயன்பாடுகள் தரவை எவ்வாறு பெற்று கையாளுகின்றன என்பதை மேம்படுத்துவது ஒரு சிறந்த நடைமுறை மட்டுமல்ல - இது ஒரு தேவையாகும். Fetch API, ஜாவாஸ்கிரிப்டில் நெட்வொர்க் கோரிக்கைகளைச் செய்வதற்கான ஒரு நவீன தரநிலை, இது எளிய GET மற்றும் POST கோரிக்கைகளுக்கு அப்பாற்பட்ட சக்திவாய்ந்த திறன்களை வழங்குகிறது. இந்த மேம்பட்ட அம்சங்களில், கோரிக்கை இடைமறித்தல் மற்றும் மறுமொழி தேக்குதல் ஆகியவை வலுவான மற்றும் திறமையான உலகளாவிய வலைப் பயன்பாடுகளை உருவாக்குவதற்கான முக்கிய நுட்பங்களாக தனித்து நிற்கின்றன.
இந்த இடுகை Fetch API-ஐப் பயன்படுத்தி கோரிக்கை இடைமறித்தல் மற்றும் மறுமொழி தேக்குதல் இரண்டையும் ஆழமாக ஆராயும். அவற்றின் அடிப்படைக் கருத்துக்கள், நடைமுறைச் செயலாக்க உத்திகள் மற்றும் உலகெங்கிலும் உள்ள பயனர்களுக்கு ஒரு சிறந்த பயனர் அனுபவத்தை உருவாக்க அவை எவ்வாறு ஒருங்கிணைந்து பயன்படுத்தப்படலாம் என்பதை நாங்கள் ஆராய்வோம். இந்த வடிவங்களைச் செயல்படுத்தும்போது சர்வதேசமயமாக்கல் மற்றும் உள்ளூர்மயமாக்கலுக்கான கருத்தில் கொள்ள வேண்டியவற்றையும் நாங்கள் விவாதிப்போம்.
முக்கிய கருத்துக்களைப் புரிந்துகொள்ளுதல்
நாம் பிரத்யேகமாக ஆராய்வதற்கு முன்பு, Fetch API சூழலில் கோரிக்கை இடைமறித்தல் மற்றும் மறுமொழி தேக்குதல் என்றால் என்ன என்பதைத் தெளிவுபடுத்துவோம்.
கோரிக்கை இடைமறித்தல்
கோரிக்கை இடைமறித்தல் என்பது உங்கள் ஜாவாஸ்கிரிப்ட் குறியீட்டால் செய்யப்படும் வெளிச்செல்லும் நெட்வொர்க் கோரிக்கைகளை சேவையகத்திற்கு அனுப்பப்படுவதற்கு முன்பு இடைமறிக்கும் திறனைக் குறிக்கிறது. இது உங்களை அனுமதிக்கிறது:
- கோரிக்கைகளை மாற்றுதல்: தனிப்பயன் தலைப்புகளைச் சேர்ப்பது (எ.கா., அங்கீகார டோக்கன்கள், API பதிப்பாக்கம்), கோரிக்கை அமைப்பை மாற்றுவது, URL-ஐ மாற்றுவது அல்லது சில நிபந்தனைகளின் கீழ் ஒரு கோரிக்கையை ரத்து செய்வது.
- கோரிக்கைகளைப் பதிவு செய்தல்: பிழைத்திருத்தம் அல்லது பகுப்பாய்வு நோக்கங்களுக்காக நெட்வொர்க் செயல்பாட்டைக் கண்காணித்தல்.
- போலிக் கோரிக்கைகள்: நேரடி பின்தளம் தேவையில்லாமல் மேம்பாடு அல்லது சோதனையின் போது சேவையக பதில்களை உருவகப்படுத்துதல்.
Fetch API தானாகவே சில மூன்றாம் தரப்பு நூலகங்கள் அல்லது பழைய XMLHttpRequest (XHR) இடைமறிப்புகள் செயல்பட்டது போல் கோரிக்கைகளை இடைமறிக்க நேரடி, உள்ளமைக்கப்பட்ட பொறிமுறையை வழங்கவில்லை என்றாலும், அதன் நெகிழ்வுத்தன்மை வலுவான இடைமறிப்பு முறைகளை உருவாக்க அனுமதிக்கிறது, குறிப்பாக சர்வீஸ் வொர்க்கர்கள் மூலம்.
மறுமொழி தேக்குதல்
மறுமொழி தேக்குதல், மறுபுறம், நெட்வொர்க் கோரிக்கைகளின் முடிவுகளை கிளையன்ட் பக்கத்தில் உள்நாட்டில் சேமிப்பதை உள்ளடக்குகிறது. அதே ஆதாரத்திற்கு அடுத்தடுத்த கோரிக்கை செய்யப்படும்போது, ஒரு புதிய நெட்வொர்க் அழைப்பைச் செய்வதற்குப் பதிலாக தேக்கப்பட்ட மறுமொழியை வழங்க முடியும். இது குறிப்பிடத்தக்க மேம்பாடுகளுக்கு வழிவகுக்கிறது:
- செயல்திறன்: வேகமான தரவு மீட்டெடுப்பு ஏற்றுதல் நேரத்தைக் குறைத்து, உணரப்பட்ட பதிலளிப்புத்தன்மையை மேம்படுத்துகிறது.
- ஆஃப்லைன் ஆதரவு: பயனர்கள் தங்களது இணைய இணைப்பு இல்லாதபோது அல்லது நிலையற்றதாக இருக்கும்போது முன்னர் பெற்ற தரவை அணுகலாம்.
- குறைக்கப்பட்ட சேவையக சுமை: சேவையகத்திற்கு குறைவான போக்குவரத்து என்பது குறைந்த உள்கட்டமைப்பு செலவுகள் மற்றும் சிறந்த அளவிடுதல் என்பதாகும்.
Fetch API உலாவி தேக்குதல் பொறிமுறைகளுடன் தடையின்றி செயல்படுகிறது மற்றும் சர்வீஸ் வொர்க்கர்கள் அல்லது localStorage அல்லது IndexedDB போன்ற உலாவி சேமிப்பக API-கள் வழியாக செயல்படுத்தப்படும் தனிப்பயன் தேக்குதல் உத்திகளுடன் மேலும் மேம்படுத்தப்படலாம்.
சர்வீஸ் வொர்க்கர்கள் மூலம் கோரிக்கை இடைமறித்தல்
சர்வீஸ் வொர்க்கர்கள் Fetch API உடன் மேம்பட்ட கோரிக்கை இடைமறிப்பு முறைகளைச் செயல்படுத்துவதற்கான அடித்தளமாக உள்ளன. ஒரு சர்வீஸ் வொர்க்கர் என்பது உங்கள் வலைப்பக்கத்திலிருந்து தனியாக பின்னணியில் இயங்கும் ஒரு ஜாவாஸ்கிரிப்ட் கோப்பு, இது உலாவி மற்றும் நெட்வொர்க்கிற்கு இடையில் ஒரு நிரல்படுத்தக்கூடிய நெட்வொர்க் ப்ராக்ஸியாக செயல்படுகிறது.
சர்வீஸ் வொர்க்கர் என்றால் என்ன?
ஒரு சர்வீஸ் வொர்க்கர் நிகழ்வுகளைக் கேட்பதற்காக தன்னை பதிவுசெய்கிறது, அவற்றில் மிக முக்கியமானது fetch நிகழ்வு. சர்வீஸ் வொர்க்கர் கட்டுப்படுத்தும் பக்கத்திலிருந்து ஒரு நெட்வொர்க் கோரிக்கை செய்யப்படும்போது, சர்வீஸ் வொர்க்கர் ஒரு fetch நிகழ்வைப் பெறுகிறது, பின்னர் அது எவ்வாறு பதிலளிக்க வேண்டும் என்பதைத் தீர்மானிக்க முடியும்.
ஒரு சர்வீஸ் வொர்க்கரை பதிவு செய்தல்
முதல் படி உங்கள் சர்வீஸ் வொர்க்கரை பதிவு செய்வதாகும். இது பொதுவாக உங்கள் பிரதான ஜாவாஸ்கிரிப்ட் கோப்பில் செய்யப்படுகிறது:
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(function(registration) {
console.log('Service Worker registered with scope:', registration.scope);
})
.catch(function(error) {
console.error('Service Worker registration failed:', error);
});
}
/sw.js என்ற பாதை உங்கள் சர்வீஸ் வொர்க்கர் ஸ்கிரிப்ட்டைக் குறிக்கிறது.
சர்வீஸ் வொர்க்கர் ஸ்கிரிப்ட் (sw.js)
உங்கள் sw.js கோப்பிற்குள், நீங்கள் fetch நிகழ்வைக் கேட்பீர்கள்:
self.addEventListener('fetch', function(event) {
// Intercepted request logic goes here
});
கோரிக்கை இடைமறிப்பு தர்க்கத்தை செயல்படுத்துதல்
fetch நிகழ்வு கேட்பானுக்குள், event.request உள்வரும் கோரிக்கை பொருளுக்கான அணுகலை வழங்குகிறது. இதை நீங்கள் பயன்படுத்தலாம்:
1. கோரிக்கை தலைப்புகளை மாற்றுதல்
ஒரு குறிப்பிட்ட API இறுதிப்புள்ளிக்கு ஒவ்வொரு வெளிச்செல்லும் கோரிக்கைக்கும் ஒரு API விசையைச் சேர்க்க வேண்டும் என்று வைத்துக்கொள்வோம். நீங்கள் கோரிக்கையை இடைமறித்து, சேர்க்கப்பட்ட தலைப்புடன் ஒரு புதிய ஒன்றை உருவாக்கி, பின்னர் தொடரலாம்:
self.addEventListener('fetch', function(event) {
const url = new URL(event.request.url);
const apiKey = 'YOUR_GLOBAL_API_KEY'; // Load from a secure source or config
if (url.origin === 'https://api.example.com') {
// Clone the request so we can modify it
const modifiedRequest = new Request(event.request, {
headers: {
'X-API-Key': apiKey,
// You can also merge existing headers:
// ...Object.fromEntries(event.request.headers.entries()),
// 'X-Custom-Header': 'value'
}
});
// Respond with the modified request
event.respondWith(fetch(modifiedRequest));
} else {
// For other requests, proceed as normal
event.respondWith(fetch(event.request));
}
});
உலகளாவிய கருத்தில் கொள்ள வேண்டியவை: உலகளாவிய பயன்பாடுகளுக்கு, API விசைகள் பிராந்தியத்திற்குரியதாக இருக்க வேண்டும் அல்லது புவியியல் ரூட்டிங்கை கையாளும் ஒரு மைய அங்கீகார சேவை மூலம் நிர்வகிக்கப்பட வேண்டும். உங்கள் இடைமறிப்பு தர்க்கம் பயனரின் பிராந்தியத்திற்கு பொருத்தமான விசையை சரியாகப் பெற்று அல்லது பயன்படுத்துகிறது என்பதை உறுதிப்படுத்தவும்.
2. கோரிக்கைகளைத் திசை திருப்புதல்
பயனரின் இருப்பிடம் அல்லது A/B சோதனை உத்தியின் அடிப்படையில் நீங்கள் கோரிக்கைகளை வேறு சேவையகத்திற்குத் திசை திருப்ப விரும்பலாம்.
self.addEventListener('fetch', function(event) {
const url = new URL(event.request.url);
const userLocation = getUserLocation(); // Placeholder for location logic
if (url.pathname === '/api/data') {
let targetUrl = url.toString();
if (userLocation === 'europe') {
targetUrl = 'https://api.europe.example.com/data';
} else if (userLocation === 'asia') {
targetUrl = 'https://api.asia.example.com/data';
}
// Clone and redirect
const redirectedRequest = new Request(targetUrl, {
method: event.request.method,
headers: event.request.headers,
body: event.request.body,
mode: 'cors'
});
event.respondWith(fetch(redirectedRequest));
} else {
event.respondWith(fetch(event.request));
}
});
function getUserLocation() {
// In a real app, this would involve GeoIP lookup, user settings, or browser geolocation API.
// For demonstration, let's assume a simple logic.
return 'asia'; // Example
}
உலகளாவிய கருத்தில் கொள்ள வேண்டியவை: உலகளாவிய பயன்பாடுகளுக்கு டைனமிக் திசைதிருப்பல் இன்றியமையாதது. புவி-ரூட்டிங் பயனர்களை அருகிலுள்ள API சேவையகத்திற்கு இயக்குவதன் மூலம் தாமதத்தை கணிசமாகக் குறைக்கும். `getUserLocation()` ஐ செயல்படுத்துவது வலுவானதாக இருக்க வேண்டும், இது உலகளவில் வேகம் மற்றும் துல்லியத்திற்காக உகந்ததாக்கப்பட்ட IP புவி இருப்பிட சேவைகளைப் பயன்படுத்தக்கூடும்.
3. கோரிக்கைகளை ரத்து செய்தல்
ஒரு கோரிக்கை இனி பொருத்தமானதாக இல்லை என்றால் (எ.கா., பயனர் பக்கத்திலிருந்து விலகிச் செல்கிறார்), நீங்கள் அதை ரத்து செய்ய விரும்பலாம்.
let ongoingRequests = {};
self.addEventListener('fetch', function(event) {
const requestId = Math.random().toString(36).substring(7);
ongoingRequests[requestId] = event.request;
event.respondWith(
fetch(event.request).finally(() => {
delete ongoingRequests[requestId];
})
);
});
// Example of how you might cancel a request from the main thread (less common for interception itself, but demonstrates control)
function cancelRequest(requestUrl) {
for (const id in ongoingRequests) {
if (ongoingRequests[id].url === requestUrl) {
// Note: Fetch API doesn't have a direct 'abort' for a request *after* it's sent via SW.
// This is more illustrative. For true cancellation, AbortController is used *before* fetch.
console.warn(`Attempting to cancel request for: ${requestUrl}`);
// A more practical approach would involve checking if a request is still relevant before calling fetch in the SW.
break;
}
}
}
குறிப்பு: சர்வீஸ் வொர்க்கருக்குள் `fetch()` அழைக்கப்பட்ட பிறகு உண்மையான கோரிக்கை ரத்து செய்வது சிக்கலானது. `AbortController` API ஒரு `fetch` கோரிக்கையை ரத்து செய்வதற்கான நிலையான வழியாகும், ஆனால் அது `fetch` அழைப்பிற்கே அனுப்பப்பட வேண்டும், இது பெரும்பாலும் பிரதான த்ரெட்டிலிருந்து தொடங்கப்படுகிறது. சர்வீஸ் வொர்க்கர்கள் முதன்மையாக இடைமறித்து பின்னர் எவ்வாறு பதிலளிப்பது என்பதைத் தீர்மானிக்கின்றன.
4. மேம்பாட்டிற்காக பதில்களைப் போலியாக உருவாக்குதல்
மேம்பாட்டின் போது, உண்மையான நெட்வொர்க்கைத் தவிர்த்து, போலித் தரவை வழங்க உங்கள் சர்வீஸ் வொர்க்கரைப் பயன்படுத்தலாம்.
self.addEventListener('fetch', function(event) {
const url = new URL(event.request.url);
if (url.pathname === '/api/users') {
// Check if it's a GET request
if (event.request.method === 'GET') {
const mockResponse = {
status: 200,
statusText: 'OK',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify([
{ id: 1, name: 'Alice', region: 'North America' },
{ id: 2, name: 'Bob', region: 'Europe' },
{ id: 3, name: 'Charlie', region: 'Asia' }
])
};
event.respondWith(new Response(mockResponse.body, mockResponse));
} else {
// Handle other methods if necessary or pass through
event.respondWith(fetch(event.request));
}
} else {
event.respondWith(fetch(event.request));
}
});
உலகளாவிய கருத்தில் கொள்ள வேண்டியவை: போலியாக உருவாக்குவது வெவ்வேறு பிராந்தியங்களுக்குப் பொருத்தமான தரவு மாறுபாடுகளை உள்ளடக்கியிருக்கலாம், இது முழுமையாக செயல்படும் உலகளாவிய பின்தள அமைப்பு தேவையில்லாமல் உள்ளூர்மயமாக்கப்பட்ட உள்ளடக்கம் மற்றும் அம்சங்களை சோதிக்க டெவலப்பர்களுக்கு உதவுகிறது.
Fetch API உடன் மறுமொழி தேக்குதல் உத்திகள்
சர்வீஸ் வொர்க்கர்கள் அதிநவீன மறுமொழி தேக்குதல் உத்திகளைச் செயல்படுத்துவதற்கும் நம்பமுடியாத அளவிற்கு சக்திவாய்ந்தவை. இங்குதான் ஆஃப்லைன் ஆதரவு மற்றும் மின்னல் வேக தரவு மீட்டெடுப்பின் மாயாஜாலம் உண்மையாக பிரகாசிக்கிறது.
உலாவி கேஷைப் பயன்படுத்துதல்
உலாவி தானாகவே ஒரு உள்ளமைக்கப்பட்ட HTTP கேஷைக் கொண்டுள்ளது. எந்தவொரு சிறப்பு சர்வீஸ் வொர்க்கர் தர்க்கமும் இல்லாமல் நீங்கள் `fetch()` ஐப் பயன்படுத்தும்போது, உலாவி முதலில் அதன் கேஷைச் சரிபார்க்கும். ஒரு செல்லுபடியாகும், காலாவதியாகாத கேஷ் செய்யப்பட்ட பதில் காணப்பட்டால், அது நேரடியாக வழங்கப்படும். சேவையகத்தால் அனுப்பப்பட்ட கேஷ்-கட்டுப்பாட்டு தலைப்புகள் (எ.கா., `Cache-Control: max-age=3600`) பதில்கள் எவ்வளவு காலம் புதியதாகக் கருதப்படுகின்றன என்பதை ஆணையிடுகின்றன.
சர்வீஸ் வொர்க்கர்களுடன் தனிப்பயன் தேக்குதல்
சர்வீஸ் வொர்க்கர்கள் உங்களுக்கு தேக்குதல் மீது நுணுக்கமான கட்டுப்பாட்டை அளிக்கின்றன. பொதுவான முறை ஒரு `fetch` நிகழ்வை இடைமறிப்பது, கேஷிலிருந்து பதிலை மீட்டெடுக்க முயற்சிப்பது, மற்றும் காணப்படவில்லை என்றால், அதை நெட்வொர்க்கிலிருந்து பெற்று, பின்னர் எதிர்கால பயன்பாட்டிற்காக அதை தேக்குவது ஆகியவற்றை உள்ளடக்கியது.
1. கேஷ்-ஃபர்ஸ்ட் உத்தி
இது ஒரு பொதுவான உத்தியாகும், இதில் சர்வீஸ் வொர்க்கர் முதலில் அதன் கேஷிலிருந்து பதிலை வழங்க முயற்சிக்கிறது. அது கேஷில் காணப்படவில்லை என்றால், அது ஒரு நெட்வொர்க் கோரிக்கையைச் செய்கிறது, நெட்வொர்க்கிலிருந்து பதிலை வழங்குகிறது, மற்றும் அடுத்த முறைக்காக அதை தேக்குகிறது.
const CACHE_NAME = 'my-app-v1';
const urlsToCache = [
'/',
'/styles.css',
'/script.js'
];
self.addEventListener('install', function(event) {
// Perform install steps
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
console.log('Opened cache');
return cache.addAll(urlsToCache);
})
);
});
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
// Cache hit - return response
if (response) {
return response;
}
// Not in cache - fetch from network
return fetch(event.request).then(
function(response) {
// Check if we received a valid response
if (!response || response.status !== 200 || response.type !== 'basic') {
return response;
}
// IMPORTANT: Clone the response. A response is a stream
// and because we want the browser to consume the response
// as well as the cache consuming the response, we need
// to clone it so we have two streams.
const responseToCache = response.clone();
caches.open(CACHE_NAME)
.then(function(cache) {
cache.put(event.request, responseToCache);
});
return response;
}
);
})
);
});
// Optional: Clean up old caches when a new version of the SW is installed
self.addEventListener('activate', function(event) {
const cacheWhitelist = [CACHE_NAME];
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.map(function(cacheName) {
if (cacheWhitelist.indexOf(cacheName) === -1) {
return caches.delete(cacheName);
}
})
);
})
);
});
2. நெட்வொர்க்-ஃபர்ஸ்ட் உத்தி
இந்த உத்தி நெட்வொர்க்கிலிருந்து புதிய தரவைப் பெறுவதற்கு முன்னுரிமை அளிக்கிறது. நெட்வொர்க் கோரிக்கை தோல்வியுற்றால் (எ.கா., இணைப்பு இல்லை), அது கேஷ் செய்யப்பட்ட பதிலுக்குத் திரும்புகிறது.
self.addEventListener('fetch', function(event) {
event.respondWith(
fetch(event.request).catch(function() {
// If fetch fails, fall back to the cache
return caches.match(event.request);
})
);
});
உலகளாவிய கருத்தில் கொள்ள வேண்டியவை: நெட்வொர்க்-ஃபர்ஸ்ட் என்பது புத்துணர்ச்சி முக்கியமான டைனமிக் உள்ளடக்கத்திற்கு சிறந்தது, ஆனால் நீங்கள் இன்னும் உலகின் பல பகுதிகளில் பொதுவான இடைப்பட்ட இணைப்புகளைக் கொண்ட பயனர்களுக்கு நெகிழ்வுத்தன்மையை விரும்புகிறீர்கள்.
3. ஸ்டேல்-வைல்-ரிவாலிடேட்
இது ஒரு மேம்பட்ட மற்றும் பெரும்பாலும் டைனமிக் உள்ளடக்கத்திற்கு விரும்பப்படும் உத்தியாகும். இது கேஷ் செய்யப்பட்ட பதிலை உடனடியாக வழங்குகிறது (UI வேகமானதாக உணர வைக்கிறது), அதே நேரத்தில் பின்னணியில், கேஷை மறுமதிப்பீடு செய்ய ஒரு நெட்வொர்க் கோரிக்கையைச் செய்கிறது. நெட்வொர்க் கோரிக்கை ஒரு புதிய பதிப்பை வழங்கினால், கேஷ் புதுப்பிக்கப்படும்.
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.open(CACHE_NAME).then(function(cache) {
return cache.match(event.request).then(function(cachedResponse) {
// If cached response exists, return it immediately
if (cachedResponse) {
// Start fetching from network in the background
fetch(event.request).then(function(networkResponse) {
// If network response is valid, update the cache
if (networkResponse && networkResponse.status === 200 && networkResponse.type === 'basic') {
cache.put(event.request, networkResponse.clone());
}
}).catch(function() {
// Network fetch failed, do nothing, already served from cache
});
return cachedResponse;
}
// No cached response, fetch from network and cache it
return fetch(event.request).then(function(networkResponse) {
if (networkResponse && networkResponse.status === 200 && networkResponse.type === 'basic') {
cache.put(event.request, networkResponse.clone());
}
return networkResponse;
});
});
})
);
});
உலகளாவிய கருத்தில் கொள்ள வேண்டியவை: இந்த உத்தி இரண்டு உலகங்களிலும் சிறந்ததை வழங்குகிறது - உணரப்பட்ட வேகம் மற்றும் புதுப்பித்த தரவு. இது உலகளாவிய பயன்பாடுகளுக்கு குறிப்பாக பயனுள்ளதாக இருக்கும், அங்கு பயனர்கள் மூல சேவையகத்திலிருந்து வெகு தொலைவில் இருக்கலாம் மற்றும் அதிக தாமதத்தை அனுபவிக்கலாம்; அவர்கள் கேஷிலிருந்து உடனடியாக தரவைப் பெறுகிறார்கள், மேலும் அடுத்தடுத்த கோரிக்கைகளுக்காக கேஷ் புதுப்பிக்கப்படுகிறது.
4. கேஷ்-ஒன்லி உத்தி
இந்த உத்தி கேஷிலிருந்து மட்டுமே வழங்குகிறது மற்றும் ஒருபோதும் நெட்வொர்க் கோரிக்கையைச் செய்யாது. இது முக்கியமான, மாறாத சொத்துகளுக்கு அல்லது ஆஃப்லைன்-ஃபர்ஸ்ட் ஒரு முழுமையான தேவையாக இருக்கும்போது சிறந்தது.
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
// If response is found in cache, return it, otherwise return an error or fallback
return response || new Response('Network error - Offline content not available', { status: 404 });
})
);
});
5. நெட்வொர்க்-ஒன்லி உத்தி
இந்த உத்தி வெறுமனே ஒரு நெட்வொர்க் கோரிக்கையைச் செய்கிறது மற்றும் ஒருபோதும் கேஷைப் பயன்படுத்தாது. இது ஒரு சர்வீஸ் வொர்க்கர் இல்லாமல் `fetch()` இன் இயல்புநிலை நடத்தை, ஆனால் குறிப்பிட்ட ஆதாரங்களுக்காக ஒரு சர்வீஸ் வொர்க்கருக்குள் வெளிப்படையாக வரையறுக்கப்படலாம்.
self.addEventListener('fetch', function(event) {
event.respondWith(fetch(event.request));
});
கோரிக்கை இடைமறித்தல் மற்றும் மறுமொழி தேக்குதல் ஆகியவற்றை இணைத்தல்
உலகளாவிய பயன்பாடுகளுக்கான Fetch API-யின் உண்மையான சக்தி நீங்கள் கோரிக்கை இடைமறித்தல் மற்றும் மறுமொழி தேக்குதல் ஆகியவற்றை இணைக்கும்போது வெளிப்படுகிறது. உங்கள் சர்வீஸ் வொர்க்கர் ஒரு மைய மையமாக செயல்பட முடியும், சிக்கலான நெட்வொர்க் தர்க்கத்தை ஒருங்கிணைக்கிறது.
உதாரணம்: தேக்குதலுடன் அங்கீகரிக்கப்பட்ட API அழைப்புகள்
ஒரு இ-காமர்ஸ் பயன்பாட்டைக் கருத்தில் கொள்வோம். பயனர் சுயவிவரத் தரவு மற்றும் தயாரிப்பு பட்டியல்கள் தேக்கப்படக்கூடியதாக இருக்கலாம், ஆனால் ஒரு வண்டியில் பொருட்களைச் சேர்ப்பது அல்லது ஒரு ஆர்டரைச் செயல்படுத்துவது போன்ற செயல்களுக்கு அங்கீகாரம் தேவைப்படுகிறது மற்றும் வித்தியாசமாக கையாளப்பட வேண்டும்.
// In sw.js
const CACHE_NAME = 'my-app-v2';
// Cache static assets
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
return cache.addAll([
'/', '/index.html', '/styles.css', '/app.js',
'/images/logo.png'
]);
})
);
});
self.addEventListener('fetch', function(event) {
const requestUrl = new URL(event.request.url);
// Handle API requests
if (requestUrl.origin === 'https://api.globalstore.com') {
// Request Interception: Add Auth Token for API calls
const authHeader = { 'Authorization': `Bearer ${getAuthToken()}` }; // Placeholder
const modifiedRequest = new Request(event.request, {
headers: {
...Object.fromEntries(event.request.headers.entries()),
...authHeader
}
});
// Response Caching Strategy: Stale-While-Revalidate for product catalog
if (requestUrl.pathname.startsWith('/api/products')) {
event.respondWith(
caches.open(CACHE_NAME).then(function(cache) {
return cache.match(modifiedRequest).then(function(cachedResponse) {
// If cached response exists, return it immediately
if (cachedResponse) {
// Start fetching from network in the background for updates
fetch(modifiedRequest).then(function(networkResponse) {
if (networkResponse && networkResponse.status === 200 && networkResponse.type === 'basic') {
cache.put(modifiedRequest, networkResponse.clone());
}
}).catch(function() { /* Ignore network errors here */ });
return cachedResponse;
}
// No cached response, fetch from network and cache it
return fetch(modifiedRequest).then(function(networkResponse) {
if (networkResponse && networkResponse.status === 200 && networkResponse.type === 'basic') {
cache.put(modifiedRequest, networkResponse.clone());
}
return networkResponse;
});
});
})
);
}
// Network-First for user-specific data (e.g., cart, orders)
else if (requestUrl.pathname.startsWith('/api/user') || requestUrl.pathname.startsWith('/api/cart')) {
event.respondWith(
fetch(modifiedRequest).catch(function() {
// Fallback to cache if network fails (for offline viewing of previously loaded data)
return caches.match(modifiedRequest);
})
);
}
// Network-only for critical operations (e.g., place order)
else {
event.respondWith(fetch(modifiedRequest));
}
}
// For other requests (e.g., external assets), use default fetch
else {
event.respondWith(fetch(event.request));
}
});
function getAuthToken() {
// This function needs to retrieve the auth token, potentially from localStorage
// or a cookie. Be mindful of security implications.
return localStorage.getItem('authToken') || 'guest'; // Example
}
உலகளாவிய கருத்தில் கொள்ள வேண்டியவை:
- அங்கீகாரம்: `getAuthToken()` வலுவானதாக இருக்க வேண்டும். ஒரு உலகளாவிய பயன்பாட்டிற்கு, OAuth அல்லது JWT-களைக் கையாளும் ஒரு மைய அடையாள வழங்குநர் பொதுவானது. டோக்கன்கள் பாதுகாப்பாக சேமிக்கப்பட்டு அணுகக்கூடியவை என்பதை உறுதிப்படுத்தவும்.
- API இறுதிப்புள்ளிகள்: இந்த எடுத்துக்காட்டு ஒரு ஒற்றை API டொமைனை அனுமானிக்கிறது. உண்மையில், உங்களிடம் பிராந்திய API-கள் இருக்கலாம், மேலும் இடைமறிப்பு தர்க்கம் இதை கணக்கில் எடுத்துக்கொள்ள வேண்டும், இது எந்த API டொமைனைத் தாக்க வேண்டும் என்பதைத் தீர்மானிக்க கோரிக்கை URL-ஐப் பயன்படுத்தக்கூடும்.
- ஆஃப்லைன் பயனர் செயல்கள்: ஆஃப்லைனில் வண்டியில் சேர்ப்பது போன்ற செயல்களுக்கு, நீங்கள் பொதுவாக `IndexedDB`-இல் செயல்களை வரிசைப்படுத்தி, இணைப்பு மீட்டமைக்கப்படும்போது அவற்றை ஒத்திசைப்பீர்கள். சர்வீஸ் வொர்க்கர் ஆன்லைன்/ஆஃப்லைன் நிலையைக் கண்டறிந்து இந்த வரிசைப்படுத்தலை நிர்வகிக்க முடியும்.
சர்வதேச உள்ளடக்கத்திற்கான தேக்குதலை செயல்படுத்துதல்
ஒரு உலகளாவிய பார்வையாளர்களுடன் கையாளும்போது, உங்கள் பயன்பாடு பல மொழிகள் மற்றும் பிராந்தியங்களில் உள்ளடக்கத்தை வழங்கக்கூடும். தேக்குதல் உத்திகள் இதைக் கருத்தில் கொள்ள வேண்டும்.
தலைப்புகளின் அடிப்படையில் பதில்களை மாற்றுதல்
சர்வதேச உள்ளடக்கத்தை தேக்கும்போது, தேக்கப்பட்ட பதில் கோரிக்கையின் மொழி மற்றும் உள்ளூர் விருப்பங்களுடன் பொருந்துவதை உறுதி செய்வது முக்கியம். `Accept-Language` தலைப்பு இங்கே முக்கியமானது. இதை உங்கள் `caches.match` அழைப்புகளில் பயன்படுத்தலாம்.
// Inside a fetch event handler in sw.js
self.addEventListener('fetch', function(event) {
const request = event.request;
const url = new URL(request.url);
if (url.pathname.startsWith('/api/content')) {
event.respondWith(
caches.open(CACHE_NAME).then(function(cache) {
// Create a key that includes Accept-Language header for varying cache entries
const cacheKey = new Request(request.url, {
headers: {
'Accept-Language': request.headers.get('Accept-Language') || 'en-US'
}
});
return cache.match(cacheKey).then(function(cachedResponse) {
if (cachedResponse) {
console.log('Serving from cache for locale:', request.headers.get('Accept-Language'));
// Potentially revalidate in background if stale-while-revalidate
return cachedResponse;
}
// Fetch from network and cache with locale-specific key
return fetch(request).then(function(networkResponse) {
if (networkResponse.ok) {
// Clone response for caching
const responseToCache = networkResponse.clone();
cache.put(cacheKey, responseToResponse);
}
return networkResponse;
});
});
})
);
} else {
event.respondWith(fetch(request));
}
});
உலகளாவிய கருத்தில் கொள்ள வேண்டியவை:
- `Accept-Language` தலைப்பு: உங்கள் பின்தளம் பொருத்தமான உள்ளூர்மயமாக்கப்பட்ட உள்ளடக்கத்தை வழங்க `Accept-Language` தலைப்பை சரியாகச் செயலாக்குவதை உறுதிப்படுத்தவும். கிளையன்ட் பக்கம் (உலாவி) பெரும்பாலும் பயனர் OS/உலாவி அமைப்புகளின் அடிப்படையில் இந்த தலைப்பை தானாகவே அனுப்புகிறது.
- `Vary` தலைப்பு: `Accept-Language` போன்ற தலைப்புகளின் அடிப்படையில் தேக்குதலை மதிக்க வேண்டிய ஒரு சேவையகத்திலிருந்து உள்ளடக்கத்தை வழங்கும்போது, சேவையகம் அதன் பதில்களில் `Vary: Accept-Language` தலைப்பைச் சேர்ப்பதை உறுதிப்படுத்தவும். இது இடைநிலை கேஷ்களுக்கு (உலாவியின் HTTP கேஷ் மற்றும் சர்வீஸ் வொர்க்கர் கேஷ் உட்பட) பதில் உள்ளடக்கம் இந்த தலைப்பின் அடிப்படையில் மாறுபடலாம் என்று கூறுகிறது.
- டைனமிக் உள்ளடக்கம் vs. நிலையான சொத்துக்கள்: படங்கள் அல்லது எழுத்துருக்கள் போன்ற நிலையான சொத்துக்கள் உள்ளூர் அடிப்படையில் மாற வேண்டியதில்லை, அவற்றின் தேக்குதலை எளிதாக்குகிறது. டைனமிக் உள்ளடக்கம், இருப்பினும், உள்ளூர்-அறிந்த தேக்குதலிலிருந்து பெரிதும் பயனடைகிறது.
கருவிகள் மற்றும் நூலகங்கள்
நீங்கள் சர்வீஸ் வொர்க்கர்கள் மற்றும் Fetch API உடன் நேரடியாக அதிநவீன கோரிக்கை இடைமறித்தல் மற்றும் தேக்குதல் தர்க்கத்தை உருவாக்க முடியும் என்றாலும், பல நூலகங்கள் செயல்முறையை எளிதாக்க முடியும்:
- Workbox: கூகிளிலிருந்து வரும் நூலகங்கள் மற்றும் கருவிகளின் தொகுப்பு, இது ஒரு வலுவான சர்வீஸ் வொர்க்கரைச் செயல்படுத்துவதை எளிதாக்குகிறது. இது முன் கட்டப்பட்ட தேக்குதல் உத்திகள், ரூட்டிங் மற்றும் பிற பயனுள்ள பயன்பாடுகளை வழங்குகிறது, இது பாய்லர்ப்ளேட் குறியீட்டை கணிசமாகக் குறைக்கிறது. Workbox சர்வீஸ் வொர்க்கர் வாழ்க்கைச் சுழற்சி மற்றும் கேஷ் நிர்வாகத்தின் சிக்கலான தன்மையை பெரும்பாலும் சுருக்கிக் காட்டுகிறது.
- Axios: சர்வீஸ் வொர்க்கர்களுடன் நேரடியாக தொடர்புடையது அல்ல என்றாலும், Axios என்பது ஒரு பிரபலமான HTTP கிளையன்ட் ஆகும், இது கோரிக்கைகள் மற்றும் பதில்களுக்கான உள்ளமைக்கப்பட்ட இடைமறிப்பான்களை வழங்குகிறது. நீங்கள் Axios-ஐ ஒரு சர்வீஸ் வொர்க்கருடன் இணைந்து மேலும் நெறிப்படுத்தப்பட்ட கிளையன்ட் பக்க நெட்வொர்க் கோரிக்கை நிர்வாகத்திற்காகப் பயன்படுத்தலாம்.
Workbox உடன் உதாரணம்
Workbox தேக்குதல் உத்திகளை கணிசமாக எளிதாக்குகிறது:
// In sw.js (using Workbox)
importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.0.0/workbox-sw.js');
const CACHE_NAME = 'my-app-v2';
// Pre-cache essential assets
workbox.precaching.precacheAndRoute([
'/', '/index.html', '/styles.css', '/app.js',
'/images/logo.png'
]);
// Cache API requests with stale-while-revalidate
workbox.routing.registerRoute(
/https:\/\/api\.globalstore\.com\/api\/products/, // Regex to match product API URLs
new workbox.strategies.StaleWhileRevalidate({
cacheName: CACHE_NAME,
plugins: [
// Optionally add caching for different locales if needed
// new workbox.cacheableResponse.CacheableResponsePlugin({
// statuses: [0, 200]
// })
]
})
);
// Cache user-specific data with network-first strategy
workbox.routing.registerRoute(
/https:\/\/api\.globalstore\.com\/api\/(user|cart)/, // Regex for user/cart API
new workbox.strategies.NetworkFirst({
cacheName: CACHE_NAME,
plugins: [
new workbox.expiration.ExpirationPlugin({
// Cache only 5 entries, expire after 30 days
maxEntries: 5,
maxAgeSeconds: 30 * 24 * 60 * 60, // 30 days
}),
new workbox.cacheableResponse.CacheableResponsePlugin({
statuses: [0, 200]
})
]
})
);
// Network-only for critical operations (example)
workbox.routing.registerRoute(
/https:\/\/api\.globalstore\.com\/api\/order/,
new workbox.strategies.NetworkOnly()
);
// Custom handler for adding Authorization header to all API requests
workbox.routing.registerRoute(
/https:\/\/api\.globalstore\.com/,
new workbox.strategies.NetworkFirst({
cacheName: CACHE_NAME,
plugins: [
{
requestWillFetch: async ({ request, url, event, delta }) => {
const token = localStorage.getItem('authToken');
const headers = new Headers(request.headers);
if (token) {
headers.set('Authorization', `Bearer ${token}`);
}
return new Request(url, { ...request, headers });
}
}
]
})
);
உலகளாவிய கருத்தில் கொள்ள வேண்டியவை: Workbox உள்ளமைவுகள் சர்வதேச தேவைகளுக்கு ஏற்ப வடிவமைக்கப்படலாம். உதாரணமாக, கண்டறியப்பட்ட பயனர் மொழி அல்லது பிராந்தியத்தின் அடிப்படையில் வெவ்வேறு கேஷ் பதிப்புகளை வழங்க Workbox-இன் மேம்பட்ட ரூட்டிங்கைப் பயன்படுத்தலாம், இது ஒரு உலகளாவிய பயனர் தளத்திற்கு மிகவும் ஏற்றதாக அமைகிறது.
உலகளாவிய பயன்பாடுகளுக்கான சிறந்த நடைமுறைகள் மற்றும் கருத்தில் கொள்ள வேண்டியவை
ஒரு உலகளாவிய பார்வையாளர்களுக்காக கோரிக்கை இடைமறித்தல் மற்றும் மறுமொழி தேக்குதல் ஆகியவற்றைச் செயல்படுத்தும்போது, இந்த சிறந்த நடைமுறைகளை மனதில் கொள்ளுங்கள்:
- முற்போக்கான மேம்பாடு: சர்வீஸ் வொர்க்கர்கள் போன்ற மேம்பட்ட அம்சங்கள் இல்லாவிட்டாலும் உங்கள் பயன்பாடு செயல்படுவதை உறுதிப்படுத்தவும். முக்கிய செயல்பாடு பழைய உலாவிகளிலும், சர்வீஸ் வொர்க்கர்கள் ஆதரிக்கப்படாத சூழல்களிலும் செயல்பட வேண்டும்.
- பாதுகாப்பு: கோரிக்கை இடைமறிப்பின் போது அங்கீகார டோக்கன்கள் போன்ற முக்கியமான தரவைக் கையாளும்போது மிகவும் கவனமாக இருங்கள். டோக்கன்களைப் பாதுகாப்பாக சேமிக்கவும் (எ.கா., HttpOnly குக்கீகளைப் பொருத்தமான இடங்களில் பயன்படுத்துதல், அல்லது பாதுகாப்பான சேமிப்பக பொறிமுறைகள்). ஒருபோதும் இரகசியங்களை ஹார்ட்கோட் செய்யாதீர்கள்.
- கேஷ் செல்லாததாக்குதல்: ஒரு வலுவான கேஷ் செல்லாததாக்குதல் உத்தியைச் செயல்படுத்துவது முக்கியம். பழைய தரவு தரவு இல்லாததை விட மோசமாக இருக்கலாம். நேர அடிப்படையிலான காலாவதி, பதிப்பாக்கம் மற்றும் நிகழ்வு-உந்துதல் செல்லாததாக்குதலைக் கருத்தில் கொள்ளுங்கள்.
- செயல்திறன் கண்காணிப்பு: வெவ்வேறு பிராந்தியங்கள் மற்றும் நெட்வொர்க் நிலைமைகளில் உங்கள் பயன்பாட்டின் செயல்திறனைத் தொடர்ந்து கண்காணிக்கவும். லைட்ஹவுஸ், WebPageTest, மற்றும் RUM (உண்மையான பயனர் கண்காணிப்பு) போன்ற கருவிகள் விலைமதிப்பற்றவை.
- பிழை கையாளுதல்: உங்கள் இடைமறிப்பு மற்றும் தேக்குதல் தர்க்கத்தை நெட்வொர்க் பிழைகள், சேவையக சிக்கல்கள் மற்றும் எதிர்பாராத பதில்களைக் கருணையுடன் கையாள வடிவமைக்கவும். பயனர்களுக்கு அர்த்தமுள்ள பின்னடைவு அனுபவங்களை வழங்கவும்.
- `Vary` தலைப்பு முக்கியத்துவம்: கோரிக்கை தலைப்புகளைப் பொறுத்ததுள்ள கேஷ் செய்யப்பட்ட பதில்களுக்கு (`Accept-Language` போன்றவை), உங்கள் பின்தளம் `Vary` தலைப்பைச் சரியாக அனுப்புவதை உறுதிப்படுத்தவும். இது வெவ்வேறு பயனர் விருப்பங்களில் சரியான தேக்குதல் நடத்தைக்கு அடிப்படையானது.
- வள மேம்படுத்தல்: தேவையானது மட்டும் தேக்கவும். பெரிய, அரிதாக மாறும் சொத்துக்கள் தீவிர தேக்குதலுக்கு நல்ல வேட்பாளர்கள். அடிக்கடி மாறும் டைனமிக் தரவுகளுக்கு மேலும் டைனமிக் தேக்குதல் உத்திகள் தேவை.
- தொகுப்பு அளவு: உங்கள் சர்வீஸ் வொர்க்கர் ஸ்கிரிப்ட்டின் அளவைப் பற்றி எச்சரிக்கையாக இருங்கள். ஒரு அதிகப்படியான பெரிய SW நிறுவ மற்றும் செயல்படுத்த மெதுவாக இருக்கலாம், இது ஆரம்ப பயனர் அனுபவத்தைப் பாதிக்கிறது.
- பயனர் கட்டுப்பாடு: பொருந்தினால் பயனர்களுக்கு தேக்குதல் நடத்தை மீது சில கட்டுப்பாட்டை வழங்குவதைக் கருத்தில் கொள்ளுங்கள், இருப்பினும் இது பொதுவான வலைப் பயன்பாடுகளுக்கு குறைவாகவே உள்ளது.
முடிவுரை
கோரிக்கை இடைமறித்தல் மற்றும் மறுமொழி தேக்குதல், குறிப்பாக சர்வீஸ் வொர்க்கர்கள் மற்றும் Fetch API மூலம் இயக்கப்படும்போது, உயர் செயல்திறன், நெகிழ்வான உலகளாவிய வலைப் பயன்பாடுகளை உருவாக்குவதற்கான இன்றியமையாத கருவிகள். கோரிக்கைகளை இடைமறிப்பதன் மூலம், உங்கள் பயன்பாடு சேவையகங்களுடன் எவ்வாறு தொடர்பு கொள்கிறது என்பதன் மீது கட்டுப்பாட்டைப் பெறுகிறீர்கள், அங்கீகாரம், ரூட்டிங் மற்றும் பலவற்றிற்கான டைனமிக் சரிசெய்தல்களை செயல்படுத்துகிறீர்கள். ஸ்மார்ட் தேக்குதல் உத்திகளைச் செயல்படுத்துவதன் மூலம், நீங்கள் ஏற்றுதல் நேரங்களை வியத்தகு முறையில் மேம்படுத்துகிறீர்கள், ஆஃப்லைன் அணுகலை செயல்படுத்துகிறீர்கள், மற்றும் சேவையக சுமையைக் குறைக்கிறீர்கள்.
ஒரு சர்வதேச பார்வையாளர்களுக்கு, இந்த நுட்பங்கள் வெறும் மேம்படுத்தல்கள் அல்ல; அவை புவியியல் இருப்பிடம் அல்லது நெட்வொர்க் நிலைமைகளைப் பொருட்படுத்தாமல் ஒரு நிலையான மற்றும் நேர்மறையான பயனர் அனுபவத்தை வழங்குவதற்கு அடித்தளமானவை. நீங்கள் ஒரு உலகளாவிய இ-காமர்ஸ் தளம், ஒரு உள்ளடக்கம்-கனமான செய்தி போர்டல், அல்லது ஒரு SaaS பயன்பாட்டை உருவாக்கினாலும், Fetch API-யின் மேம்பட்ட திறன்களில் தேர்ச்சி பெறுவது உங்கள் பயன்பாட்டைத் தனித்து நிற்க வைக்கும்.
வளர்ச்சியை விரைவுபடுத்தவும், உங்கள் உத்திகள் வலுவானவை என்பதை உறுதிப்படுத்தவும் Workbox போன்ற கருவிகளைப் பயன்படுத்த நினைவில் கொள்ளுங்கள். உங்கள் அணுகுமுறையைச் செம்மைப்படுத்தவும், ஒவ்வொரு பயனருக்கும் சாத்தியமான சிறந்த அனுபவத்தை வழங்கவும் உங்கள் பயன்பாட்டின் செயல்திறனை உலகளவில் தொடர்ந்து சோதித்து கண்காணிக்கவும்.