Svolgi attività velocemente con le scorciatoie app

Le scorciatoie app consentono di accedere rapidamente a una manciata di azioni comuni di cui gli utenti hanno spesso bisogno.

François Beaufort

Jungkee Song

Per migliorare l'esperienza utente produttività e favorire il ricoinvolgimento con le attività chiave, piattaforma web ora supporta le scorciatoie app. Consentono agli sviluppatori web di fornire accesso rapido a una manciata di azioni comuni di cui gli utenti hanno bisogno spesso.

Questo articolo illustra come definire le scorciatoie delle app. Inoltre, scoprirai alcune best practice associate.

Informazioni sulle scorciatoie app

Le scorciatoie app aiutano gli utenti ad avviare rapidamente attività comuni o consigliate all'interno del tuo nell'app web di Google. Puoi accedere facilmente a queste attività da qualsiasi posizione in cui viene visualizzata l'icona dell'app migliorare le prestazioni degli utenti produttività e aumenta il coinvolgimento con il web dell'app.

Il menu delle scorciatoie app viene richiamato facendo clic con il tasto destro del mouse sull'icona dell'app nella barra delle applicazioni. (Windows) o dock (macOS) sul desktop dell'utente oppure tocca e che contiene Icona in Avvio applicazioni su Android.

Il menu delle scorciatoie app viene mostrato soltanto per le app web progressive che sono installata sul dispositivo mobile o desktop dell'utente. Consulta Installazione nella nostra sezione "Scopri PWA" per saperne di più sui requisiti di installabilità.

Ogni scorciatoia dell'app esprime un intent dell'utente, ognuno dei quali è associato a un URL nell'ambito della tua app web. L'URL viene aperto quando un utente attiva la scorciatoia dell'app. Ecco alcuni esempi di scorciatoie app:

• Elementi di navigazione di primo livello (ad es. home page, cronologia, ordini recenti)
• Cerca
• Attività di inserimento dati (ad es. scrivere un'email o tweet, aggiungere una ricevuta)
• Attività (ad es. avviare una chat con i contatti più frequenti)

Definisci le scorciatoie app nel file manifest dell'app web

Le scorciatoie app sono definite facoltativamente nel file manifest dell'app web, un file JSON che comunica al browser la tua app web e come dovrebbe comportarsi quando installata sul dispositivo mobile o desktop dell'utente. Nello specifico, dichiarato nel membro dell'array shortcuts. Di seguito è riportato un esempio di un potenziale manifest dell'app web.

{
  "name": "Player FM",
  "start_url": "https://player.fm?utm_source=homescreen",
  …
  "shortcuts": [
    {
      "name": "Open Play Later",
      "short_name": "Play Later",
      "description": "View the list of podcasts you saved for later",
      "url": "/play-later?utm_source=homescreen",
      "icons": [{ "src": "/icons/play-later.png", "sizes": "192x192" }]
    },
    {
      "name": "View Subscriptions",
      "short_name": "Subscriptions",
      "description": "View the list of podcasts you listen to",
      "url": "/subscriptions?utm_source=homescreen",
      "icons": [{ "src": "/icons/subscriptions.png", "sizes": "192x192" }]
    }
  ]
}

Ogni membro dell'array shortcuts è un dizionario che contiene almeno un name e url. Gli altri membri sono facoltativi.

name

L'etichetta leggibile per la scorciatoia dell'app quando mostrati all'utente.

short_name (facoltativo)

L'etichetta leggibile utilizzata nei luoghi in cui lo spazio è limitato. Consigliato che fornisci, anche se si tratta di Facoltativo.

description (facoltativo)

Lo scopo leggibile della scorciatoia dell'app. Non viene utilizzato al momento della stesura di questo documento, ma potrebbe essere esposto a tecnologie per la disabilità in futuro.

url

L'URL aperto quando un utente attiva l'app scorciatoia. Questo URL deve esistere nell'ambito del file manifest dell'app web. Se è un URL relativo, l'URL di base sarà l'URL del file manifest dell'app web.

icons (facoltativo)

Un array di oggetti di risorse immagine. Ogni oggetto deve includi la proprietà src e una proprietà sizes. A differenza delle icone manifest delle app web, Il type dell'immagine è facoltativo. I file SVG non sono supportati al momento della scrittura. Usa invece il formato PNG.

Se vuoi icone perfette, inseriscile in incrementi di 48 dp (ad esempio, 36 x 36, 48 x 48, 72 x 72, 96 x 96, 144 x 144, 192 x 192 pixel). In caso contrario, è consigliabile di utilizzare una singola icona di pixel di 192 x 192 pixel.

Come misura di qualità, le icone devono essere almeno la metà delle dimensioni ideali del dispositivo sul Android, ossia 48 dp. Ad esempio, per visualizzare una schermata xxhdpi, viene visualizzata l'icona deve essere di almeno 72 x 72 pixel. (derivato dal formula per la conversione delle unità dp per le unità pixel).

Testare le scorciatoie app

Per verificare che le scorciatoie app siano configurate correttamente, utilizza il riquadro Manifest nel Riquadro Applicazione di DevTools.

Questo riquadro fornisce una versione leggibile di molti dei file manifest proprietà, incluse le scorciatoie app. Semplifica la verifica che tutte le Le icone delle scorciatoie, se presenti, vengono caricate correttamente.

Le scorciatoie app potrebbero non essere subito disponibili per tutti gli utenti perché la modalità progressiva Gli aggiornamenti delle app web sono limitati a una volta al giorno. Scopri di più su come Chrome gestisce gli aggiornamenti del file manifest dell'app web.

Best practice

Ordina le scorciatoie app in base alla priorità

Le scorciatoie vengono visualizzate nell'ordine in cui le definisci nel manifest. Ti consigliamo di ordinare le scorciatoie app in base alla priorità poiché il limite relativo Il numero di scorciatoie app visualizzate varia in base alla piattaforma. Chrome ed Edge attivi Ad esempio, in Windows il numero di scorciatoie app è limitato a 10, mentre Chrome per Solo Android display 3. Prima di Chrome 92 per Android 7, erano consentiti 4. Google Chrome 92 ha aggiunto una scorciatoia alle impostazioni del sito, utilizzando una delle scorciatoie disponibili slot machine per l'app.

Utilizzare nomi di scorciatoie app distinti

Non devi fare affidamento sulle icone per differenziare le scorciatoie app perché potrebbero non esserlo siano sempre visibili. Ad esempio, macOS non supporta le icone nel dock menu dei collegamenti. Usa nomi diversi per ogni scorciatoia dell'app.

Misurare l'utilizzo delle scorciatoie app

Devi annotare le voci delle scorciatoie app url come faresti con start_url per scopi di analisi (ad es. url: "/my-shortcut?utm_source=homescreen").

Supporto browser

Le scorciatoie app sono disponibili sulle piattaforme e sulle versioni elencate di seguito.

Assistenza per le attività web attendibili

Bubble wrap, lo strumento consigliato per creare app per Android che utilizzano Trusted Web L'attività legge le scorciatoie app dal file manifest dell'app web e legge automaticamente genera la configurazione corrispondente per l'app per Android. Tieni presente che le icone per le scorciatoie app sono obbligatori e devono avere una dimensione di almeno 96 x 96 pixel pluriball.

PWABuilder, un ottimo strumento per trasformare facilmente un'app web progressiva in un'app Attività web supporta le scorciatoie app con alcuni caveat.

Per gli sviluppatori che integrano manualmente l'Attività web attendibile nel proprio Android è possibile usare le scorciatoie app per Android per implementare la stessa i comportamenti dei modelli,

Esempio

Controlla l'esempio di scorciatoie app e la relativa fonte.

Link utili

• MDN
• Specifiche
• Esempio di scorciatoie app | Origine di esempio di scorciatoie app
• Componente Blink: UI>Browser>WebAppInstalls