நேவிகேஷன் ஏபிஐ-ல் தேர்ச்சி பெறுதல்: ஒற்றைப் பக்கச் செயலி ரூட்டிங் மற்றும் வரலாறு மேலாண்மை

ஒற்றைப் பக்கச் செயலிகளில் (SPAs) ரூட்டிங் மற்றும் வரலாறு மேலாண்மையைக் கையாளும் முறையில் நேவிகேஷன் ஏபிஐ ஒரு குறிப்பிடத்தக்க முன்னேற்றத்தைக் குறிக்கிறது. பாரம்பரிய முறைகள் பெரும்பாலும் `window.location` ஆப்ஜெக்ட்டைக் கையாளுதல் அல்லது மூன்றாம் தரப்பு நூலகங்களைப் பயன்படுத்துவதை நம்பியுள்ளன. இந்த அணுகுமுறைகள் நமக்கு நன்றாகப் பயன்பட்டிருந்தாலும், நேவிகேஷன் ஏபிஐ ஒரு மிகவும் எளிமையான, செயல்திறன் மிக்க, மற்றும் அதிக அம்சங்கள் நிறைந்த தீர்வை வழங்குகிறது, இது டெவலப்பர்களுக்கு பயனரின் நேவிகேஷன் அனுபவத்தின் மீது அதிகக் கட்டுப்பாட்டை வழங்குகிறது.

நேவிகேஷன் ஏபிஐ என்றால் என்ன?

நேவிகேஷன் ஏபிஐ என்பது SPAs நேவிகேஷன், ரூட்டிங், மற்றும் வரலாற்றை நிர்வகிக்கும் முறையை எளிதாக்கவும் மேம்படுத்தவும் வடிவமைக்கப்பட்ட ஒரு நவீன உலாவி ஏபிஐ ஆகும். இது ஒரு புதிய `navigation` ஆப்ஜெக்ட்டை அறிமுகப்படுத்துகிறது, இது டெவலப்பர்கள் நேவிகேஷன் நிகழ்வுகளை இடைமறித்துக் கட்டுப்படுத்தவும், யூஆர்எல்லைப் புதுப்பிக்கவும், மற்றும் முழுப் பக்க மறுஏற்றங்கள் இல்லாமல் ஒரு சீரான உலாவல் வரலாற்றைப் பராமரிக்கவும் உதவும் முறைகளையும் நிகழ்வுகளையும் வழங்குகிறது. இதன் விளைவாக வேகமான, மென்மையான, மற்றும் அதிகப் பதிலளிக்கக்கூடிய பயனர் அனுபவம் கிடைக்கிறது.

நேவிகேஷன் ஏபிஐ-ஐப் பயன்படுத்துவதன் நன்மைகள்

• மேம்பட்ட செயல்திறன்: முழுப் பக்க மறுஏற்றங்களை நீக்குவதன் மூலம், நேவிகேஷன் ஏபிஐ SPAs-இன் செயல்திறனை கணிசமாக மேம்படுத்துகிறது. வெவ்வேறு காட்சிகளுக்கு இடையேயான மாற்றங்கள் வேகமாகவும் மென்மையாகவும் மாறுகின்றன, இது மேலும் ஈர்க்கக்கூடிய பயனர் அனுபவத்திற்கு வழிவகுக்கிறது.
• மேம்பட்ட கட்டுப்பாடு: இந்த ஏபிஐ நேவிகேஷன் நிகழ்வுகளின் மீது நுணுக்கமான கட்டுப்பாட்டை வழங்குகிறது, இது டெவலப்பர்கள் தேவைக்கேற்ப நேவிகேஷன் நடத்தையை இடைமறித்து மாற்ற அனுமதிக்கிறது. இதில் நேவிகேஷனைத் தடுத்தல், பயனர்களைத் திசை திருப்புதல், மற்றும் நேவிகேஷன் நடப்பதற்கு முன்னும் பின்னும் தனிப்பயன் தர்க்கத்தை இயக்குதல் ஆகியவை அடங்கும்.
• எளிமைப்படுத்தப்பட்ட வரலாறு மேலாண்மை: உலாவியின் வரலாறு ஸ்டேக்கை நிர்வகிப்பது நேவிகேஷன் ஏபிஐ மூலம் எளிதாக்கப்படுகிறது. டெவலப்பர்கள் நிரல்ரீதியாக வரலாறு உள்ளீடுகளைச் சேர்க்கலாம், மாற்றலாம், மற்றும் கடந்து செல்லலாம், இது ஒரு சீரான மற்றும் கணிக்கக்கூடிய உலாவல் அனுபவத்தை உறுதி செய்கிறது.
• விளக்கமான நேவிகேஷன்: நேவிகேஷன் ஏபிஐ ரூட்டிங்கிற்கு ஒரு விளக்கமான அணுகுமுறையை ஊக்குவிக்கிறது, இது டெவலப்பர்கள் நேவிகேஷன் விதிகள் மற்றும் நடத்தைகளைத் தெளிவான மற்றும் சுருக்கமான முறையில் வரையறுக்க அனுமதிக்கிறது. இது குறியீட்டின் வாசிப்புத்திறன் மற்றும் பராமரிப்புத்தன்மையை மேம்படுத்துகிறது.
• நவீன ஃபிரேம்வொர்க்குகளுடன் ஒருங்கிணைப்பு: நேவிகேஷன் ஏபிஐ, ரியாக்ட், ஆங்குலர் மற்றும் வ்யூ.js போன்ற நவீன ஜாவாஸ்கிரிப்ட் ஃபிரேம்வொர்க்குகள் மற்றும் நூலகங்களுடன் தடையின்றி ஒருங்கிணைக்க வடிவமைக்கப்பட்டுள்ளது. இது டெவலப்பர்கள் தங்களது தற்போதைய மேம்பாட்டுப் பணிகளில் ஏபிஐ-இன் அம்சங்களைப் பயன்படுத்த அனுமதிக்கிறது.

முக்கியக் கருத்துக்கள் மற்றும் அம்சங்கள்

1. `navigation` ஆப்ஜெக்ட்

நேவிகேஷன் ஏபிஐ-இன் இதயம் `navigation` ஆப்ஜெக்ட் ஆகும், இது குளோபல் `window` ஆப்ஜெக்ட் மூலம் அணுகக்கூடியது (அதாவது, `window.navigation`). இந்த ஆப்ஜெக்ட் நேவிகேஷன் தொடர்பான பல்வேறு பண்புகள் மற்றும் முறைகளுக்கான அணுகலை வழங்குகிறது, அவற்றுள் சில:

• `currentEntry`: நேவிகேஷன் வரலாற்றில் தற்போதைய உள்ளீட்டைக் குறிக்கும் ஒரு `NavigationHistoryEntry` ஆப்ஜெக்ட்டைத் தருகிறது.
• `entries()`: நேவிகேஷன் வரலாற்றில் உள்ள அனைத்து உள்ளீடுகளையும் குறிக்கும் `NavigationHistoryEntry` ஆப்ஜெக்ட்களின் வரிசையைத் தருகிறது.
• `navigate(url, { state, info, replace })`: ஒரு புதிய யூஆர்எல்லுக்குச் செல்கிறது.
• `back()`: முந்தைய வரலாறு உள்ளீட்டிற்குத் திரும்பிச் செல்கிறது.
• `forward()`: அடுத்த வரலாறு உள்ளீட்டிற்கு முன்னோக்கிச் செல்கிறது.
• `reload()`: தற்போதைய பக்கத்தை மீண்டும் ஏற்றுகிறது.
• `addEventListener(event, listener)`: நேவிகேஷன் தொடர்பான நிகழ்வுகளுக்கு ஒரு நிகழ்வு கேட்பானைச் சேர்க்கிறது.

2. `NavigationHistoryEntry`

`NavigationHistoryEntry` இடைமுகம் நேவிகேஷன் வரலாற்றில் ஒரு ஒற்றை உள்ளீட்டைக் குறிக்கிறது. இது உள்ளீட்டைப் பற்றிய தகவல்களை வழங்குகிறது, அதாவது அதன் யூஆர்எல், நிலை, மற்றும் தனித்துவமான ஐடி.

• `url`: வரலாறு உள்ளீட்டின் யூஆர்எல்.
• `key`: வரலாறு உள்ளீட்டிற்கான ஒரு தனித்துவமான அடையாளங்காட்டி.
• `id`: மற்றொரு தனித்துவமான அடையாளங்காட்டி, குறிப்பாக ஒரு நேவிகேஷன் நிகழ்வின் வாழ்க்கைச் சுழற்சியைக் கண்காணிக்கப் பயனுள்ளது.
• `sameDocument`: நேவிகேஷன் ஒரே ஆவணத்திற்குள் நடக்குமா என்பதைக் குறிக்கும் ஒரு பூலியன்.
• `getState()`: வரலாறு உள்ளீட்டுடன் தொடர்புடைய நிலையைத் தருகிறது (நேவிகேஷனின் போது அமைக்கப்பட்டது).

3. நேவிகேஷன் நிகழ்வுகள்

நேவிகேஷன் ஏபிஐ பல நிகழ்வுகளை அனுப்புகிறது, அவை டெவலப்பர்கள் நேவிகேஷன் நடத்தையைக் கண்காணிக்கவும் கட்டுப்படுத்தவும் அனுமதிக்கின்றன. இந்த நிகழ்வுகளில் சில:

• `navigate`: ஒரு நேவிகேஷன் தொடங்கப்படும்போது (எ.கா., ஒரு இணைப்பைக் கிளிக் செய்தல், ஒரு படிவத்தைச் சமர்ப்பித்தல், அல்லது `navigation.navigate()` ஐ அழைத்தல்) அனுப்பப்படுகிறது. இது நேவிகேஷன் கோரிக்கைகளை இடைமறித்துக் கையாளும் முதன்மை நிகழ்வாகும்.
• `navigatesuccess`: ஒரு நேவிகேஷன் வெற்றிகரமாக முடிந்ததும் அனுப்பப்படுகிறது.
• `navigateerror`: ஒரு நேவிகேஷன் தோல்வியடையும்போது (எ.கா., நெட்வொர்க் பிழை அல்லது கையாளப்படாத விதிவிலக்கு காரணமாக) அனுப்பப்படுகிறது.
• `currentchange`: தற்போதைய வரலாறு உள்ளீடு மாறும்போது (எ.கா., முன்னோக்கி அல்லது பின்னோக்கிச் செல்லும்போது) அனுப்பப்படுகிறது.
• `dispose`: ஒரு `NavigationHistoryEntry` இனி அணுக முடியாதபோது, அதாவது ஒரு `replaceState` செயல்பாட்டின் போது அது வரலாற்றிலிருந்து அகற்றப்படும்போது அனுப்பப்படுகிறது.

நேவிகேஷன் ஏபிஐ உடன் ரூட்டிங்கை செயல்படுத்துதல்: ஒரு நடைமுறை உதாரணம்

ஒரு எளிய SPA-வில் அடிப்படை ரூட்டிங்கைச் செயல்படுத்த நேவிகேஷன் ஏபிஐ-ஐ எவ்வாறு பயன்படுத்துவது என்பதை விளக்குவோம். முகப்பு, பற்றி, மற்றும் தொடர்பு என மூன்று காட்சிகளைக் கொண்ட ஒரு செயலியைக் கருத்தில் கொள்வோம்.

முதலில், ரூட் மாற்றங்களைக் கையாள ஒரு செயல்பாட்டை உருவாக்கவும்:

function handleRouteChange(url) {
  const contentDiv = document.getElementById('content');
  switch (url) {
    case '/':
      contentDiv.innerHTML = '
முகப்பு
முகப்புப் பக்கத்திற்கு வரவேற்கிறோம்!
';
      break;
    case '/about':
      contentDiv.innerHTML = '
பற்றி
எங்களைப் பற்றி மேலும் அறியுங்கள்.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
தொடர்பு
எங்களைத் தொடர்பு கொள்ளுங்கள்.
';
      break;
    default:
      contentDiv.innerHTML = '
404 கிடைக்கவில்லை
பக்கம் காணப்படவில்லை.
';
  }
}

அடுத்து, `navigate` நிகழ்விற்கு ஒரு நிகழ்வு கேட்பானைச் சேர்க்கவும்:

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  event.preventDefault(); // இயல்புநிலை உலாவி நேவிகேஷனைத் தடுக்கவும்

  const promise = new Promise((resolve) => {
      handleRouteChange(url);
      resolve(); // ரூட் கையாண்ட பிறகு ப்ராமிஸை ரிசால்வ் செய்யவும்
  });

  event.transition = promise;
});

இந்தக் குறியீடு `navigate` நிகழ்வை இடைமறித்து, `event.destination` ஆப்ஜெக்ட்டிலிருந்து யூஆர்எல்லைப் பிரித்தெடுத்து, இயல்புநிலை உலாவி நேவிகேஷனைத் தடுத்து, உள்ளடக்கத்தைப் புதுப்பிக்க `handleRouteChange` ஐ அழைத்து, மற்றும் `event.transition` ப்ராமிஸை அமைக்கிறது. `event.transition` ஐ அமைப்பது, பக்கத்தை பார்வைக்கு புதுப்பிக்கும் முன், உள்ளடக்கப் புதுப்பிப்பு முடியும் வரை உலாவி காத்திருப்பதை உறுதி செய்கிறது.

இறுதியாக, நேவிகேஷனைத் தூண்டும் இணைப்புகளை நீங்கள் உருவாக்கலாம்:

முகப்பு | பற்றி | தொடர்பு

மற்றும் அந்த இணைப்புகளுக்கு ஒரு கிளிக் கேட்பானை இணைக்கவும்:

document.addEventListener('click', (event) => {
  if (event.target.tagName === 'A' && event.target.hasAttribute('data-navigo')) {
    event.preventDefault();
    window.navigation.navigate(event.target.href);
  }
});

இது நேவிகேஷன் ஏபிஐ-ஐப் பயன்படுத்தி அடிப்படை கிளையன்ட்-பக்க ரூட்டிங்கை அமைக்கிறது. இப்போது, இணைப்புகளைக் கிளிக் செய்வது ஒரு நேவிகேஷன் நிகழ்வைத் தூண்டி, `content` div-இன் உள்ளடக்கத்தை முழுப் பக்க மறுஏற்றம் இல்லாமல் புதுப்பிக்கும்.

நிலை மேலாண்மையைச் சேர்த்தல்

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

`navigation.navigate()` ஐ அழைக்கும்போது, நீங்கள் ஒரு `state` ஆப்ஜெக்ட்டை அனுப்பலாம்:

window.navigation.navigate('/about', { state: { pageTitle: 'About Us' } });

`navigate` நிகழ்வு கேட்பானுக்குள், `event.destination.getState()` ஐப் பயன்படுத்தி நிலையை அணுகலாம்:

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  const state = event.destination.getState();
  event.preventDefault();

  const promise = new Promise((resolve) => {
      handleRouteChange(url, state);
      resolve();
  });
  event.transition = promise;

});

function handleRouteChange(url, state = {}) {
  const contentDiv = document.getElementById('content');
  let title = state.pageTitle || 'எனது செயலி'; // இயல்புநிலை தலைப்பு

  switch (url) {
    case '/':
      contentDiv.innerHTML = '
முகப்பு
முகப்புப் பக்கத்திற்கு வரவேற்கிறோம்!
';
      title = 'முகப்பு';
      break;
    case '/about':
      contentDiv.innerHTML = '
பற்றி
எங்களைப் பற்றி மேலும் அறியுங்கள்.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
தொடர்பு
எங்களைத் தொடர்பு கொள்ளுங்கள்.
';
      break;
    default:
      contentDiv.innerHTML = '
404 கிடைக்கவில்லை
பக்கம் காணப்படவில்லை.
';
      title = '404 கிடைக்கவில்லை';
  }
  document.title = title;
}

இந்த மாற்றியமைக்கப்பட்ட எடுத்துக்காட்டில், `handleRouteChange` செயல்பாடு இப்போது ஒரு `state` அளவுருவை ஏற்று, ஆவணத் தலைப்பைப் புதுப்பிக்க அதைப் பயன்படுத்துகிறது. எந்த நிலையும் அனுப்பப்படாவிட்டால், அது 'எனது செயலி' என்பதை இயல்புநிலையாகக் கொள்ளும்.

`navigation.updateCurrentEntry()` ஐப் பயன்படுத்துதல்

சில நேரங்களில் நீங்கள் ஒரு புதிய நேவிகேஷனைத் தூண்டாமல் தற்போதைய வரலாறு உள்ளீட்டின் நிலையைப் புதுப்பிக்க விரும்பலாம். `navigation.updateCurrentEntry()` முறை இதைச் செய்ய உங்களை அனுமதிக்கிறது. உதாரணமாக, ஒரு பயனர் தற்போதைய பக்கத்தில் ஒரு அமைப்பை மாற்றினால், அந்த மாற்றத்தைப் பிரதிபலிக்க நிலையைப் புதுப்பிக்கலாம்:

function updateUserSetting(setting, value) {
  const currentState = navigation.currentEntry.getState() || {};
  const newState = { ...currentState, [setting]: value };
  navigation.updateCurrentEntry({ state: newState });
  console.log('Updated setting:', setting, 'to', value);
}

// Example usage:
updateUserSetting('theme', 'dark');

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

மேம்பட்ட பயன்பாட்டு வழக்குகள் மற்றும் கருத்தில் கொள்ள வேண்டியவை

1. படிவச் சமர்ப்பிப்புகளைக் கையாளுதல்

நேவிகேஷன் ஏபிஐ, SPAs-இல் படிவச் சமர்ப்பிப்புகளைக் கையாளப் பயன்படும், இது முழுப் பக்க மறுஏற்றங்களைத் தடுத்து, மேலும் தடையற்ற பயனர் அனுபவத்தை வழங்குகிறது. நீங்கள் படிவச் சமர்ப்பிப்பு நிகழ்வை இடைமறித்து, `navigation.navigate()` ஐப் பயன்படுத்தி யூஆர்எல்லைப் புதுப்பிக்கலாம் மற்றும் முடிவுகளை முழுப் பக்க மறுஏற்றம் இல்லாமல் காட்டலாம்.

2. ஒத்திசைவற்ற செயல்பாடுகள்

நேவிகேஷன் நிகழ்வுகளைக் கையாளும்போது, நீங்கள் ஒரு ஏபிஐ-யிலிருந்து தரவைப் பெறுவது போன்ற ஒத்திசைவற்ற செயல்பாடுகளைச் செய்ய வேண்டியிருக்கலாம். `event.transition` பண்பு, நேவிகேஷன் நிகழ்வுடன் ஒரு ப்ராமிஸை இணைக்க உங்களை அனுமதிக்கிறது, இது பக்கத்தைப் புதுப்பிக்கும் முன் ஒத்திசைவற்ற செயல்பாடு முடியும் வரை உலாவி காத்திருப்பதை உறுதி செய்கிறது. மேலே உள்ள எடுத்துக்காட்டுகளைப் பார்க்கவும்.

3. ஸ்க்ரோல் மீட்டெடுத்தல்

நேவிகேஷனின் போது ஸ்க்ரோல் நிலையைப் பராமரிப்பது ஒரு நல்ல பயனர் அனுபவத்தை வழங்குவதற்கு முக்கியமானது. நேவிகேஷன் ஏபிஐ, வரலாற்றில் முன்னோக்கி அல்லது பின்னோக்கிச் செல்லும்போது ஸ்க்ரோல் நிலையை மீட்டெடுப்பதற்கான வழிமுறைகளை வழங்குகிறது. நீங்கள் `NavigationHistoryEntry`-இன் `scroll` பண்பைப் பயன்படுத்தி ஸ்க்ரோல் நிலையைச் சேமித்து மீட்டெடுக்கலாம்.

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

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

5. படிப்படியான மேம்பாடு

நேவிகேஷன் ஏபிஐ-உடன் SPAs-ஐ உருவாக்கும்போது, படிப்படியான மேம்பாட்டைக் கருத்தில் கொள்வது முக்கியம். நேவிகேஷன் ஏபிஐ உலாவியால் ஆதரிக்கப்படாவிட்டாலும் உங்கள் செயலி சரியாகச் செயல்படுவதை உறுதிசெய்யவும். `navigation` ஆப்ஜெக்ட் இருப்பதைக் கண்டறிய அம்சக் கண்டறிதலைப் பயன்படுத்தலாம் மற்றும் தேவைப்பட்டால் பாரம்பரிய ரூட்டிங் முறைகளுக்குத் திரும்பலாம்.

பாரம்பரிய ரூட்டிங் முறைகளுடன் ஒப்பீடு

SPAs-இல் பாரம்பரிய ரூட்டிங் முறைகள் பெரும்பாலும் `window.location` ஆப்ஜெக்ட்டைக் கையாளுவதை அல்லது `react-router` அல்லது `vue-router` போன்ற மூன்றாம் தரப்பு நூலகங்களைப் பயன்படுத்துவதை நம்பியுள்ளன. இந்த முறைகள் பரவலாகப் பயன்படுத்தப்பட்டாலும் மற்றும் நன்கு நிறுவப்பட்டிருந்தாலும், அவற்றுக்கு சில வரம்புகள் உள்ளன:

• முழுப் பக்க மறுஏற்றங்கள்: `window.location`-ஐ நேரடியாகக் கையாளுவது முழுப் பக்க மறுஏற்றங்களைத் தூண்டக்கூடும், இது மெதுவாகவும் பயனர் அனுபவத்திற்கு இடையூறாகவும் இருக்கும்.
• சிக்கலானது: பாரம்பரிய முறைகளுடன் வரலாறு மற்றும் நிலையை நிர்வகிப்பது சிக்கலானதாகவும் பிழை ஏற்படக்கூடியதாகவும் இருக்கும், குறிப்பாக பெரிய மற்றும் சிக்கலான செயலிகளில்.
• செயல்திறன் சுமை: மூன்றாம் தரப்பு ரூட்டிங் நூலகங்கள் குறிப்பிடத்தக்க செயல்திறன் சுமையைச் சேர்க்கலாம், குறிப்பாக அவை உங்கள் செயலியின் குறிப்பிட்ட தேவைகளுக்கு உகந்ததாக இல்லாவிட்டால்.

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

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

2024-இன் பிற்பகுதியில், நேவிகேஷன் ஏபிஐ குரோம், ஃபயர்பாக்ஸ், சஃபாரி, மற்றும் எட்ஜ் உள்ளிட்ட நவீன உலாவிகளில் நல்ல ஆதரவைப் பெற்றுள்ளது. இருப்பினும், உங்கள் தயாரிப்புச் செயலிகளில் நேவிகேஷன் ஏபிஐ-ஐச் செயல்படுத்துவதற்கு முன்பு Can I use போன்ற ஆதாரங்களில் சமீபத்திய உலாவி இணக்கத்தன்மை தகவலைச் சரிபார்ப்பது எப்போதும் ஒரு நல்ல நடைமுறையாகும். பழைய உலாவி ஆதரவு கட்டாயமெனில், ஒரு பாலிஃபில் அல்லது ஒரு ஃபால்பேக் பொறிமுறையைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள்.

முடிவுரை

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

மேலும் கற்க

• MDN வலை ஆவணங்கள்: நேவிகேஷன் ஏபிஐ
• WICG நேவிகேஷன் ஏபிஐ விவரக்குறிப்பு