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 la libreria PredicateBuilder per eseguire query tramite Entity Framework che usano or su più campi
Creare una libreria CSS universale - Rotazione degli elementi
Inference di dati strutturati da testo con Semantic Kernel e ASP.NET Core Web API
Potenziare la ricerca su Cosmos DB con Full Text Search
Autenticazione di git tramite Microsoft Entra ID in Azure DevOps
Analizzare il contenuto di una issue con GitHub Models e AI
Utilizzare una qualunque lista per i parametri di tipo params in C#
Creare un agente A2Acon Azure Logic Apps
Combinare Container Queries e Media Queries
Eseguire script pre e post esecuzione di un workflow di GitHub
Interagire con Azure DevOps tramite MCP Server
Selettore CSS :has() e i suoi casi d'uso avanzati
I più letti di oggi
- Analizzare il contenuto di una issue con GitHub Models e AI
- Integrare OpenAI tramite Aspire
- Visualizzare un template per browser mobile tramite un custom control ASP.NET
- Visualizzare l'errore esteso di ASP.NET in base all'indirizzo IP di connessione
- Interagire con Azure DevOps tramite MCP Server
- Documentare i servizi REST con Swagger e OpenAPI con .NET 9
- Ottimizzare il codice #javascript con i Shorthand #patterns - terza parte https://aspit.co/ca7 di @morwalpiz
- Creare un agente A2Acon Azure Logic Apps
- Usare il RoleManager per gestire i ruoli con ASP.NET Identity