Web App Manifest: Din guide til Progressive Web App-konfigurasjon

Web App Manifest er en JSON-fil som gir informasjon om nettsiden din til nettlesere og operativsystemer. Denne informasjonen brukes når appen installeres på brukerens enhet, og definerer hvordan den vises og oppfører seg som en Progressive Web App (PWA). Se på det som en blåplan som forvandler nettstedet ditt til en installerbar, app-lignende opplevelse. Et godt konfigurert manifest er avgjørende for brukerengasjement og synlighet.

Hva er en Progressive Web App (PWA)?

Før vi dykker ned i Web App Manifest, la oss repetere hva en PWA er. PWA-er er webapplikasjoner som tilbyr en app-lignende opplevelse til brukere. De er:

• Pålitelige: Laster umiddelbart og fungerer offline eller på nettverk med lav kvalitet, takket være service workers.
• Raske: Reagerer raskt på brukerinteraksjoner med jevne animasjoner og ingen hakking i rulling.
• Engasjerende: Tilbyr en oppslukende brukeropplevelse med funksjoner som push-varsler og muligheten til å bli installert på startskjermen.

Rollen til Web App Manifest

Web App Manifest er hjørnesteinen i en PWA. Den gir nødvendig informasjon for at nettlesere skal kunne:

• Installere PWA-en: Den gjør det mulig for brukere å installere nettappen på enhetene sine, og legge den til på startskjermen eller i app-starteren.
• Vise PWA-en korrekt: Den definerer appens navn, ikoner, temafarge og andre visuelle aspekter.
• Kontrollere PWA-ens atferd: Den spesifiserer hvordan appen skal startes (f.eks. i fullskjermmodus eller som et frittstående vindu) og hvordan den skal integreres med operativsystemet.

Opprette din `manifest.json`-fil

Web App Manifest er en JSON-fil, vanligvis kalt `manifest.json`. Den bør plasseres i rotkatalogen til nettapplikasjonen din. Her er et grunnleggende eksempel:

            {
  "name": "Min Fantastiske PWA",
  "short_name": "Fantastisk 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
              
            
          

La oss se nærmere på hver av disse egenskapene:

`name`

Det fulle navnet på nettsiden din. Dette navnet vil bli vist til brukere når de blir bedt om å installere appen og i app-starteren.

Eksempel:

            "name": "Global Nyhetsapp"
            

              
                Copy
              
            
          

`short_name`

En kortere versjon av appens navn, brukt når det er begrenset med plass, som på startskjermen eller i app-starteren. Hold det kortfattet.

Eksempel:

            "short_name": "Globale Nyheter"
            

              
                Copy
              
            
          

`start_url`

URL-en som appen skal laste når den startes. Det er vanligvis hjemmesiden til nettsiden din, men det kan være en spesifikk landingsside.

Eksempel:

            "start_url": "/"
            

              
                Copy
              
            
          

Du kan også bruke en URL med spørringsparametere for å spore hvordan brukere starter PWA-en din:

            "start_url": "/?utm_source=homescreen"
            

              
                Copy
              
            
          

`display`

Definerer hvordan appen skal vises når den startes. Det er flere alternativer:

• `standalone`: Appen vil åpnes i sitt eget toppnivåvindu, uten nettleser-UI-elementer som adressefeltet.
• `fullscreen`: Appen vil dekke hele skjermen og skjule selv statuslinjen.
• `minimal-ui`: Ligner på `standalone`, men gir en minimal nettleser-UI, som en tilbake-knapp og oppdateringsknapp.
• `browser`: Appen vil åpnes i en vanlig nettleserfane eller et vindu.

Anbefaling: `standalone` er generelt det foretrukne alternativet for PWA-er.

Eksempel:

            "display": "standalone"
            

              
                Copy
              
            
          

`background_color`

Bakgrunnsfargen på appens splash-skjerm når den startes. Dette er viktig for å gi en sømløs overgang mellom app-ikonet og appens innhold.

Eksempel:

            "background_color": "#ffffff"
            

              
                Copy
              
            
          

`theme_color`

Temafargen som brukes til å style appens UI, som statuslinjen på Android. Denne fargen bør samsvare med appens merkevarebygging.

Eksempel:

            "theme_color": "#000000"
            

              
                Copy
              
            
          

`icons`

En liste over objekter, som hver representerer et ikon for appen. Du bør oppgi flere ikoner i forskjellige størrelser for å sikre at appen ser bra ut på forskjellige enheter og oppløsninger.

Egenskaper for hvert ikon:

• `src`: URL-en til ikonbildet.
• `sizes`: Ikonets dimensjoner i piksler (f.eks. "192x192").
• `type`: MIME-typen til ikonbildet (f.eks. "image/png").

Anbefalte ikonstørrelser:

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

Eksempel:

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

              
                Copy
              
            
          

Ytterligere manifest-egenskaper

Selv om egenskapene ovenfor er de vanligste, støtter Web App Manifest mange andre alternativer for å konfigurere PWA-en din:

`id`

En unik identifikator for PWA-en din. Dette er viktig for å forhindre konflikter hvis du har flere PWA-er med samme navn.

Eksempel:

            "id": "com.example.myapp"
            

              
                Copy
              
            
          

`scope`

Definerer appens navigasjonsskopi. Dette bestemmer hvilke URL-er innenfor nettstedet ditt som regnes som en del av PWA-en. Hvis brukeren navigerer utenfor scopet, vil appen åpnes i en vanlig nettleserfane.

Eksempel:

            "scope": "/app/"
            

              
                Copy
              
            
          

I dette eksemplet vil bare URL-er som starter med `/app/` bli ansett som en del av PWA-en.

`orientation`

Spesifiserer den foretrukne skjermretningen for appen. Alternativer inkluderer `portrait`, `landscape`, `any` og mer.

Eksempel:

            "orientation": "portrait"
            

              
                Copy
              
            
          

`related_applications`

En liste over objekter som definerer relaterte native applikasjoner. Dette lar deg markedsføre native-appene dine til brukere som allerede har installert PWA-en din.

Eksempel:

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

              
                Copy
              
            
          

Dette eksemplet indikerer at det finnes en relatert native-app i Google Play Store med ID-en `com.example.myapp`.

`prefer_related_applications`

En boolsk verdi som angir om brukeren skal bli bedt om å installere den relaterte native-applikasjonen i stedet for PWA-en.

Eksempel:

            "prefer_related_applications": true
            

              
                Copy
              
            
          

`categories`

En liste over strenger som representerer appens kategorier. Dette kan hjelpe brukere med å finne appen din i app-butikker eller søkeresultater.

Eksempel:

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

              
                Copy
              
            
          

`shortcuts`

Definerer en liste over snarveier som brukere kan få tilgang til fra app-ikonet på startskjermen. Dette lar brukere raskt utføre vanlige oppgaver i appen.

Eksempel:

            "shortcuts": [
  {
    "name": "Siste Nyheter",
    "short_name": "Nyheter",
    "description": "Les de siste nyhetsartiklene",
    "url": "/news",
    "icons": [{
      "src": "/icons/news.png",
      "sizes": "192x192",
      "type": "image/png"
    }]
  }
]
            

              
                Copy
              
            
          

Knytte manifestet til nettappen din

Når du har opprettet `manifest.json`-filen, må du knytte den til nettapplikasjonen din ved å legge til en ``-tagg i ``-seksjonen av HTML-en din:

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

              
                Copy
              
            
          

Validering av manifestet ditt

Det er viktig å validere `manifest.json`-filen din for å sikre at den er korrekt formatert og inneholder alle nødvendige egenskaper. Du kan bruke nettbaserte verktøy som JSONLint eller Chrome DevTools for å validere manifestet ditt.

Testing av PWA-en din

Etter å ha opprettet og knyttet manifestet ditt, bør du teste PWA-en din i forskjellige nettlesere og enheter for å sikre at den fungerer som forventet. Bruk Chrome DevTools (Application -> Manifest) for å inspisere manifestet ditt og diagnostisere eventuelle problemer.

Beste praksis for Web App Manifest-konfigurasjon

Her er noen beste praksiser å huske på når du konfigurerer Web App Manifest:

• Oppgi alle nødvendige egenskaper: Sørg for at du har inkludert alle essensielle egenskaper, som `name`, `short_name`, `start_url`, `display`, `background_color`, `theme_color` og `icons`.
• Bruk passende ikonstørrelser: Oppgi flere ikoner i forskjellige størrelser for å støtte ulike enheter og oppløsninger.
• Velg riktig visningsmodus: Velg `display`-modusen som best passer appens brukeropplevelse. `standalone` er generelt det foretrukne alternativet.
• Valider manifestet ditt: Valider alltid `manifest.json`-filen din for å sikre at den er korrekt formatert.
• Test PWA-en din: Test PWA-en din i forskjellige nettlesere og enheter for å sikre at den fungerer som forventet.
• Optimaliser for SEO: Bruk relevante nøkkelord i `name`, `short_name` og `description` for å forbedre appens synlighet.
• Vurder lokalisering: Hvis appen din retter seg mot et globalt publikum, kan du vurdere å tilby lokaliserte versjoner av manifestet ditt med forskjellige navn, beskrivelser og ikoner for ulike språk.

Eksempler på godt konfigurerte Web App Manifests

Her er noen eksempler på godt konfigurerte Web App Manifests fra populære PWA-er:

Twitter Lite

            {
  "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 er en raskere, datavenlig måte å se hva som skjer i verden på.",
  "orientation": "portrait"
}
            

              
                Copy
              
            
          

Starbucks

            {
  "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": "Bestill dine favoritt Starbucks-drinker og mat med appen.",
  "orientation": "portrait",
  "shortcuts": [
    {
      "name": "Bestill Nå",
      "short_name": "Bestill",
      "description": "Start en ny bestilling",
      "url": "/order",
      "icons": [{
        "src": "/static/icons/order-icon.png",
        "sizes": "192x192",
        "type": "image/png"
      }]
    }
  ]
}
            

              
                Copy
              
            
          

Fremtiden for Web App Manifest

Web App Manifest er en utviklende standard, med nye funksjoner og muligheter som legges til over tid. Følg med på de siste oppdateringene og anbefalingene fra W3C for å sikre at PWA-ene dine drar full nytte av de nyeste teknologiene.

Konklusjon

Web App Manifest er en essensiell komponent i enhver PWA. Ved å konfigurere manifestet ditt på riktig måte, kan du tilby en sømløs og engasjerende brukeropplevelse, som gjør at nettappen din føles som en native applikasjon. Denne guiden har gitt en omfattende oversikt over Web App Manifest, inkludert egenskapene, beste praksis og eksempler. Ved å følge disse retningslinjene kan du låse opp det fulle potensialet til PWA-ene dine og levere en overlegen brukeropplevelse til brukere over hele verden.

Omfavn kraften i Web App Manifest og forvandle nettstedene dine til installerbare, app-lignende opplevelser som gleder brukere og driver engasjement.