Nella versione 102 di Chrome, troviamo nuove specifiche per l'interazione delle PWA con il file system, rendendo un'applicazione web sempre più simile a una nativa. Tali modifiche sono già disponibili anche su altri browser.
Per arrivare a ciò, non dovremmo agire solo sul codice, ma modificare anche il manifest.json, il file che verrà letto dal dispositivo per consentire l'intallazione come PWA. Al suo interno avremo bisogno di aggiungere la proprietà "file_handlers" come mostrato nell'esempio.
{ [...], "file_handlers": [ { "action": "/open-csv", "accept": { "text/csv": [".csv"] }, "icons": [ { "src": "csv-icon.png", "sizes": "256x256", "type": "image/png" } ], "launch_type": "single-client" }, { "action": "/open-svg", "accept": { "image/svg+xml": ".svg" }, "icons": [ { "src": "svg-icon.png", "sizes": "256x256", "type": "image/png" } ], "launch_type": "multiple-client" } ] }
Tramite l'array di oggetti abbiamo specificato la possibilità di aprire sia file csv, in modalità singola, che svg, con la possibilità di selezionare più file.
Per concludere dovremmo scrivere il codice JavaScript per aprire la finestra di selezione adeguata per tali file. Anche in questo caso possiamo usare tutto quello che il sistema ci fornisce gratuitamente, scrivendo poche semplici righe di codice.
// verifico l'esistenza della funzionalità if ('launchQueue' in window && 'files' in LaunchParams.prototype) { // imposto il gestore del selettore del file launchQueue.setConsumer((launchParams) => { // Verifico che vi sia almeno un file if (!launchParams.files.length) { return; } for (const fileHandle of launchParams.files) { // Gestione del file } }); }
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Usare le collection expression per inizializzare una lista di oggetti in C#
Utilizzare domini personalizzati gestiti automaticamente con Azure Container Apps
Gestire i null nelle reactive form tipizzate di Angular
Inizializzare i container in Azure Container Apps
Load test di ASP.NET Core con k6
Implementare il throttling in ASP.NET Core
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Reactive form tipizzati con FormBuilder in Angular
Utilizzare le Cache API di JavaScript per salvare elementi nella cache del browser
Ottimizzare il mapping di liste di tipi semplici con Entity Framework Core
Eseguire operazioni con timeout in React
Eseguire attività con Azure Container Jobs
I più letti di oggi
- Utilizzare WebAssembly con .NET, ovunque
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- Utilizzare il trigger SQL con le Azure Function
- Disabilitare automaticamente un workflow di GitHub (parte 2)
- Paginare i risultati con QuickGrid in Blazor
- Ottimizzazione dei block template in Angular 17