முற்போக்கு வலைச் செயலி டீப் லிங்கிங்: URL அடிப்படையிலான செயலி நிலையை மீட்டமைத்தல்

முற்போக்கு வலைச் செயலிகள் (PWAs) நாம் வலைச் செயலிகளை அனுபவிக்கும் விதத்தில் புரட்சியை ஏற்படுத்தியுள்ளன. அவை நேட்டிவ் செயலிகளின் சிறந்த அம்சங்களையும், வலையின் அணுகல்தன்மையையும் இணைத்து, ஆஃப்லைன் திறன்கள், புஷ் அறிவிப்புகள் மற்றும் தடையற்ற பயனர் அனுபவத்தை வழங்குகின்றன. PWA பயனர் அனுபவத்தை மேம்படுத்துவதில் ஒரு முக்கிய அம்சம், திறமையான நிலை மீட்டமைத்தலுடன் கூடிய டீப் லிங்கிங்கை செயல்படுத்துவதாகும்.

டீப் லிங்கிங் என்றால் என்ன?

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

PWA-க்களுக்கு டீப் லிங்கிங் ஏன் முக்கியமானது?

டீப் லிங்கிங் பல காரணங்களுக்காக அவசியமானது:

• மேம்பட்ட பயனர் அனுபவம்: பயனர்கள் முழு செயலியிலும் செல்லாமல் குறிப்பிட்ட உள்ளடக்கத்தை உடனடியாக அணுக முடியும். பயனர்கள் உடனடி திருப்தியை எதிர்பார்க்கும் இன்றைய வேகமான டிஜிட்டல் உலகில் இது மிகவும் முக்கியமானது.
• மேம்படுத்தப்பட்ட ஈடுபாடு: சந்தைப்படுத்தல் பிரச்சாரங்கள், சமூக ஊடக இடுகைகள் அல்லது மின்னஞ்சல் செய்திமடல்களில் உள்ள டீப் லிங்குகள், பயனர்களை PWA-க்குள் உள்ள தொடர்புடைய உள்ளடக்கத்திற்கு நேரடியாக அழைத்துச் சென்று, ஈடுபாட்டையும் மாற்றங்களையும் அதிகரிக்கின்றன.
• தடையற்ற பகிர்தல்: பயனர்கள் PWA-க்குள் உள்ள குறிப்பிட்ட உள்ளடக்கத்தை ஒரு எளிய URL வழியாக மற்றவர்களுடன் எளிதாகப் பகிரலாம். பெறுநர் பின்னர் தங்கள் PWA நிகழ்வில் அதே உள்ளடக்கத்தை நேரடியாக அணுக முடியும்.
• SEO நன்மைகள்: PWAs தேடுபொறிகளால் அட்டவணைப்படுத்தப்படுகின்றன, மேலும் டீப் லிங்குகள் தேடுபொறிகளை செயலியிலுள்ள குறிப்பிட்ட உள்ளடக்கத்தை ஊர்ந்து சென்று அட்டவணைப்படுத்த அனுமதிக்கின்றன, இது பார்வை மற்றும் தேடல் தரவரிசைகளை மேம்படுத்துகிறது.
• செயலி நிலை பாதுகாப்பு: சரியாகச் செயல்படுத்தப்பட்ட டீப் லிங்கிங், செயலியின் நிலையைப் பாதுகாக்க முடியும். ஒரு டீப் லிங்க் வழியாக செயலி மூடப்பட்டு மீண்டும் திறக்கப்பட்ட பிறகும் பயனர் அனுபவம் சீராக இருப்பதை இது உறுதி செய்கிறது. சிக்கலான செயலிகள் அல்லது பணிப்பாய்வுகளுக்கு இது மிக முக்கியமானது.

செயலி நிலை மற்றும் மீட்டமைத்தலைப் புரிந்துகொள்ளுதல்

செயலி நிலை என்பது உங்கள் PWA-இன் தற்போதைய நிலையை வரையறுக்கும் தரவைக் குறிக்கிறது. இதில் பின்வருவன அடங்கும்:

• தற்போது காட்டப்படும் பக்கம் அல்லது காட்சி.
• ஒரு ஷாப்பிங் கார்ட்டின் உள்ளடக்கங்கள்.
• ஒரு படிவத்தில் பயனர் உள்ளீடு.
• ஒரு பக்கத்தில் ஸ்க்ரோல் நிலை.
• அங்கீகார நிலை.

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

PWA டீப் லிங்கிங்கை செயலி நிலை மீட்டமைப்புடன் செயல்படுத்துவது எப்படி

டீப் லிங்கிங்கை செயலி நிலை மீட்டமைப்புடன் செயல்படுத்துவது பல படிகளை உள்ளடக்கியது:

1. உங்கள் URL கட்டமைப்பை வரையறுக்கவும்

திறமையான டீப் லிங்கிங்கிற்கு நன்கு வரையறுக்கப்பட்ட URL கட்டமைப்பு மிக முக்கியமானது. உங்கள் செயலியின் உள்ளடக்கம் மற்றும் செயல்பாடு குறிப்பிட்ட URL-களுடன் எவ்வாறு தொடர்புபடுகின்றன என்பதைக் கவனியுங்கள். புரிந்துகொள்வதற்கும் பராமரிப்பதற்கும் எளிதான ஒரு சீரான மற்றும் தர்க்கரீதியான கட்டமைப்பைப் பயன்படுத்தவும்.

உதாரணம்:

ஒரு இ-காமர்ஸ் PWA-ஐக் கருத்தில் கொள்ளுங்கள். உங்கள் URL கட்டமைப்பு இப்படி இருக்கலாம்:

• / (முகப்புப் பக்கம்)
• /products (அனைத்து தயாரிப்புகளின் பட்டியல்)
• /products/<product-id> (குறிப்பிட்ட தயாரிப்புப் பக்கம், எ.கா., /products/123)
• /cart (ஷாப்பிங் கார்ட்)
• /checkout (செக்அவுட் செயல்முறை)
• /profile (பயனர் சுயவிவரம்)

மேலும் சிக்கலான நிலை நிர்வாகத்திற்கு, நீங்கள் வினவல் அளவுருக்களைப் பயன்படுத்தலாம்:

• /products?category=electronics ("எலக்ட்ரானிக்ஸ்" பிரிவில் உள்ள தயாரிப்புகளின் பட்டியல்)
• /search?q=keyword ("keyword" க்கான தேடல் முடிவுகள்)

2. உள்வரும் URL-களைக் கையாளவும்

உங்கள் PWA உள்வரும் URL-களைக் கையாளும் திறன் கொண்டதாகவும், செயலி நிலையை மீட்டமைக்கத் தேவையான தகவல்களைப் பிரித்தெடுப்பதாகவும் இருக்க வேண்டும். இது பொதுவாக URL-ஐப் பாகுபடுத்தி, அதற்கேற்ப செயலியின் நிலையைப் புதுப்பிக்க JavaScript-ஐப் பயன்படுத்துவதை உள்ளடக்குகிறது. உள்வரும் URL-களைக் கையாள்வதற்கான முதன்மை இடம் உங்கள் PWA-இன் முக்கிய செயலி தர்க்கம் அல்லது ரவுட்டருக்குள் உள்ளது.

JavaScript பயன்படுத்தி உதாரணம்:

            
function handleDeepLink() {
  const url = new URL(window.location.href);
  const path = url.pathname;

  switch (path) {
    case '/products':
      // Display the list of products
      displayProducts();
      break;
    case '/cart':
      // Display the shopping cart
      displayCart();
      break;
    default:
      if (path.startsWith('/products/')) {
        const productId = path.split('/').pop();
        // Display the details of the specified product
        displayProductDetails(productId);
      } else {
        // Display the home page
        displayHomePage();
      }
  }

  // Handle query parameters
  const category = url.searchParams.get('category');
  if (category) {
    // Filter products by category
    filterProductsByCategory(category);
  }

  const searchQuery = url.searchParams.get('q');
  if (searchQuery) {
    // Perform a search
    performSearch(searchQuery);
  }
}

// Call handleDeepLink when the app loads
handleDeepLink();

// Listen for changes in the URL (using the History API)
window.addEventListener('popstate', handleDeepLink);

            

              
                Copy
              
            
          

இந்த உதாரணம் URL-ஐ எவ்வாறு பாகுபடுத்துவது மற்றும் பாதை மற்றும் வினவல் அளவுருக்களின் அடிப்படையில் செயலியின் நிலையைப் புதுப்பிப்பது என்பதைக் காட்டுகிறது. செயலி ஏற்றப்படும்போதும், URL மாறும்போதும் (செயலியினுள் வழிசெலுத்தல் காரணமாக) handleDeepLink செயல்பாடு அழைக்கப்படுகிறது. `popstate` நிகழ்வு கேட்பவரின் பயன்பாட்டைக் கவனியுங்கள். உங்கள் PWA-க்குள் உலாவி பின்/முன் பொத்தான் வழிசெலுத்தலைக் கையாள இது அவசியம்.

3. செயலி நிலையை சேமித்து மீட்டெடுக்கவும்

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

லோக்கல் ஸ்டோரேஜ்

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

லோக்கல் ஸ்டோரேஜ் பயன்படுத்தி உதாரணம்:

            
// Store the current product ID
localStorage.setItem('currentProductId', productId);

// Restore the product ID
const currentProductId = localStorage.getItem('currentProductId');
if (currentProductId) {
  displayProductDetails(currentProductId);
}

            

              
                Copy
              
            
          

செஷன் ஸ்டோரேஜ்

செஷன் ஸ்டோரேஜ் என்பது லோக்கல் ஸ்டோரேஜ் போன்றது, ஆனால் தரவு பயனரின் அமர்வின் காலத்திற்கு மட்டுமே சேமிக்கப்படுகிறது. பயனர் உலாவி தாவல் அல்லது சாளரத்தை மூடும்போது, தரவு தானாகவே நீக்கப்படும். பல அமர்வுகளில் தேவைப்படாத தற்காலிக தரவை சேமிக்க செஷன் ஸ்டோரேஜ் பொருத்தமானது.

குக்கீகள்

குக்கீகள் என்பவை பயனரின் கணினியில் சேமிக்கப்படும் சிறிய உரை கோப்புகள். அவை பெரும்பாலும் பயனர் செயல்பாட்டைக் கண்காணிக்கவும் விருப்பத்தேர்வுகளைச் சேமிக்கவும் பயன்படுத்தப்படுகின்றன. இருப்பினும், குக்கீகளுக்கு ஒரு சிறிய சேமிப்பகத் திறன் மற்றும் தனியுரிமை கவலைகள் உட்பட பல வரம்புகள் உள்ளன. நவீன PWAs பெரும்பாலும் குக்கீகளை விட லோக்கல் ஸ்டோரேஜ் அல்லது IndexedDB-ஐ விரும்புகின்றன.

IndexedDB

IndexedDB என்பது லோக்கல் ஸ்டோரேஜ் அல்லது குக்கீகளை விட சக்திவாய்ந்த மற்றும் நெகிழ்வான சேமிப்பக தீர்வாகும். இது ஒரு NoSQL தரவுத்தளமாகும், இது பயனரின் உலாவியில் பெரிய அளவிலான கட்டமைக்கப்பட்ட தரவைச் சேமிக்க உங்களை அனுமதிக்கிறது. ஒரு பெரிய ஷாப்பிங் கார்ட்டின் உள்ளடக்கங்கள், பயனர் சுயவிவரங்கள் அல்லது ஆஃப்லைன் தரவு போன்ற சிக்கலான செயலி நிலையை சேமிக்க IndexedDB சிறந்தது.

IndexedDB பயன்படுத்தி உதாரணம்:

            
// Open a database
const request = indexedDB.open('myDatabase', 1);

request.onerror = function(event) {
  console.error('Error opening database:', event);
};

request.onsuccess = function(event) {
  const db = event.target.result;

  // Store the current product details
  const transaction = db.transaction(['products'], 'readwrite');
  const objectStore = transaction.objectStore('products');
  const addRequest = objectStore.put({ id: productId, name: productName, price: productPrice });

  addRequest.onsuccess = function(event) {
    console.log('Product added to database');
  };

  // Retrieve the product details
  const getRequest = objectStore.get(productId);

  getRequest.onsuccess = function(event) {
    const product = event.target.result;
    if (product) {
      displayProductDetails(product.id, product.name, product.price);
    }
  };
};

request.onupgradeneeded = function(event) {
  const db = event.target.result;
  const objectStore = db.createObjectStore('products', { keyPath: 'id' });
};

            

              
                Copy
              
            
          

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

சர்வீஸ் வொர்க்கர்கள் மற்றும் கேச்சிங்

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

4. வெவ்வேறு சூழ்நிலைகளைக் கையாளவும்

டீப் லிங்கிங்கை செயலி நிலை மீட்டமைப்புடன் செயல்படுத்தும்போது, வெவ்வேறு சூழ்நிலைகளை நளினமாகக் கையாள்வது முக்கியம்:

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

மேம்பட்ட டீப் லிங்கிங் நுட்பங்கள்

அடிப்படைகளுக்கு அப்பால், உங்கள் PWA-இன் டீப் லிங்கிங் திறன்களை மேம்படுத்த சில மேம்பட்ட நுட்பங்கள் இங்கே:

தாமதமான டீப் லிங்கிங் (Deferred Deep Linking)

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

இது எப்படி வேலை செய்கிறது:

1. பயனர் ஒரு டீப் லிங்கை (எ.கா., ஒரு விளம்பரத்தில்) கிளிக் செய்கிறார்.
2. PWA நிறுவப்படவில்லை என்றால், அவர்கள் ஆப் ஸ்டோர் அல்லது PWA-இன் முகப்புப் பக்கத்திற்கு திருப்பி விடப்படுகிறார்கள்.
3. ஒரு கண்காணிப்பு சேவை டீப் லிங்க் தகவலை (எ.கா., ஒரு குக்கீ அல்லது லோக்கல் ஸ்டோரேஜில்) சேமிக்கிறது.
4. பயனர் PWA-ஐ நிறுவித் திறக்கும்போது, செயலி சேமிக்கப்பட்ட டீப் லிங்க் தகவலை மீட்டெடுக்கிறது.
5. செயலி பயனரை உத்தேசிக்கப்பட்ட உள்ளடக்கத்திற்கு வழிநடத்துகிறது.

பல மூன்றாம் தரப்பு சேவைகள் தாமதமான டீப் லிங்கிங் தீர்வுகளை வழங்குகின்றன.

வலைச் செயலி மேனிஃபெஸ்டைப் பயன்படுத்துதல்

வலைச் செயலி மேனிஃபெஸ்ட் (manifest.json) உங்கள் PWA பற்றிய தகவல்களை, அதன் பெயர், ஐகான்கள் மற்றும் தொடக்க URL உட்பட, உலாவிக்கு வழங்குகிறது. PWA முகப்புத் திரையில் இருந்து தொடங்கப்படும்போது திறக்கப்பட வேண்டிய URL-ஐக் குறிப்பிட, மேனிஃபெஸ்டில் உள்ள start_url பண்பைப் பயன்படுத்தலாம். இது அடிப்படை டீப் லிங்கிங் செயல்பாட்டை செயல்படுத்தப் பயன்படுத்தப்படலாம்.

உதாரணம்:

            
{
  "name": "My PWA",
  "short_name": "PWA",
  "start_url": "/products/123",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

            

              
                Copy