വെബ് ആപ്പ് മാനിഫെസ്റ്റ്: പ്രോഗ്രസീവ് വെബ് ആപ്പ് കോൺഫിഗറേഷനിലേക്കുള്ള നിങ്ങളുടെ വഴികാട്ടി

വെബ് ആപ്പ് മാനിഫെസ്റ്റ് എന്നത് ഒരു JSON ഫയലാണ്, ഇത് നിങ്ങളുടെ വെബ് ആപ്ലിക്കേഷനെക്കുറിച്ചുള്ള വിവരങ്ങൾ ബ്രൗസറുകൾക്കും ഓപ്പറേറ്റിംഗ് സിസ്റ്റങ്ങൾക്കും നൽകുന്നു. ഒരു ഉപയോക്താവിൻ്റെ ഉപകരണത്തിൽ ആപ്പ് ഇൻസ്റ്റാൾ ചെയ്യുമ്പോൾ ഈ വിവരങ്ങൾ ഉപയോഗിക്കുന്നു, ഇത് ഒരു പ്രോഗ്രസീവ് വെബ് ആപ്പായി (PWA) എങ്ങനെ കാണപ്പെടുന്നുവെന്നും പ്രവർത്തിക്കുന്നുവെന്നും നിർവചിക്കുന്നു. നിങ്ങളുടെ വെബ്സൈറ്റിനെ ഇൻസ്റ്റാൾ ചെയ്യാവുന്ന, ആപ്പ് പോലുള്ള അനുഭവമാക്കി മാറ്റുന്ന ബ്ലൂപ്രിന്റായി ഇതിനെ കരുതാം. ഉപയോക്താക്കളുടെ ഇടപഴകലിനും കണ്ടെത്തലിനും നന്നായി കോൺഫിഗർ ചെയ്ത ഒരു മാനിഫെസ്റ്റ് അത്യാവശ്യമാണ്.

എന്താണ് ഒരു പ്രോഗ്രസീവ് വെബ് ആപ്പ് (PWA)?

വെബ് ആപ്പ് മാനിഫെസ്റ്റിലേക്ക് കടക്കുന്നതിന് മുമ്പ്, ഒരു PWA എന്താണെന്ന് നമുക്ക് നോക്കാം. PWA-കൾ ഉപയോക്താക്കൾക്ക് ആപ്പ് പോലുള്ള അനുഭവം നൽകുന്ന വെബ് ആപ്ലിക്കേഷനുകളാണ്. അവ:

• വിശ്വസനീയം: സർവീസ് വർക്കറുകൾക്ക് നന്ദി, തൽക്ഷണം ലോഡ് ചെയ്യുകയും ഓഫ്‌ലൈനിലോ നിലവാരം കുറഞ്ഞ നെറ്റ്‌വർക്കുകളിലോ പ്രവർത്തിക്കുകയും ചെയ്യുന്നു.
• വേഗതയേറിയത്: സുഗമമായ ആനിമേഷനുകളോടെയും തടസ്സമില്ലാത്ത സ്ക്രോളിംഗോടെയും ഉപയോക്തൃ ഇടപെടലുകളോട് വേഗത്തിൽ പ്രതികരിക്കുന്നു.
• ആകർഷകം: പുഷ് അറിയിപ്പുകൾ പോലുള്ള സവിശേഷതകളോടെയും ഹോം സ്ക്രീനിൽ ഇൻസ്റ്റാൾ ചെയ്യാനുള്ള കഴിവോടെയും ആഴത്തിലുള്ള ഉപയോക്തൃ അനുഭവം നൽകുന്നു.

വെബ് ആപ്പ് മാനിഫെസ്റ്റിന്റെ പങ്ക്

വെബ് ആപ്പ് മാനിഫെസ്റ്റ് ഒരു PWA-യുടെ അടിസ്ഥാന ശിലയാണ്. ഇത് ബ്രൗസറുകൾക്ക് ആവശ്യമായ വിവരങ്ങൾ നൽകുന്നു:

• PWA ഇൻസ്റ്റാൾ ചെയ്യാൻ: ഇത് ഉപയോക്താക്കൾക്ക് അവരുടെ ഉപകരണങ്ങളിൽ വെബ് ആപ്പ് ഇൻസ്റ്റാൾ ചെയ്യാൻ സഹായിക്കുന്നു, ഇത് അവരുടെ ഹോം സ്ക്രീനിലേക്കോ ആപ്പ് ലോഞ്ചറിലേക്കോ ചേർക്കുന്നു.
• PWA ശരിയായി പ്രദർശിപ്പിക്കാൻ: ഇത് ആപ്പിന്റെ പേര്, ഐക്കണുകൾ, തീം നിറം, മറ്റ് ദൃശ്യപരമായ വശങ്ങൾ എന്നിവ നിർവചിക്കുന്നു.
• PWA-യുടെ പ്രവർത്തനം നിയന്ത്രിക്കാൻ: ആപ്പ് എങ്ങനെ ലോഞ്ച് ചെയ്യണം (ഉദാഹരണത്തിന്, ഫുൾ-സ്ക്രീൻ മോഡിൽ അല്ലെങ്കിൽ ഒരു സ്റ്റാൻഡലോൺ വിൻഡോ ആയി), ഓപ്പറേറ്റിംഗ് സിസ്റ്റവുമായി ഇത് എങ്ങനെ സംയോജിപ്പിക്കണം എന്നിവ ഇത് വ്യക്തമാക്കുന്നു.

നിങ്ങളുടെ `manifest.json` ഫയൽ നിർമ്മിക്കുന്നു

വെബ് ആപ്പ് മാനിഫെസ്റ്റ് ഒരു JSON ഫയലാണ്, സാധാരണയായി `manifest.json` എന്ന് പേരിട്ടിരിക്കുന്നു. ഇത് നിങ്ങളുടെ വെബ് ആപ്ലിക്കേഷന്റെ റൂട്ട് ഡയറക്ടറിയിൽ സ്ഥാപിക്കണം. ഒരു അടിസ്ഥാന ഉദാഹരണം ഇതാ:

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

              
                Copy
              
            
          

ഈ ഓരോ പ്രോപ്പർട്ടികളെയും നമുക്ക് വിശദമായി പരിശോധിക്കാം:

`name`

നിങ്ങളുടെ വെബ് ആപ്ലിക്കേഷന്റെ പൂർണ്ണമായ പേര്. ആപ്പ് ഇൻസ്റ്റാൾ ചെയ്യാൻ ആവശ്യപ്പെടുമ്പോഴും ആപ്പ് ലോഞ്ചറിലും ഈ പേര് ഉപയോക്താക്കൾക്ക് ദൃശ്യമാകും.

ഉദാഹരണം:

            "name": "Global News App"
            

              
                Copy
              
            
          

`short_name`

നിങ്ങളുടെ ആപ്പിന്റെ പേരിന്റെ ഒരു ചെറിയ പതിപ്പ്, ഹോം സ്ക്രീനിലോ ആപ്പ് ലോഞ്ചറിലോ പോലുള്ള പരിമിതമായ സ്ഥലമുള്ളപ്പോൾ ഉപയോഗിക്കുന്നു. ഇത് സംക്ഷിപ്തമായി സൂക്ഷിക്കുക.

ഉദാഹരണം:

            "short_name": "Global News"
            

              
                Copy
              
            
          

`start_url`

ആപ്പ് ലോഞ്ച് ചെയ്യുമ്പോൾ ലോഡ് ചെയ്യേണ്ട URL. ഇത് സാധാരണയായി നിങ്ങളുടെ വെബ് ആപ്ലിക്കേഷന്റെ ഹോംപേജ് ആയിരിക്കും, എന്നാൽ ഇത് ഒരു പ്രത്യേക ലാൻഡിംഗ് പേജുമാകാം.

ഉദാഹരണം:

            "start_url": "/"
            

              
                Copy
              
            
          

നിങ്ങളുടെ PWA ഉപയോക്താക്കൾ എങ്ങനെയാണ് ലോഞ്ച് ചെയ്യുന്നതെന്ന് ട്രാക്ക് ചെയ്യാൻ നിങ്ങൾക്ക് ക്വറി പാരാമീറ്ററുകളുള്ള ഒരു URL ഉപയോഗിക്കാം:

            "start_url": "/?utm_source=homescreen"
            

              
                Copy
              
            
          

`display`

ലോഞ്ച് ചെയ്യുമ്പോൾ ആപ്പ് എങ്ങനെ പ്രദർശിപ്പിക്കണമെന്ന് നിർവചിക്കുന്നു. നിരവധി ഓപ്ഷനുകൾ ഉണ്ട്:

• `standalone`: അഡ്രസ്സ് ബാർ പോലുള്ള ബ്രൗസർ UI ഘടകങ്ങളില്ലാതെ ആപ്പ് അതിൻ്റേതായ ടോപ്പ്-ലെവൽ വിൻഡോയിൽ തുറക്കും.
• `fullscreen`: സ്റ്റാറ്റസ് ബാർ പോലും മറച്ചുകൊണ്ട് ആപ്പ് മുഴുവൻ സ്ക്രീനും ഉപയോഗിക്കും.
• `minimal-ui`: `standalone`-ന് സമാനമാണ്, എന്നാൽ ബാക്ക് ബട്ടൺ, റീഫ്രഷ് ബട്ടൺ പോലുള്ള കുറഞ്ഞ ബ്രൗസർ UI നൽകുന്നു.
• `browser`: ആപ്പ് ഒരു സാധാരണ ബ്രൗസർ ടാബിലോ വിൻഡോയിലോ തുറക്കും.

ശുപാർശ: PWA-കൾക്ക് സാധാരണയായി `standalone` ആണ് അഭികാമ്യം.

ഉദാഹരണം:

            "display": "standalone"
            

              
                Copy
              
            
          

`background_color`

ആപ്പ് ലോഞ്ച് ചെയ്യുമ്പോൾ അതിൻ്റെ സ്പ്ലാഷ് സ്ക്രീനിൻ്റെ പശ്ചാത്തല നിറം. ആപ്പ് ഐക്കണും ആപ്പിൻ്റെ ഉള്ളടക്കവും തമ്മിൽ തടസ്സമില്ലാത്ത മാറ്റം നൽകുന്നതിന് ഇത് പ്രധാനമാണ്.

ഉദാഹരണം:

            "background_color": "#ffffff"
            

              
                Copy
              
            
          

`theme_color`

ആൻഡ്രോയിഡിലെ സ്റ്റാറ്റസ് ബാർ പോലുള്ള ആപ്പിന്റെ UI സ്റ്റൈൽ ചെയ്യാൻ ഉപയോഗിക്കുന്ന തീം നിറം. ഈ നിറം നിങ്ങളുടെ ആപ്പിന്റെ ബ്രാൻഡിംഗുമായി പൊരുത്തപ്പെടണം.

ഉദാഹരണം:

            "theme_color": "#000000"
            

              
                Copy
              
            
          

`icons`

ഒബ്ജക്റ്റുകളുടെ ഒരു നിര, ഓരോന്നും ആപ്പിനുള്ള ഒരു ഐക്കണിനെ പ്രതിനിധീകരിക്കുന്നു. വിവിധ ഉപകരണങ്ങളിലും റെസല്യൂഷനുകളിലും ആപ്പ് മനോഹരമായി കാണപ്പെടുന്നുവെന്ന് ഉറപ്പാക്കാൻ നിങ്ങൾ വ്യത്യസ്ത വലുപ്പത്തിലുള്ള ഒന്നിലധികം ഐക്കണുകൾ നൽകണം.

ഓരോ ഐക്കണിന്റെയും പ്രോപ്പർട്ടികൾ:

• `src`: ഐക്കൺ ചിത്രത്തിൻ്റെ URL.
• `sizes`: പിക്സലുകളിലുള്ള ഐക്കണിൻ്റെ അളവുകൾ (ഉദാ. "192x192").
• `type`: ഐക്കൺ ചിത്രത്തിൻ്റെ MIME തരം (ഉദാ. "image/png").

ശുപാർശ ചെയ്യുന്ന ഐക്കൺ വലുപ്പങ്ങൾ:

• 48x48
• 72x72
• 96x96
• 144x144
• 192x192
• 512x512

ഉദാഹരണം:

            "icons": [
  {
    "src": "/icons/icon-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  },
  {
    "src": "/icons/icon-512x512.png",
    "sizes": "512x512",
    "type": "image/png"
  }
]
            

              
                Copy
              
            
          

അധിക മാനിഫെസ്റ്റ് പ്രോപ്പർട്ടികൾ

മുകളിൽ പറഞ്ഞ പ്രോപ്പർട്ടികൾ ഏറ്റവും സാധാരണമാണെങ്കിലും, നിങ്ങളുടെ PWA കോൺഫിഗർ ചെയ്യുന്നതിന് വെബ് ആപ്പ് മാനിഫെസ്റ്റ് മറ്റ് നിരവധി ഓപ്ഷനുകളെ പിന്തുണയ്ക്കുന്നു:

`id`

നിങ്ങളുടെ PWA-യുടെ തനതായ ഒരു ഐഡന്റിഫയർ. ഒരേ പേരിലുള്ള ഒന്നിലധികം PWA-കൾ ഉണ്ടെങ്കിൽ പൊരുത്തക്കേടുകൾ തടയാൻ ഇത് പ്രധാനമാണ്.

ഉദാഹരണം:

            "id": "com.example.myapp"
            

              
                Copy
              
            
          

`scope`

ആപ്പിന്റെ നാവിഗേഷൻ സ്കോപ്പ് നിർവചിക്കുന്നു. നിങ്ങളുടെ വെബ്സൈറ്റിലെ ഏതൊക്കെ URL-കളാണ് PWA-യുടെ ഭാഗമായി കണക്കാക്കുന്നത് എന്ന് ഇത് നിർണ്ണയിക്കുന്നു. ഉപയോക്താവ് സ്കോപ്പിന് പുറത്ത് നാവിഗേറ്റ് ചെയ്താൽ, ആപ്പ് ഒരു സാധാരണ ബ്രൗസർ ടാബിൽ തുറക്കും.

ഉദാഹരണം:

            "scope": "/app/"
            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, `/app/` എന്ന് തുടങ്ങുന്ന URL-കൾ മാത്രമേ PWA-യുടെ ഭാഗമായി കണക്കാക്കൂ.

`orientation`

ആപ്പിന് മുൻഗണന നൽകുന്ന സ്ക്രീൻ ഓറിയന്റേഷൻ വ്യക്തമാക്കുന്നു. `portrait`, `landscape`, `any` എന്നിവയും അതിലേറെയും ഓപ്ഷനുകളിൽ ഉൾപ്പെടുന്നു.

ഉദാഹരണം:

            "orientation": "portrait"
            

              
                Copy
              
            
          

`related_applications`

ബന്ധപ്പെട്ട നേറ്റീവ് ആപ്ലിക്കേഷനുകളെ നിർവചിക്കുന്ന ഒബ്ജക്റ്റുകളുടെ ഒരു നിര. നിങ്ങളുടെ PWA ഇതിനകം ഇൻസ്റ്റാൾ ചെയ്ത ഉപയോക്താക്കൾക്ക് നിങ്ങളുടെ നേറ്റീവ് ആപ്പുകൾ പ്രൊമോട്ട് ചെയ്യാൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നു.

ഉദാഹരണം:

            "related_applications": [
  {
    "platform": "play",
    "id": "com.example.myapp"
  }
]
            

              
                Copy
              
            
          

ഈ ഉദാഹരണം സൂചിപ്പിക്കുന്നത് Google Play Store-ൽ `com.example.myapp` എന്ന ID ഉള്ള ഒരു ബന്ധപ്പെട്ട നേറ്റീവ് ആപ്പ് ഉണ്ടെന്നാണ്.

`prefer_related_applications`

PWA-യ്ക്ക് പകരം ബന്ധപ്പെട്ട നേറ്റീവ് ആപ്ലിക്കേഷൻ ഇൻസ്റ്റാൾ ചെയ്യാൻ ഉപയോക്താവിനോട് ആവശ്യപ്പെടണമോ എന്ന് സൂചിപ്പിക്കുന്ന ഒരു ബൂളിയൻ മൂല്യം.

ഉദാഹരണം:

            "prefer_related_applications": true
            

              
                Copy
              
            
          

`categories`

ആപ്പിന്റെ വിഭാഗങ്ങളെ പ്രതിനിധീകരിക്കുന്ന സ്ട്രിംഗുകളുടെ ഒരു നിര. ആപ്പ് സ്റ്റോറുകളിലോ തിരയൽ ഫലങ്ങളിലോ നിങ്ങളുടെ ആപ്പ് കണ്ടെത്താൻ ഇത് ഉപയോക്താക്കളെ സഹായിക്കും.

ഉദാഹരണം:

            "categories": ["news", "information"]
            

              
                Copy
              
            
          

`shortcuts`

ഉപയോക്താക്കൾക്ക് അവരുടെ ഹോം സ്ക്രീനിലെ ആപ്പ് ഐക്കണിൽ നിന്ന് ആക്സസ് ചെയ്യാൻ കഴിയുന്ന കുറുക്കുവഴികളുടെ ഒരു ലിസ്റ്റ് നിർവചിക്കുന്നു. ആപ്പിനുള്ളിലെ സാധാരണ ജോലികൾ വേഗത്തിൽ ചെയ്യാൻ ഇത് ഉപയോക്താക്കളെ അനുവദിക്കുന്നു.

ഉദാഹരണം:

            "shortcuts": [
  {
    "name": "Latest News",
    "short_name": "News",
    "description": "Read the latest news articles",
    "url": "/news",
    "icons": [{
      "src": "/icons/news.png",
      "sizes": "192x192",
      "type": "image/png"
    }]
  }
]
            

              
                Copy
              
            
          

മാനിഫെസ്റ്റ് നിങ്ങളുടെ വെബ് ആപ്പുമായി ബന്ധിപ്പിക്കുന്നു

നിങ്ങൾ `manifest.json` ഫയൽ ഉണ്ടാക്കിയ ശേഷം, നിങ്ങളുടെ HTML-ന്റെ `` വിഭാഗത്തിൽ ഒരു `` ടാഗ് ചേർത്തുകൊണ്ട് അത് നിങ്ങളുടെ വെബ് ആപ്ലിക്കേഷനുമായി ബന്ധിപ്പിക്കേണ്ടതുണ്ട്:

            <link rel="manifest" href="/manifest.json">
            

              
                Copy
              
            
          

നിങ്ങളുടെ മാനിഫെസ്റ്റ് സാധൂകരിക്കുന്നു

നിങ്ങളുടെ `manifest.json` ഫയൽ ശരിയായി ഫോർമാറ്റ് ചെയ്തിട്ടുണ്ടെന്നും ആവശ്യമായ എല്ലാ പ്രോപ്പർട്ടികളും അതിൽ അടങ്ങിയിട്ടുണ്ടെന്നും ഉറപ്പാക്കാൻ അത് സാധൂകരിക്കേണ്ടത് പ്രധാനമാണ്. നിങ്ങളുടെ മാനിഫെസ്റ്റ് സാധൂകരിക്കുന്നതിന് JSONLint പോലുള്ള ഓൺലൈൻ ടൂളുകളോ Chrome DevTools-ഓ ഉപയോഗിക്കാം.

നിങ്ങളുടെ PWA പരീക്ഷിക്കുന്നു

നിങ്ങളുടെ മാനിഫെസ്റ്റ് ഉണ്ടാക്കുകയും ലിങ്ക് ചെയ്യുകയും ചെയ്ത ശേഷം, അത് പ്രതീക്ഷിച്ചതുപോലെ പ്രവർത്തിക്കുന്നുവെന്ന് ഉറപ്പാക്കാൻ വിവിധ ബ്രൗസറുകളിലും ഉപകരണങ്ങളിലും നിങ്ങളുടെ PWA പരീക്ഷിക്കണം. നിങ്ങളുടെ മാനിഫെസ്റ്റ് പരിശോധിക്കാനും എന്തെങ്കിലും പ്രശ്നങ്ങൾ കണ്ടെത്താനും Chrome DevTools (Application -> Manifest) ഉപയോഗിക്കുക.

വെബ് ആപ്പ് മാനിഫെസ്റ്റ് കോൺഫിഗറേഷനുള്ള മികച്ച രീതികൾ

നിങ്ങളുടെ വെബ് ആപ്പ് മാനിഫെസ്റ്റ് കോൺഫിഗർ ചെയ്യുമ്പോൾ ശ്രദ്ധിക്കേണ്ട ചില മികച്ച രീതികൾ ഇതാ:

• ആവശ്യമായ എല്ലാ പ്രോപ്പർട്ടികളും നൽകുക: `name`, `short_name`, `start_url`, `display`, `background_color`, `theme_color`, `icons` തുടങ്ങിയ എല്ലാ അവശ്യ പ്രോപ്പർട്ടികളും നിങ്ങൾ ഉൾപ്പെടുത്തിയിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക.
• അനുയോജ്യമായ ഐക്കൺ വലുപ്പങ്ങൾ ഉപയോഗിക്കുക: വിവിധ ഉപകരണങ്ങളെയും റെസല്യൂഷനുകളെയും പിന്തുണയ്ക്കുന്നതിന് വ്യത്യസ്ത വലുപ്പത്തിലുള്ള ഒന്നിലധികം ഐക്കണുകൾ നൽകുക.
• ശരിയായ ഡിസ്പ്ലേ മോഡ് തിരഞ്ഞെടുക്കുക: നിങ്ങളുടെ ആപ്പിന്റെ ഉപയോക്തൃ അനുഭവത്തിന് ഏറ്റവും അനുയോജ്യമായ `display` മോഡ് തിരഞ്ഞെടുക്കുക. സാധാരണയായി `standalone` ആണ് അഭികാമ്യം.
• നിങ്ങളുടെ മാനിഫെസ്റ്റ് സാധൂകരിക്കുക: നിങ്ങളുടെ `manifest.json` ഫയൽ ശരിയായി ഫോർമാറ്റ് ചെയ്തിട്ടുണ്ടെന്ന് ഉറപ്പാക്കാൻ എപ്പോഴും സാധൂകരിക്കുക.
• നിങ്ങളുടെ PWA പരീക്ഷിക്കുക: നിങ്ങളുടെ PWA പ്രതീക്ഷിച്ചതുപോലെ പ്രവർത്തിക്കുന്നുവെന്ന് ഉറപ്പാക്കാൻ വിവിധ ബ്രൗസറുകളിലും ഉപകരണങ്ങളിലും പരീക്ഷിക്കുക.
• SEO-ക്കായി ഒപ്റ്റിമൈസ് ചെയ്യുക: നിങ്ങളുടെ ആപ്പിന്റെ കണ്ടെത്തൽ മെച്ചപ്പെടുത്തുന്നതിന് `name`, `short_name`, `description` എന്നിവയിൽ പ്രസക്തമായ കീവേഡുകൾ ഉപയോഗിക്കുക.
• പ്രാദേശികവൽക്കരണം പരിഗണിക്കുക: നിങ്ങളുടെ ആപ്പ് ഒരു ആഗോള പ്രേക്ഷകരെ ലക്ഷ്യമിടുന്നുവെങ്കിൽ, വ്യത്യസ്ത ഭാഷകൾക്കായി വ്യത്യസ്ത പേരുകൾ, വിവരണങ്ങൾ, ഐക്കണുകൾ എന്നിവ ഉപയോഗിച്ച് നിങ്ങളുടെ മാനിഫെസ്റ്റിന്റെ പ്രാദേശികവൽക്കരിച്ച പതിപ്പുകൾ നൽകുന്നത് പരിഗണിക്കുക.

നന്നായി കോൺഫിഗർ ചെയ്ത വെബ് ആപ്പ് മാനിഫെസ്റ്റുകളുടെ ഉദാഹരണങ്ങൾ

ജനപ്രിയ PWA-കളിൽ നിന്നുള്ള നന്നായി കോൺഫിഗർ ചെയ്ത വെബ് ആപ്പ് മാനിഫെസ്റ്റുകളുടെ ചില ഉദാഹരണങ്ങൾ ഇതാ:

ട്വിറ്റർ ലൈറ്റ്

            {
  "name": "Twitter Lite",
  "short_name": "Twitter",
  "icons": [
    {
      "src": "/static/icons/mstile-150x150.png",
      "sizes": "150x150",
      "type": "image/png"
    },
    {
      "src": "/static/icons/twitter-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/icons/twitter-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1da1f2",
  "description": "Twitter Lite is a faster, data-friendly way to see what's happening in the world.",
  "orientation": "portrait"
}
            

              
                Copy
              
            
          

സ്റ്റാർബക്സ്

            {
  "name": "Starbucks",
  "short_name": "Starbucks",
  "icons": [
    {
      "src": "/static/icons/starbucks-icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/icons/starbucks-icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#f2f0eb",
  "theme_color": "#00704a",
  "description": "Order your favorite Starbucks drinks and food with the app.",
  "orientation": "portrait",
  "shortcuts": [
    {
      "name": "Order Now",
      "short_name": "Order",
      "description": "Start a new order",
      "url": "/order",
      "icons": [{
        "src": "/static/icons/order-icon.png",
        "sizes": "192x192",
        "type": "image/png"
      }]
    }
  ]
}
            

              
                Copy
              
            
          

വെബ് ആപ്പ് മാനിഫെസ്റ്റിന്റെ ഭാവി

വെബ് ആപ്പ് മാനിഫെസ്റ്റ് ഒരു വികസിച്ചുകൊണ്ടിരിക്കുന്ന മാനദണ്ഡമാണ്, കാലക്രമേണ പുതിയ ഫീച്ചറുകളും കഴിവുകളും ഇതിലേക്ക് ചേർത്തുകൊണ്ടിരിക്കുന്നു. നിങ്ങളുടെ PWA-കൾ ഏറ്റവും പുതിയ സാങ്കേതികവിദ്യകൾ പൂർണ്ണമായി പ്രയോജനപ്പെടുത്തുന്നുവെന്ന് ഉറപ്പാക്കാൻ W3C-യിൽ നിന്നുള്ള ഏറ്റവും പുതിയ അപ്‌ഡേറ്റുകളും ശുപാർശകളും ശ്രദ്ധിക്കുക.

ഉപസംഹാരം

ഏതൊരു PWA-യുടെയും ഒരു പ്രധാന ഘടകമാണ് വെബ് ആപ്പ് മാനിഫെസ്റ്റ്. നിങ്ങളുടെ മാനിഫെസ്റ്റ് ശരിയായി കോൺഫിഗർ ചെയ്യുന്നതിലൂടെ, നിങ്ങൾക്ക് തടസ്സമില്ലാത്തതും ആകർഷകവുമായ ഉപയോക്തൃ അനുഭവം നൽകാൻ കഴിയും, ഇത് നിങ്ങളുടെ വെബ് ആപ്പിന് ഒരു നേറ്റീവ് ആപ്ലിക്കേഷന്റെ അനുഭവം നൽകുന്നു. ഈ ഗൈഡ് വെബ് ആപ്പ് മാനിഫെസ്റ്റിന്റെ പ്രോപ്പർട്ടികൾ, മികച്ച രീതികൾ, ഉദാഹരണങ്ങൾ എന്നിവയുൾപ്പെടെ ഒരു സമഗ്രമായ അവലോകനം നൽകിയിട്ടുണ്ട്. ഈ മാർഗ്ഗനിർദ്ദേശങ്ങൾ പാലിക്കുന്നതിലൂടെ, നിങ്ങളുടെ PWA-കളുടെ മുഴുവൻ സാധ്യതകളും പ്രയോജനപ്പെടുത്താനും ലോകമെമ്പാടുമുള്ള നിങ്ങളുടെ ഉപയോക്താക്കൾക്ക് മികച്ച ഉപയോക്തൃ അനുഭവം നൽകാനും കഴിയും.

വെബ് ആപ്പ് മാനിഫെസ്റ്റിന്റെ ശക്തി സ്വീകരിക്കുകയും നിങ്ങളുടെ വെബ്സൈറ്റുകളെ ഉപയോക്താക്കളെ ആനന്ദിപ്പിക്കുകയും ഇടപഴകൽ വർദ്ധിപ്പിക്കുകയും ചെയ്യുന്ന ഇൻസ്റ്റാൾ ചെയ്യാവുന്ന, ആപ്പ് പോലുള്ള അനുഭവങ്ങളാക്കി മാറ്റുക.