LocalToolsCollection d’outils de navigateur hors ligne

Catégorie: Développement

Générateur de manifeste d'application web

Idée interneUn outil manque ?

Générez un manifest.webmanifest pour les applications web installables

Renseignez le nom de votre application, son URL de démarrage, son mode d'affichage, ses couleurs de thème et de fond ainsi que sa liste d'icônes, et obtenez un fichier JSON manifest.webmanifest prêt à l'emploi qui rend un site installable comme Progressive Web App. Généré localement dans votre navigateur.

manifest.webmanifest
{
  "name": "LocalTools",
  "short_name": "LocalTools",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#1f6f4a",
  "background_color": "#faf8f3",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Tout sur cette page est traité dans votre navigateur. Rien n'est envoyé.

À quoi sert cet outil

Un manifeste d'application web est le fichier JSON qui indique à un navigateur comment votre site doit se comporter une fois installé : son nom et son icône sur un écran d'accueil, la couleur de la barre d'état, s'il s'ouvre dans une fenêtre autonome ou un onglet de navigateur classique, et son point de départ. Sans lui, « Ajouter à l'écran d'accueil » n'est soit pas proposé, soit se rabat sur un simple signet plutôt qu'une expérience proche d'une application.

Mode d'emploi

  1. Saisissez le nom, le nom court et l'URL de démarrage de votre application.
  2. Choisissez un mode d'affichage, une couleur de thème et une couleur de fond.
  3. Listez vos icônes, une par ligne, sous la forme d'un chemin et d'une taille comme « /icon-192.png 192x192 ».
  4. Copiez le JSON dans un fichier manifest.webmanifest et liez-le depuis le <head> de votre page avec <link rel="manifest" href="/manifest.webmanifest">.

Confidentialité

Cet outil fonctionne entièrement dans votre navigateur. Ce que vous saisissez n'est jamais envoyé, stocké ni partagé : fermer l'onglet suffit à tout effacer.

Questions fréquentes

Quelles tailles d'icônes me faut-il ?
Au minimum un PNG en 192x192 et un en 512x512 couvrent la plupart des invites d'installation et usages d'icône d'application ; ajoutez d'autres tailles si vous voulez des icônes plus nettes sur certaines plateformes.
Quelle est la différence entre theme_color et background_color ?
theme_color teinte l'interface du navigateur (comme la barre d'adresse ou la barre d'état) autour de votre application ; background_color est affiché brièvement comme fond d'écran de démarrage pendant le chargement de l'application, avant que son propre contenu ne s'affiche.
Ai-je encore besoin de ceci si je ne construis pas une PWA ?
Un manifeste améliore aussi la façon dont l'icône et le nom d'un site apparaissent quand un visiteur l'ajoute aux signets ou à son écran d'accueil, même sans prise en charge complète du hors-ligne ou d'un service worker.

Revenir à tous les outils