Le scorciatoie app consentono di accedere rapidamente ad alcune azioni comuni di cui gli utenti hanno bisogno più frequentemente.
Per migliorare la produttività degli utenti e facilitare il ricoinvolgimento con le attività chiave, la piattaforma web ora supporta le scorciatoie app. Consentono agli sviluppatori web di fornire un rapido accesso ad alcune azioni comuni di cui gli utenti hanno bisogno di frequente.
Questo articolo ti insegnerà a definire le scorciatoie app. Inoltre, apprenderai alcune best practice associate.
Informazioni sulle scorciatoie app
Le scorciatoie app consentono agli utenti di avviare rapidamente attività comuni o consigliate all'interno della tua app web. L'accesso semplice a queste attività ovunque sia visualizzata l'icona dell'app migliorerà la produttività degli utenti e il loro coinvolgimento con l'app web.
Per richiamare il menu delle scorciatoie delle app, fai clic con il tasto destro del mouse sull'icona dell'app nella barra delle applicazioni (Windows) o nel 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 mostrato solo per le app web progressive installate sul computer o sul dispositivo mobile dell'utente. Controlla Installazione nel nostro modulo "Scopri PWA" per scoprire i requisiti di installabilità.
Ogni scorciatoia dell'app esprime un intent 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ù richiesti)
Definisci le scorciatoie app nel manifest dell'app web
Le scorciatoie app sono facoltativamente definite nel manifest dell'app web, un file JSON che indica al browser la tua app web e il suo comportamento quando è installata sul computer o sul dispositivo mobile dell'utente. Più precisamente, vengono dichiarati nel membro dell'array shortcuts. Di seguito è riportato un esempio di potenziale manifest di un'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 mostrata all'utente.
short_name(facoltativo)- L'etichetta leggibile utilizzata dove lo spazio è limitato. Ti consigliamo di fornirlo, anche se è facoltativo.
description(facoltativo)- Lo scopo leggibile della scorciatoia app. Non viene utilizzata al momento della scrittura, ma potrebbe essere esposta alle tecnologie per la disabilità in futuro.
url- L'URL aperto quando un utente attiva la scorciatoia app. Questo URL deve rientrare 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 risorsa immagine. Ogni oggetto deve includere una proprietà
srce unasizes. A differenza delle icone del manifest delle app web, il valoretypedell'immagine è facoltativo. I file SVG non sono supportati al momento della scrittura. Utilizza il formato PNG.Se vuoi ottenere icone perfette con pixel, forniscile in incrementi di 48 dp (ad esempio icone 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.
Come misura di 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 delle app
Per verificare che le scorciatoie delle app siano configurate correttamente, utilizza il riquadro Manifest nel riquadro Applicazione di DevTools.
Questo riquadro fornisce una versione leggibile di molte proprietà del file manifest, incluse le scorciatoie delle app. Consente di verificare facilmente che tutte le icone delle scorciatoie, se presenti, vengano caricate correttamente.
Le scorciatoie app potrebbero non essere immediatamente 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 delle app per priorità
Le scorciatoie vengono visualizzate nell'ordine in cui le definisci nel manifest. Ti invitiamo a ordinare le scorciatoie delle app in base alla priorità perché il limite al numero di scorciatoie app visualizzate varia a seconda della piattaforma. Ad esempio, Chrome ed Edge su Windows limitano il numero di scorciatoie app a 10, mentre Chrome per Android ne mostra solo 3. Prima di Chrome 92 per Android 7, ne erano consentiti 4. Chrome 92 ha aggiunto una scorciatoia alle impostazioni dei siti, occupando uno degli slot disponibili per le scorciatoie dell'app.
Usare nomi distinti per le scorciatoie app
Non fare affidamento sulle icone per distinguere le scorciatoie delle app, in quanto potrebbero non essere sempre visibili. Ad esempio, macOS non supporta le icone nel menu delle scorciatoie sul dock. Usa nomi distinti per ogni scorciatoia app.
Misurare l'utilizzo delle scorciatoie app
Dovresti annotare le voci url delle scorciatoie app 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 nelle piattaforme e nelle versioni elencate di seguito.
Assistenza per Attività web attendibili
wrapper, lo strumento consigliato per creare app Android che utilizzano Attività web attendibili, legge le scorciatoie app dal 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 nel Bubblewrap.
PWABuilder, un ottimo strumento per trasformare facilmente un'app web progressiva in un'attività web attendibile, supporta le scorciatoie delle app con alcune avvertenze.
Per gli sviluppatori che integrano manualmente Attività web attendibile nella propria app Android, è possibile utilizzare le scorciatoie per le app Android per implementare gli stessi comportamenti.
Esempio
Consulta l'esempio di scorciatoie app e la relativa fonte.