ഫ്രണ്ട്എൻഡ് കാഷിംഗ് തന്ത്രങ്ങൾ: HTTP കാഷും സർവീസ് വർക്കർ കാഷും

വെബ് ഡെവലപ്മെന്റ് ലോകത്ത്, വെബ്സൈറ്റ് പ്രകടനം ഒപ്റ്റിമൈസ് ചെയ്യുന്നത് വളരെ പ്രധാനമാണ്. ഒരു 느린 വെബ്സൈറ്റ് ഉപയോക്താക്കൾക്ക് നിരാശയുണ്ടാക്കാനും, ബൗൺസ് നിരക്ക് വർദ്ധിപ്പിക്കാനും, ആത്യന്തികമായി നിങ്ങളുടെ ബിസിനസ്സിന് ദോഷകരമായി ബാധിക്കാനും സാധ്യതയുണ്ട്. കാഷിംഗ്, മുൻപ് ലഭിച്ച റിസോഴ്സുകൾ സംഭരിക്കുകയും വീണ്ടും ഉപയോഗിക്കുകയും ചെയ്യുന്ന ഒരു സാങ്കേതികവിദ്യയാണ്, ഇത് വെബ്സൈറ്റ് വേഗത മെച്ചപ്പെടുത്തുന്നതിലും സെർവർ ലോഡ് കുറയ്ക്കുന്നതിലും പ്രധാന പങ്ക് വഹിക്കുന്നു. ഈ ലേഖനം രണ്ട് പ്രധാന ഫ്രണ്ട്എൻഡ് കാഷിംഗ് തന്ത്രങ്ങളെക്കുറിച്ച് സമഗ്രമായ ഒരു അവലോകനം നൽകുന്നു: HTTP കാഷിംഗ്, സർവീസ് വർക്കർ കാഷിംഗ്.

കാഷിംഗ് അടിസ്ഥാനകാര്യങ്ങൾ മനസ്സിലാക്കുന്നു

കാഷിംഗ് എന്നത് HTML, CSS, JavaScript, ചിത്രങ്ങൾ, മറ്റ് അസറ്റുകൾ പോലുള്ള റിസോഴ്സുകളുടെ പകർപ്പുകൾ ഉപയോക്താവിന് അടുത്ത് സംഭരിക്കുന്നതിനെ ഉൾക്കൊള്ളുന്നു. ഒരു ഉപയോക്താവ് ഒരു റിസോഴ്സ് ആവശ്യപ്പെടുമ്പോൾ, ബ്രൗസറോ ഒരു കാഷിംഗ് ഇടനിലക്കാരോ ആദ്യം പരിശോധിക്കുന്നത് കാഷ് ചെയ്ത പകർപ്പ് ലഭ്യമാണോ എന്നാണ്. അങ്ങനെയാണെങ്കിൽ (ഒരു "കാഷ് ഹിറ്റ്"), റിസോഴ്സ് കാഷിൽ നിന്ന് നൽകുന്നു, ഇത് യഥാർത്ഥ സെർവറിലേക്കുള്ള യാത്ര ഒഴിവാക്കുന്നു. ഇത് ലേറ്റൻസി ഗണ്യമായി കുറയ്ക്കുകയും ലോഡിംഗ് സമയം മെച്ചപ്പെടുത്തുകയും ചെയ്യുന്നു.

ബ്രൗസർ കാഷ്, പ്രോക്സി കാഷ്, സെർവർ സൈഡ് കാഷ് എന്നിവയുൾപ്പെടെ നിരവധി തലത്തിലുള്ള കാഷിംഗ് ഉണ്ട്. ഈ ലേഖനം ഫ്രണ്ട്എൻഡ് കാഷിംഗിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്നു, പ്രത്യേകിച്ച് ബ്രൗസറിന്റെ ബിൽറ്റ്-ഇൻ HTTP കാഷും കൂടുതൽ വിപുലമായ സർവീസ് വർക്കർ കാഷും എങ്ങനെ പ്രയോജനപ്പെടുത്താം.

HTTP കാഷിംഗ്: ബ്രൗസർ കഴിവുകൾ പ്രയോജനപ്പെടുത്തുന്നു

HTTP കാഷിംഗ് എന്നത് റിസോഴ്സുകൾ സംഭരിക്കാനും വീണ്ടെടുക്കാനുമുള്ള ബ്രൗസറിന്റെ ബിൽറ്റ്-ഇൻ സംവിധാനമാണ്. ഒരു അഭ്യർത്ഥനയ്ക്കുള്ള പ്രതികരണമായി സെർവർ അയച്ച HTTP ഹെഡറുകൾ ഇത് നിയന്ത്രിക്കുന്നു. ഈ ഹെഡറുകൾ ഒരു റിസോഴ്സ് എത്രത്തോളം സമയം കാഷ് ചെയ്യണം, ഏത് സാഹചര്യങ്ങളിൽ അത് സാധുവായി കണക്കാക്കണം എന്നതിനെക്കുറിച്ചുള്ള നിർദ്ദേശങ്ങൾ ബ്രൗസറിന് നൽകുന്നു.

പ്രധാന HTTP കാഷ് ഹെഡറുകൾ

• Cache-Control: HTTP കാഷിംഗ് നിയന്ത്രിക്കുന്നതിനുള്ള ഏറ്റവും പ്രധാനപ്പെട്ട ഹെഡർ ഇതാണ്. വിവിധ നിർദ്ദേശങ്ങൾ വ്യക്തമാക്കാൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നു, ഉദാഹരണത്തിന്:
• max-age=സെക്കൻഡുകൾ: ഒരു റിസോഴ്സ് ഫ്രഷ് ആയി കണക്കാക്കുന്ന പരമാവധി സമയം വ്യക്തമാക്കുന്നു. ഈ സമയത്തിനു ശേഷം, ബ്രൗസർ സെർവറുമായി കാഷ് വീണ്ടും സാധുവാക്കണം. ഉദാഹരണം: Cache-Control: max-age=3600 (1 മണിക്കൂർ കാഷ് ചെയ്യുക).
• s-maxage=സെക്കൻഡുകൾ: max-age പോലെ തന്നെ, എന്നാൽ CDN പോലുള്ള പങ്കിട്ട കാഷുകൾക്ക് പ്രത്യേകമായി ഇത് ബാധകമാണ്. ഉദാഹരണം: Cache-Control: max-age=3600, s-maxage=86400 (ബ്രൗസറിൽ 1 മണിക്കൂർ, CDN ൽ 1 ദിവസം കാഷ് ചെയ്യുക).
• public: പ്രതികരണം ഏതൊരു കാഷും, പങ്കിട്ട കാഷുകൾ ഉൾപ്പെടെ, കാഷ് ചെയ്യാൻ കഴിയുമെന്ന് സൂചിപ്പിക്കുന്നു.
• private: പ്രതികരണം ബ്രൗസറിന് മാത്രം കാഷ് ചെയ്യാൻ കഴിയുമെന്ന് സൂചിപ്പിക്കുന്നു, പങ്കിട്ട കാഷുകൾക്ക് കഴിയില്ല. ഉപയോക്താവിൻ്റെ പ്രത്യേക ഡാറ്റയ്ക്ക് ഉപയോഗപ്രദമാണ്.
• no-cache: അത് ഫ്രഷ് ആണെങ്കിൽ പോലും, അത് ഉപയോഗിക്കുന്നതിന് മുമ്പ് സെർവറുമായി കാഷ് വീണ്ടും സാധുവാക്കാൻ ബ്രൗസറിനെ നിർബന്ധിതരാക്കുന്നു.
• no-store: പ്രതികരണം യാതൊരു കാരണവശാലും കാഷ് ചെയ്യുന്നത് ബ്രൗസർ തടയുന്നു.
• Expires: റിസോഴ്സ് കാലഹരണപ്പെടുന്ന ഒരു കൃത്യമായ തീയതിയും സമയവും വ്യക്തമാക്കുന്ന പഴയ ഹെഡർ. രണ്ടും ഉണ്ടെങ്കിൽ Cache-Control സാധാരണയായി Expires നെ മറികടക്കുന്നു. ഉദാഹരണം: Expires: Wed, 21 Oct 2024 07:28:00 GMT
• ETag: ഒരു റിസോഴ്സിന്റെ ഒരു പ്രത്യേക പതിപ്പിനുള്ള ഒരു അദ്വിതീയ ഐഡന്റിഫയർ. വീണ്ടും സാധുവാക്കുന്ന സമയത്ത് ബ്രൗസർ If-None-Match അഭ്യർത്ഥന ഹെഡറിൽ ETag അയയ്ക്കുന്നു. റിസോഴ്സ് മാറ്റമില്ലെങ്കിൽ, സെർവർ 304 Not Modified പ്രതികരണം നൽകുന്നു, ഇത് ബ്രൗസറിന് കാഷ് ചെയ്ത പതിപ്പ് ഉപയോഗിക്കാമെന്ന് സൂചിപ്പിക്കുന്നു.
• Last-Modified: റിസോഴ്സ് അവസാനമായി പരിഷ്കരിച്ച സമയം സൂചിപ്പിക്കുന്നു. വീണ്ടും സാധുവാക്കുന്ന സമയത്ത് ബ്രൗസർ If-Modified-Since അഭ്യർത്ഥന ഹെഡറിൽ Last-Modified തീയതി അയയ്ക്കുന്നു. ETag പോലെ തന്നെ, റിസോഴ്സ് മാറ്റമില്ലെങ്കിൽ സെർവർ 304 Not Modified പ്രതികരണം നൽകാൻ കഴിയും.

HTTP കാഷിംഗിൻ്റെ പ്രായോഗിക ഉദാഹരണങ്ങൾ

ഉദാഹരണം 1: സ്റ്റാറ്റിക് അസറ്റുകൾ കാഷ് ചെയ്യൽ (ചിത്രങ്ങൾ, CSS, JavaScript):

അപൂർവ്വമായി മാറുന്ന സ്റ്റാറ്റിക് അസറ്റുകൾക്ക്, നിങ്ങൾക്ക് ഒരു നീണ്ട max-age മൂല്യം സജ്ജമാക്കാം:

            Cache-Control: public, max-age=31536000  

            

              
                Copy
              
            
          

ഇത് റിസോഴ്സ് ഒരു വർഷത്തേക്ക് (31,536,000 സെക്കൻഡ്) കാഷ് ചെയ്യാനും ഏത് കാഷും (public) കാഷ് ചെയ്യാമെന്നും ബ്രൗസറിനോട് പറയുന്നു.

ഉദാഹരണം 2: വീണ്ടും സാധുവാക്കലോടെ ഡൈനാമിക് ഉള്ളടക്കം നൽകുന്നത്:

കൂടുതൽ വേഗത്തിൽ മാറുന്ന ഡൈനാമിക് ഉള്ളടക്കത്തിനായി, നിങ്ങൾക്ക് no-cache ഉം ETag അല്ലെങ്കിൽ Last-Modified ഉം വീണ്ടും സാധുവാക്കലിനായി ഉപയോഗിക്കാം:

            Cache-Control: no-cache, must-revalidate
ETag: "unique-etag-value"

            

              
                Copy
              
            
          

ഇത് ബ്രൗസർ അത് ഉപയോഗിക്കുന്നതിന് മുമ്പ് സെർവറുമായി കാഷ് വീണ്ടും സാധുവാക്കാൻ നിർബന്ധിതരാക്കുന്നു. റിസോഴ്സ് മാറിയിട്ടുണ്ടോ എന്ന് നിർണ്ണയിക്കാൻ സെർവറിന് ETag ഉപയോഗിക്കാൻ കഴിയും, മാറിയിട്ടില്ലെങ്കിൽ 304 Not Modified പ്രതികരണം നൽകാൻ കഴിയും.

ഉദാഹരണം 3: പതിപ്പ് ചെയ്ത അസറ്റുകൾ നൽകുന്നത്:

ഒരു സാധാരണ രീതി അസറ്റ് ഫയൽ നാമത്തിൽ ഒരു പതിപ്പ് നമ്പർ ഉൾപ്പെടുത്തുന്നതാണ് (ഉദാഹരണത്തിന്, style.v1.css). അസറ്റ് മാറുമ്പോൾ, നിങ്ങൾ പതിപ്പ് നമ്പർ അപ്ഡേറ്റ് ചെയ്യുന്നു, ഇത് ബ്രൗസറിനെ പുതിയ പതിപ്പ് ഡൗൺലോഡ് ചെയ്യാൻ നിർബന്ധിതരാക്കുന്നു. പഴയ ഉള്ളടക്കം നൽകുന്നതിനെക്കുറിച്ച് ചിന്തയില്ലാതെ അസറ്റുകൾ കർശനമായി കാഷ് ചെയ്യാൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നു.

HTTP കാഷിംഗിനായുള്ള മികച്ച രീതികൾ

• CDN ഉപയോഗിക്കുക: കണ്ടന്റ് ഡെലിവറി നെറ്റ്‌വർക്കുകൾ (CDNs) നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ ഉള്ളടക്കം ഉപയോക്താക്കൾക്ക് സമീപമുള്ള വിവിധ സെർവറുകളിലായി വിതരണം ചെയ്യുന്നു. ഇത് ലേറ്റൻസി കുറയ്ക്കുകയും ലോഡിംഗ് സമയം മെച്ചപ്പെടുത്തുകയും ചെയ്യുന്നു, പ്രത്യേകിച്ച് ലോകത്തിന്റെ വിവിധ ഭാഗങ്ങളിലുള്ള ഉപയോക്താക്കൾക്ക്. ജപ്പാനിലെ ഒരു വെബ്സൈറ്റ് യൂറോപ്പിലെ ഒരു സെർവറിൽ നിന്ന് ചിത്രങ്ങൾ ലോഡ് ചെയ്യുന്നത് ഏഷ്യയിലെ സെർവറുകളുള്ള ഒരു CDN-ൽ നിന്ന് വളരെയധികം പ്രയോജനം ചെയ്യും.
• ബ്രൗസർ കാഷിംഗ് പ്രയോജനപ്പെടുത്തുക: നിങ്ങളുടെ എല്ലാ റിസോഴ്സുകൾക്കും അനുയോജ്യമായ HTTP കാഷ് ഹെഡറുകൾ അയയ്ക്കാൻ നിങ്ങളുടെ സെർവർ കോൺഫിഗർ ചെയ്യുക.
• കാഷ് ബസ്റ്റിംഗ് ടെക്നിക്കുകൾ ഉപയോഗിക്കുക: അവ മാറുമ്പോൾ അപ്ഡേറ്റ് ചെയ്ത റിസോഴ്സുകൾ ഡൗൺലോഡ് ചെയ്യാൻ ബ്രൗസറുകളെ നിർബന്ധിതരാക്കാൻ പതിപ്പാക്കൽ അല്ലെങ്കിൽ ക്വറി പാരാമീറ്ററുകൾ പോലുള്ള ടെക്നിക്കുകൾ ഉപയോഗിക്കുക.
• കാഷ് പ്രകടനം നിരീക്ഷിക്കുക: കാഷ് ഹിറ്റ് നിരക്കുകൾ നിരീക്ഷിക്കാനും മെച്ചപ്പെടുത്താനുള്ള മേഖലകൾ കണ്ടെത്താനും ബ്രൗസർ ഡെവലപ്പർ ടൂളുകളും സെർവർ സൈഡ് അനലിറ്റിക്സും ഉപയോഗിക്കുക.

സർവീസ് വർക്കർ കാഷ്: നൂതന നിയന്ത്രണവും ഓഫ്‌ലൈൻ കഴിവുകളും

സർവീസ് വർക്കറുകൾ പശ്ചാത്തലത്തിൽ പ്രവർത്തിക്കുന്ന ജാവാസ്ക്രിപ്റ്റ് ഫയലുകളാണ്, പ്രധാന ബ്രൗസർ ത്രെഡിൽ നിന്ന് വേറിട്ട്. അവ ബ്രൗസറിനും നെറ്റ്‌വർക്കിനും ഇടയിൽ ഒരു പ്രോക്സിയായി പ്രവർത്തിക്കുന്നു, നെറ്റ്‌വർക്ക് അഭ്യർത്ഥനകൾ തടയുവാനും നൂതന കാഷിംഗ് തന്ത്രങ്ങൾ നടപ്പിലാക്കാനും നിങ്ങളെ അനുവദിക്കുന്നു.

പ്രോഗ്രസീവ് വെബ് ആപ്പുകളുടെ (PWAs) പിന്നിലെ പ്രധാന സാങ്കേതികവിദ്യയാണ് സർവീസ് വർക്കറുകൾ, ഓഫ്‌ലൈൻ ലഭ്യത, പുഷ് അറിയിപ്പുകൾ, പശ്ചാത്തല സമന്വയം പോലുള്ള സവിശേഷതകൾ പ്രവർത്തനക്ഷമമാക്കുന്നു.

സർവീസ് വർക്കറുകൾ എങ്ങനെ പ്രവർത്തിക്കുന്നു

1. രജിസ്ട്രേഷൻ: നിങ്ങളുടെ വെബ് പേജ് വഴി സർവീസ് വർക്കർ രജിസ്റ്റർ ചെയ്യുന്നു.
2. ഇൻസ്റ്റാളേഷൻ: ബ്രൗസറിൽ സർവീസ് വർക്കർ ഇൻസ്റ്റാൾ ചെയ്യുന്നു. ഇവിടെയാണ് നിങ്ങൾ സാധാരണയായി പ്രധാനപ്പെട്ട റിസോഴ്സുകൾ മുൻകൂട്ടി കാഷ് ചെയ്യുന്നത്.
3. സജീവമാക്കൽ: സർവീസ് വർക്കർ സജീവമാകുകയും അതിൻ്റെ പരിധിയിലുള്ള പേജുകൾക്കുള്ള നെറ്റ്‌വർക്ക് അഭ്യർത്ഥനകൾ നിയന്ത്രിക്കാൻ തുടങ്ങുകയും ചെയ്യുന്നു.
4. തടയൽ: സർവീസ് വർക്കർ നെറ്റ്‌വർക്ക് അഭ്യർത്ഥനകൾ തടയുകയും കാഷിൽ നിന്ന് റിസോഴ്സുകൾ നൽകുകയോ, നെറ്റ്‌വർക്കിൽ നിന്ന് ലഭ്യമാക്കുകയോ, അല്ലെങ്കിൽ ഒരു കൃത്രിമ പ്രതികരണം സൃഷ്ടിക്കുകയോ ചെയ്യാൻ തിരഞ്ഞെടുക്കുമോ.

കാഷിംഗിനായുള്ള പ്രധാന സർവീസ് വർക്കർ API-കൾ

• Cache API: കാഷ് ചെയ്ത പ്രതികരണങ്ങൾ സംഭരിക്കാനും വീണ്ടെടുക്കാനുമുള്ള ഒരു സംവിധാനം നൽകുന്നു. പേരുള്ള കാഷുകൾ സൃഷ്ടിക്കാനും എൻട്രികൾ ചേർക്കാനും അപ്ഡേറ്റ് ചെയ്യാനും ഇല്ലാതാക്കാനും ഇത് നിങ്ങളെ അനുവദിക്കുന്നു.
• Fetch API: സർവീസ് വർക്കറിൽ നിന്ന് നെറ്റ്‌വർക്ക് അഭ്യർത്ഥനകൾ നടത്താൻ ഉപയോഗിക്കുന്നു.
• addEventListener('install', ...): സർവീസ് വർക്കർ ആദ്യമായി ഇൻസ്റ്റാൾ ചെയ്യുമ്പോൾ പ്രവർത്തിക്കുന്ന ഇവന്റ് ഹാൻഡ്ലർ. പ്രധാനപ്പെട്ട അസറ്റുകൾ മുൻകൂട്ടി കാഷ് ചെയ്യാൻ ഇത് സാധാരണയായി ഉപയോഗിക്കുന്നു.
• addEventListener('activate', ...): സർവീസ് വർക്കർ സജീവമാകുമ്പോൾ പ്രവർത്തിക്കുന്ന ഇവന്റ് ഹാൻഡ്ലർ. പഴയ കാഷുകൾ വൃത്തിയാക്കാൻ ഇത് സാധാരണയായി ഉപയോഗിക്കുന്നു.
• addEventListener('fetch', ...): നെറ്റ്‌വർക്ക് അഭ്യർത്ഥനകൾ തടയുന്ന ഇവന്റ് ഹാൻഡ്ലർ. ഇവിടെയാണ് കാഷിംഗ് ലോജിക് സ്ഥിതി ചെയ്യുന്നത്.

സർവീസ് വർക്കറുകൾ ഉപയോഗിച്ചുള്ള കാഷിംഗ് തന്ത്രങ്ങൾ

വിവിധ തരം റിസോഴ്സുകൾക്കും നെറ്റ്‌വർക്ക് സാഹചര്യങ്ങൾക്കും അനുസരിച്ചുള്ള വിവിധ കാഷിംഗ് തന്ത്രങ്ങൾ നടപ്പിലാക്കാൻ സർവീസ് വർക്കറുകൾ നിങ്ങളെ സഹായിക്കുന്നു. ചില സാധാരണ തന്ത്രങ്ങൾ ഇതാ:

• Cache First: ലഭ്യമാണെങ്കിൽ റിസോഴ്സ് എല്ലായ്പ്പോഴും കാഷിൽ നിന്ന് നൽകുക. അത് കാഷിൽ ഇല്ലെങ്കിൽ, നെറ്റ്‌വർക്കിൽ നിന്ന് ലഭ്യമാക്കി ഭാവി ഉപയോഗത്തിനായി കാഷിൽ സംഭരിക്കുക. ഇത് വളരെ അപൂർവ്വമായി മാറുന്ന സ്റ്റാറ്റിക് അസറ്റുകൾക്ക് അനുയോജ്യമാണ്.
• Network First: എല്ലായ്പ്പോഴും ആദ്യം നെറ്റ്‌വർക്കിൽ നിന്ന് റിസോഴ്സ് ലഭ്യമാക്കാൻ ശ്രമിക്കുക. നെറ്റ്‌വർക്ക് ലഭ്യമാണെങ്കിൽ, റിസോഴ്സ് നൽകി കാഷ് അപ്ഡേറ്റ് ചെയ്യുക. നെറ്റ്‌വർക്ക് ലഭ്യമല്ലെങ്കിൽ, കാഷിൽ നിന്ന് റിസോഴ്സ് നൽകുക. ഇത് സാധ്യമായത്ര ഏറ്റവും പുതിയതായിരിക്കേണ്ട ഡൈനാമിക് ഉള്ളടക്കത്തിന് അനുയോജ്യമാണ്.
• Cache, then Network: കാഷിൽ നിന്ന് റിസോഴ്സ് ഉടനടി നൽകുക, അതേസമയം നെറ്റ്‌വർക്കിൽ നിന്ന് ഏറ്റവും പുതിയ പതിപ്പ് ലഭ്യമാക്കുന്നു. അത് വരുമ്പോൾ പുതിയ പതിപ്പ് ഉപയോഗിച്ച് കാഷ് അപ്ഡേറ്റ് ചെയ്യുക. ഇത് വേഗതയേറിയ ആദ്യ ലോഡ് നൽകുകയും ഉപയോക്താവിന് ഏറ്റവും പുതിയ ഉള്ളടക്കം അവസാനം ലഭിക്കുമെന്ന് ഉറപ്പാക്കുകയും ചെയ്യുന്നു.
• Stale-While-Revalidate: കാഷിൽ നിന്ന് റിസോഴ്സ് ഉടനടി നൽകുക. പശ്ചാത്തലത്തിൽ, നെറ്റ്‌വർക്കിൽ നിന്ന് ഏറ്റവും പുതിയ പതിപ്പ് ലഭ്യമാക്കി കാഷ് അപ്ഡേറ്റ് ചെയ്യുക. അടുത്ത തവണ റിസോഴ്സ് അഭ്യർത്ഥിക്കുമ്പോൾ, അപ്ഡേറ്റ് ചെയ്ത പതിപ്പ് നൽകപ്പെടും. ഈ തന്ത്രം വേഗതയേറിയ ആദ്യ ലോഡ് നൽകുകയും ഏറ്റവും പുതിയ പതിപ്പ് ലഭിക്കുമെന്ന് ഉപയോക്താവിന് ഉറപ്പുനൽകുകയും ചെയ്യുന്നു, ആദ്യ അഭ്യർത്ഥനയെ തടയുകയുമില്ല.
• Network Only: എല്ലായ്പ്പോഴും നെറ്റ്‌വർക്കിൽ നിന്ന് റിസോഴ്സ് ലഭ്യമാക്കുക. ഒരിക്കലും കാഷ് ഉപയോഗിക്കരുത്. ഒരിക്കലും കാഷ് ചെയ്യരുതാത്ത റിസോഴ്സുകൾക്ക് ഇത് ഉചിതമാണ്, ഉദാഹരണത്തിന്, സെൻസിറ്റീവ് ഉപയോക്തൃ ഡാറ്റ.
• Cache Only: എല്ലായ്പ്പോഴും കാഷിൽ നിന്ന് റിസോഴ്സ് നൽകുക. ഒരിക്കലും നെറ്റ്‌വർക്കിൽ നിന്ന് ലഭ്യമാക്കരുത്. റിസോഴ്സ് എല്ലായ്പ്പോഴും ഓഫ്‌ലൈനിൽ ലഭ്യമാണെന്ന് ഉറപ്പാക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്ന സാഹചര്യങ്ങൾക്ക് ഇത് ഉപയോഗപ്രദമാണ്.

സർവീസ് വർക്കർ കാഷിംഗിൻ്റെ പ്രായോഗിക ഉദാഹരണങ്ങൾ

ഉദാഹരണം 1: സ്റ്റാറ്റിക് അസറ്റുകൾക്ക് Cache First തന്ത്രം:

            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;
            }

            // 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.
            const responseToCache = response.clone();

            caches.open('my-site-cache')
              .then(cache => {
                cache.put(event.request, responseToCache);
              });

            return response;
          }
        );
      })
  );
});

            

              
                Copy
              
            
          

ഈ കോഡ് സ്നിപ്പറ്റ് Cache First തന്ത്രം വിശദീകരിക്കുന്നു. അഭ്യർത്ഥന ചെയ്ത റിസോഴ്സ് കാഷിൽ ലഭ്യമാണോ എന്ന് സർവീസ് വർക്കർ ആദ്യം പരിശോധിക്കുന്നു. അങ്ങനെയാണെങ്കിൽ, അത് കാഷിൽ നിന്ന് റിസോഴ്സ് നൽകുന്നു. ഇല്ലെങ്കിൽ, അത് നെറ്റ്‌വർക്കിൽ നിന്ന് റിസോഴ്സ് ലഭ്യമാക്കി, കാഷിൽ സംഭരിച്ച്, തുടർന്ന് ബ്രൗസറിന് നൽകുന്നു.

ഉദാഹരണം 2: ഡൈനാമിക് ഉള്ളടക്കത്തിനായി Stale-While-Revalidate തന്ത്രം:

            self.addEventListener('fetch', event => {
  event.respondWith(
    caches.open('my-site-cache').then(cache => {
      return cache.match(event.request).then(response => {
        const fetchPromise = fetch(event.request).then(networkResponse => {
          cache.put(event.request, networkResponse.clone());
          return networkResponse;
        });
        return response || fetchPromise;
      })
    })
  );
});

            

              
                Copy
              
            
          

ഈ കോഡ് സ്നിപ്പറ്റ് Stale-While-Revalidate തന്ത്രം വിശദീകരിക്കുന്നു. സർവീസ് വർക്കർ കാഷിൽ നിന്ന് റിസോഴ്സ് ഉടനടി നൽകുന്നു. പശ്ചാത്തലത്തിൽ, അത് നെറ്റ്‌വർക്കിൽ നിന്ന് ഏറ്റവും പുതിയ പതിപ്പ് ലഭ്യമാക്കി കാഷ് അപ്ഡേറ്റ് ചെയ്യുന്നു. അടുത്ത തവണ റിസോഴ്സ് അഭ്യർത്ഥിക്കുമ്പോൾ, അപ്ഡേറ്റ് ചെയ്ത പതിപ്പ് നൽകപ്പെടും.

സർവീസ് വർക്കർ കാഷിംഗിനായുള്ള മികച്ച രീതികൾ

• ഒരു കാഷിംഗ് തന്ത്ര ലൈബ്രറി ഉപയോഗിക്കുക: Workbox പോലുള്ള ലൈബ്രറികൾ പ്രീ-ബിൽറ്റ് കാഷിംഗ് തന്ത്രങ്ങളും യൂട്ടിലിറ്റികളും നൽകിക്കൊണ്ട് സർവീസ് വർക്കർ ഡെവലപ്മെന്റ് ലളിതമാക്കുന്നു. ഇത് നിങ്ങൾക്ക് സമയവും പരിശ്രമവും ലാഭിക്കാനും നിങ്ങളുടെ കാഷിംഗ് ലോജിക് ശക്തവും വിശ്വസനീയവുമാണെന്ന് ഉറപ്പാക്കാനും കഴിയും.
• കാഷ് പതിപ്പുകൾ കൈകാര്യം ചെയ്യുക: നിങ്ങളുടെ സർവീസ് വർക്കർ അപ്ഡേറ്റ് ചെയ്യുമ്പോൾ, നിങ്ങൾ പഴയ കാഷ് അസാധുവാക്കുകയും പുതിയത് സൃഷ്ടിക്കുകയും വേണം. ഇത് പഴയ റിസോഴ്സുകൾ നൽകുന്നത് തടയുന്നു. പഴയ കാഷുകൾ വൃത്തിയാക്കാൻ activate ഇവന്റ് ഉപയോഗിക്കുക.
• പിഴവുകൾ നന്നായി കൈകാര്യം ചെയ്യുക: നെറ്റ്‌വർക്ക് പിഴവുകളും കാഷ് മിസ്സുകളും നന്നായി കൈകാര്യം ചെയ്യാൻ പിഴവ് കൈകാര്യം ചെയ്യൽ നടപ്പിലാക്കുക. ബാക്ക്ഫാൾ ഉള്ളടക്കം നൽകുക അല്ലെങ്കിൽ റിസോഴ്സ് ലഭ്യമല്ലെന്ന് ഉപയോക്താവിനെ അറിയിക്കുക.
• സമഗ്രമായി പരിശോധിക്കുക: നിങ്ങളുടെ സർവീസ് വർക്കർ കാഷിംഗ് ലോജിക് വിവിധ നെറ്റ്‌വർക്ക് സാഹചര്യങ്ങളിലും ബ്രൗസർ പരിതസ്ഥിതികളിലും ഇത് പ്രതീക്ഷിച്ചപോലെ പ്രവർത്തിക്കുന്നുവെന്ന് ഉറപ്പാക്കാൻ പരിശോധിക്കുക. കാഷും നെറ്റ്‌വർക്ക് അഭ്യർത്ഥനകളും നിരീക്ഷിക്കാൻ ബ്രൗസർ ഡെവലപ്പർ ടൂളുകൾ ഉപയോഗിക്കുക.
• ഉപയോക്തൃ അനുഭവത്തെ പരിഗണിക്കുക: ഉപയോക്തൃ അനുഭവത്തെ മനസ്സിൽ കണ്ട് നിങ്ങളുടെ കാഷിംഗ് തന്ത്രം രൂപകൽപ്പന ചെയ്യുക. ഒരു റിസോഴ്സ് നെറ്റ്‌വർക്കിൽ നിന്നോ കാഷിൽ നിന്നോ ലഭ്യമാക്കുകയാണെന്ന് ഉപയോക്താവിന് ഫീഡ്‌ബാക്ക് നൽകുക. വളരെക്കാലം പഴകിയ ഉള്ളടക്കം നൽകുന്നത് ഒഴിവാക്കുക.

HTTP കാഷും സർവീസ് വർക്കർ കാഷും താരതമ്യം ചെയ്യുന്നു

HTTP കാഷിംഗ്, സർവീസ് വർക്കർ കാഷിംഗ് എന്നിവ രണ്ടും വെബ്സൈറ്റ് പ്രകടനം മെച്ചപ്പെടുത്താൻ ലക്ഷ്യമിടുന്നുണ്ടെങ്കിലും, അവയുടെ കഴിവുകളിലും ഉപയോഗ സാഹചര്യങ്ങളിലും വ്യത്യാസങ്ങളുണ്ട്.

ആഗോള പരിഗണനകൾ കാഷിംഗിനായി

ഒരു ആഗോള പ്രേക്ഷകർക്കായി കാഷിംഗ് തന്ത്രങ്ങൾ നടപ്പിലാക്കുമ്പോൾ, താഴെ പറയുന്നവ പരിഗണിക്കുക:

• നെറ്റ്‌വർക്ക് സാഹചര്യങ്ങൾ: വിവിധ പ്രദേശങ്ങളിലെ ഉപയോക്താക്കൾക്ക് വ്യത്യസ്ത നെറ്റ്‌വർക്ക് വേഗതയും വിശ്വാസ്യതയും അനുഭവപ്പെട്ടേക്കാം. ഈ വ്യത്യാസങ്ങളെ ഉൾക്കൊള്ളാൻ നിങ്ങളുടെ കാഷിംഗ് തന്ത്രം അനുയോജിപ്പിക്കുക. ഉദാഹരണത്തിന്, വിശ്വസനീയമല്ലാത്ത ഇന്റർനെറ്റ് ലഭ്യതയുള്ള പ്രദേശങ്ങളിലെ ഉപയോക്താക്കൾ ശക്തമായ ഓഫ്‌ലൈൻ പിന്തുണയിൽ നിന്ന് വളരെയധികം പ്രയോജനം ചെയ്യും.
• CDN കവറേജ്: എല്ലാ പ്രദേശങ്ങളിലെയും ഉപയോക്താക്കൾക്ക് നിങ്ങളുടെ ഉള്ളടക്കം വേഗത്തിൽ ലഭ്യമാക്കാൻ ആഗോള സെർവറുകളുള്ള ഒരു CDN തിരഞ്ഞെടുക്കുക. നിങ്ങളുടെ പ്രേക്ഷകർക്ക് നിർണായകമായ പ്രദേശങ്ങളിൽ PoPs (Points of Presence) ഉണ്ടെന്ന് CDN ന് ഉറപ്പാക്കുക.
• ഡാറ്റാ സ്വകാര്യത: ഉപയോക്തൃ-നിർദ്ദിഷ്ട ഡാറ്റ കാഷ് ചെയ്യുമ്പോൾ വിവിധ രാജ്യങ്ങളിലെ ഡാറ്റാ സ്വകാര്യത ചട്ടങ്ങൾ ശ്രദ്ധിക്കുക. GDPR, CCPA പോലുള്ള നിയമങ്ങൾ പാലിക്കുന്നുണ്ടെന്ന് ഉറപ്പാക്കുക.
• ഭാഷയും പ്രാദേശികവൽക്കരണവും: വിവിധ ഭാഷകളിലും പ്രദേശങ്ങളിലുമുള്ള ഉപയോക്താക്കൾക്ക് മികച്ച അനുഭവം നൽകുന്നതിനായി നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ പ്രാദേശികവൽക്കരിച്ച പതിപ്പുകൾ കാഷ് ചെയ്യുന്നത് പരിഗണിക്കുക.
• കാഷ് അസാധുവാക്കൽ: ഉള്ളടക്കം പതിവായി മാറുമ്പോൾ പോലും ഉപയോക്താക്കൾക്ക് എല്ലായ്പ്പോഴും ഏറ്റവും പുതിയ ഉള്ളടക്കം ലഭിക്കുമെന്ന് ഉറപ്പാക്കാൻ വിശ്വസനീയമായ കാഷ് അസാധുവാക്കൽ തന്ത്രം നടപ്പിലാക്കുക. പ്രാദേശികവൽക്കരിച്ച ഉള്ളടക്ക അപ്ഡേറ്റുകളിൽ പ്രത്യേക ശ്രദ്ധ നൽകുക.

ഉപസംഹാരം

ഫ്രണ്ട്എൻഡ് കാഷിംഗ് എന്നത് വെബ്സൈറ്റ് പ്രകടനം ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിനും ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്തുന്നതിനും അത്യന്താപേക്ഷിതമായ ഒരു സാങ്കേതികവിദ്യയാണ്. HTTP കാഷിംഗ്, സർവീസ് വർക്കർ കാഷിംഗ് എന്നിവ പ്രയോജനപ്പെടുത്തുന്നതിലൂടെ, നിങ്ങൾക്ക് ലോഡിംഗ് സമയം ഗണ്യമായി കുറയ്ക്കാനും, സെർവർ ലോഡ് കുറയ്ക്കാനും, നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ ഉള്ളടക്കത്തിലേക്ക് ഓഫ്‌ലൈൻ ലഭ്യത നൽകാനും കഴിയും. തിരഞ്ഞെടുക്കുമ്പോഴും നടപ്പിലാക്കുമ്പോഴും നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ പ്രത്യേക ആവശ്യകതകളും നിങ്ങളുടെ ലക്ഷ്യ പ്രേക്ഷകരെയും ശ്രദ്ധാപൂർവ്വം പരിഗണിക്കുക. മികച്ച രീതികൾ സ്വീകരിക്കുന്നതിലൂടെയും നിങ്ങളുടെ കാഷിംഗ് പ്രകടനം നിരന്തരം നിരീക്ഷിക്കുന്നതിലൂടെയും, ലോകമെമ്പാടുമുള്ള ഉപയോക്താക്കൾക്ക് നിങ്ങളുടെ വെബ്സൈറ്റ് വേഗതയേറിയതും വിശ്വസനീയവുമായ അനുഭവം നൽകുന്നുവെന്ന് നിങ്ങൾക്ക് ഉറപ്പാക്കാൻ കഴിയും.