Le scorciatoie app consentono di accedere rapidamente a una manciata di azioni comuni di cui gli utenti hanno spesso bisogno.
Per migliorare la produttività degli utenti e facilitare il ricoinvolgimento con le attività principali, la piattaforma web ora supporta le scorciatoie delle app. Consentono agli sviluppatori web di fornire accesso rapido a una manciata di azioni comuni di cui gli utenti hanno spesso bisogno.
Questo articolo illustra come definire le scorciatoie delle app. Inoltre, scoprirai alcune best practice associate.
Informazioni sulle scorciatoie app
Le scorciatoie delle app aiutano gli utenti ad avviare rapidamente attività comuni o consigliate all'interno dell'app web. Un facile accesso a queste attività da qualsiasi posizione in cui è visualizzata l'icona dell'app migliorerà la produttività degli utenti e aumenterà il loro coinvolgimento con l'app web.
Per aprire il menu delle scorciatoie delle app, fai clic con il pulsante destro del mouse sull'icona dell'app nella barra delle applicazioni (Windows) o sul dock (macOS) sul desktop dell'utente oppure tocca e tieni premuta l'icona in Avvio applicazioni dell'app su Android.
Il menu delle scorciatoie delle app viene visualizzato soltanto per le app web progressive installate sul dispositivo desktop o mobile dell'utente. Controlla la sezione Installazione nel nostro modulo "Impara a utilizzare la PWA" per scoprire i 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
indica al browser la tua app web e il suo comportamento quando
viene installata sul dispositivo mobile o desktop dell'utente. In particolare, sono dichiarati nel membro dell'array shortcuts. Di seguito è riportato un
esempio di 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 name e url. Gli altri membri sono facoltativi.
name- L'etichetta leggibile per la scorciatoia dell'app quando viene visualizzata all'utente.
short_name(facoltativo)- L'etichetta leggibile utilizzata nei luoghi in cui lo spazio è limitato. Ti consigliamo di fornirlo, anche se è facoltativo.
description(facoltativo)- Lo scopo leggibile della scorciatoia dell'app. Non viene utilizzato al momento della stesura, ma in futuro potrebbe essere esposto a tecnologie per la disabilità.
url- L'URL si è aperto quando un utente attiva la scorciatoia dell'app. Questo URL deve esistere nell'ambito del file manifest dell'app web. Se si tratta di 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 includere le proprietà
srcesizes. A differenza delle icone manifest delle app web, iltypedell'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 (ovvero icone di 36 x 36, 48 x 48, 72 x 72, 96 x 96, 144 x 144, 192 x 192 pixel). In caso contrario, ti consigliamo di utilizzare una singola icona di 192 x 192 pixel.
Per garantire la qualità, le icone devono essere almeno la metà delle dimensioni ideali del dispositivo su Android, ovvero 48 dp. Ad esempio, per essere visualizzata su uno schermo xxhdpi, l'icona deve essere di almeno 72 x 72 pixel. Questo valore è derivato dalla 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 molte delle proprietà del file manifest, incluse le scorciatoie app. Semplifica la verifica del corretto caricamento di tutte le icone delle scorciatoie, se disponibili.
Le scorciatoie app potrebbero non essere subito disponibili per tutti gli utenti perché gli aggiornamenti delle app web progressive 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 invitiamo a ordinare le scorciatoie app per priorità perché il limite al numero di scorciatoie app visualizzate varia in base alla piattaforma. Chrome ed Edge su Windows, ad esempio, limitano a 10 il numero di scorciatoie app, mentre Chrome per Android ne mostra solo 3. Prima di Chrome 92 per Android 7, erano consentiti 4. Chrome 92 ha aggiunto una scorciatoia alle impostazioni del sito, prendendo uno degli slot di scorciatoie disponibili per l'app.
Utilizzare nomi di scorciatoie app distinti
Non fare affidamento sulle icone per differenziare le scorciatoie delle app poiché potrebbero non essere sempre visibili. Ad esempio, macOS non supporta le icone nel menu delle scorciatoie del dock. 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 del browser
Le scorciatoie app sono disponibili sulle piattaforme e sulle versioni elencate di seguito.
Assistenza per le attività web attendibili
Il Bubble wrap, lo strumento consigliato per creare app per Android che utilizzano Attività web attendibile, legge le scorciatoie app dal file manifest dell'app web e genera automaticamente la configurazione corrispondente per l'app per Android. Tieni presente che le icone per le scorciatoie app sono obbligatorie e devono essere di almeno 96 x 96 pixel in Bubble wrap.
PWABuilder, un ottimo strumento per trasformare facilmente un'app web progressiva in un'attività web attendibile, supporta le scorciatoie app con alcuni caveat.
Per gli sviluppatori che integrano manualmente l'Attività web attendibile nella propria applicazione per Android, è possibile utilizzare scorciatoie app per Android per implementare gli stessi comportamenti.
Esempio
Controlla l'esempio di scorciatoie app e la relativa fonte.