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
Utilizzare il metodo CountBy di LINQ per semplificare raggruppamenti e i conteggi
Ottimizzare le performance usando Span<T> e il metodo Split
Disabilitare le run concorrenti di una pipeline di Azure DevOps
Gestire gli errori nelle Promise JavaScript con try()
Configuratione e utilizzo .NET Aspire CLI
Gestire progetti NPM in .NET Aspire
Eliminare record doppi in Sql Server
Evitare memory leaks nelle closure JavaScript
Configurare e gestire sidecar container in Azure App Service
Inference di dati strutturati da testo con Semantic Kernel e ASP.NET Core Web API
Recuperare App Service cancellati su Azure
Conoscere il rendering Server o WebAssembly a runtime in Blazor
I più letti di oggi
- Integrare OpenAI tramite Aspire
- Usare l'explicit operator per eseguire codice di mapping in C#
- Interagire con Azure DevOps tramite MCP Server
- Creare un agente A2Acon Azure Logic Apps
- Office 2007 Developer Conference, il 13 e 14 Giugno a Milano
- Gestione file Javascript in Blazor con .NET 9
- Definire il colore di una scrollbar HTML tramite CSS