In case you, too, have been bitten by the "no JS alert() in PWA" bug in #Vivaldi which renders a few #PWA's partially broken, it's a relatively recent bug by which I mean it's 2 years old
TBF: I haven't paid a dime for Vivaldi, they don't owe me anything, and it's a fine piece of tech. I can still be annoyed by bugs, though.
Bonjour Masdodon,
J'ai une question aux experts du développement web.
J'ai une appli qui gère ma liste de disques. Jusque là tout va bien. Pour mieux la gérer, j'ai imprimé des étiquettes avec QR Code, pour chaque disque, avec un code unique, que j'ai collé au dos des pochettes de disques. Pour aller plus vite et me passer d'une appli de scan de QR Codes, j'ai simplement développé dans mon appli de gestion de disques, une page qui fait ce taf. J'ai juste une zone pour scanner les étiquettes et ça fait la mise à jour dans la base de données. Maintenant, je voudrais transformer cette page en #PWA.
Des recommandations pour faire un truc rapide et simple ?
the year is 2024. I now have all of my favorite social media services on my dock as cute little web apps. Sandboxed, snappy, and with full push notification support. Each one is able to freely experiment with UI/UX to push beyond what "native" UI frameworks offer (with Phanpy being a stunning example of what that freedom unlocks). And they can all publish changes dozens of times a day with no overhead and no app review to slow them down.
I've always thought that Vivaldi was more of a UI experiment, what with all the drawers and such, but it's really benching well. I should daily drive it for a while and see how the PWA support is.
Does anyone know of a self-hostable, lightweight service that I can send a message to and it will reply with a push notification after a given date and time? 🤔
Sadly, notifications cannot be scheduled on-device in PWAs, they have to be pushed to the service worker by a server. 😅
Curious to see if there’s something like that out there before I build my own. 😊
https://octospacc.altervista.org/wp-content/uploads/2024/03/image-19.pngPrima che scatti non solo un nuovo giorno ma addirittura il nuovo mese (!), mi sbrigo a scrivere prima che sia troppo tardi per postare il #memino (sarebbe una tragedia)… momento 🅱️uona #Pasqua quindi.Quindi, ora che ho la vostra attenzione: un po’ curioso che avvenga in questa giornata, ma mi era venuta una mezza voglia di far risorgere il sito della #SalaMuseoGames, che per cause di forze maggiori ormai era bello che stagnante. No, in realtà c’è un motivo… collegato alla mia nuovissima micro-fissazione di usare #webapp anche per i giochi su mobile, quando possibile, per tutto quel discorso di non sputtanarmi il telefono pure stavolta. In sostanza:
Sarebbe buona cosa impostare sulle pagine del sito, oltre ai #PWA manifest (relativi sia a tutto il #sito, che a singoli #videogiochi ospitati) che è un attimo implementare, anche il classico Service Worker di cache offline (ora che li ho compresi benissimo), così da rendere tutta l’operazione una roba ancora più godibile su #mobile. Possono essere anche fatti piccoli aggiustamenti, del tipo di: il gioco si apre già a tutto schermo quando installato come PWA (invece di far vedere tutte le cose solite della pagina web). 🤖️
Giravo un po’ su Appsco.pe per valutare giochini a casaccio, e mi sono accorta che si e no 1/5 di quelli che ho provato ad aprire erano link morti… ecco, per quanto il #web moderno come piattaforma di esecuzione software sia meraviglioso soprattutto per gli utenti, come #piattaformadi distribuzione è veramente fragilissima e, al contrario del classico giochino Windows o Android (o anche Flash…), che (di norma) sai che se ti scarichi il file ce l’hai per sempre, con gli applicativi #HTML5 è un attimo e questi possono sparire nel vuoto (la mia cache offline sul mio singolo telefonino relegata a soltanto il mio#browser ovviamente non conta come #backup). Per qualche motivo (abitudine…) sono finita a caricare solo ROM di vecchie console sul sitarello, anche se il mio intento sarebbe stato quello di mettere potenzialmente qualsiasi cosa, inclusi i #giochi in HTML5; tutto quello che ho messo finora si trova già in millemila romset strapreservati e ben organizzati, quindi con quelli il valore del mio lavoro è giusto il fornirli su una galleria “senza attrito”, ma nulla di estremamente utile, mentre invece con questi altri… 😤️
Vabbé, secondo voi riprenderò in mano la Sala Museo o ricadrà tutto nell'oblio? (Sondaggio anonimo, aprite il link originale al post per votare se leggete da altrove plz)- Riprenderò da ora ma lasciando un buco di quei 2 mesi inattivi
Riprenderò recuperando anche i 2 mesi di giochi arretrati
Oooh, #GraphiteEditor has the node graph functionality, which allows you to compose vector objects from the primitives like fill, stroke, transform and live filters in a visual manner!
Node graph interface and filters both give me this nice break-out I needed after LPEs in #Inkscape. Don't get me wrong: that program is THE legend, developers are masters of vectors, and it's purely native Gtk toolkit on which application is built. Right now, their priority is CMYK support, so follow if you're into printing.
I just love to experiment with shiny new software that's #OpenSource, especially one that uses #RustLang and #web to its advantage.
Watch 'em apply circular repeat filter on a mere line to produce this fun sparkle effect. (It is Graphite's official channel, by the way. Wish they were on Mastodon?)
Sono praticamente 36 ore che non posto e lo so che siete in astinenza, ma avevo https://octospacc.altervista.org/2024/03/26/pwtorturaaaa/ di risolvere quel #problema con le #PWA una volta per tutte. E ora, nonostante un’altra frazione di sanità mentale sottrattami dagli spiritelli del silicio, dolori perché sto seduta per ore alla scrivania e tutta storta, e sonno perché ieri sera ho perso un sacco di tempo a debuggare un errore stupidissimo rimanendo sveglia fino alle 2 per poi arrendermi perché stavo veramente morendo, quantomeno ce l’ho fatta… 🤯️
Cercando con estrema #disperazione ieri mattina, mi accorgo di una cosa documentata alla bene e meglio, trovando prima una menzione su MDN ad un permesso webRequestFilterResponse.serviceWorkerScript, che servirebbe a regola per permettere alle #estensioni di intercettare i caricamenti dei Service Worker, e poi un thread bugzilla (#1636629) che pare abbia portato proprio all’introduzione di questa separazione di permessi. Ho scaricato il #codice dimostrativo per il bug, l’ho un attimo sistemato per tenere conto di questa misura di sicurezza poi introdotta e, certo abbastanza, il coso riusciva a fare quello che io volevo dall’inizio, senza ricorrere a bruttissime e fragilissime #hack (che a questo punto io nemmeno divulgo visto che non ho dovuto implementarle, per non sporcarmi la reputazione come developer, che già è molto bassa visto che prediligo il #webdev). 🔮️
A questo punto era quasi solo questione di rifiniture, un po’ creare il popup per le impostazioni della mia #estensione (che però mi ha richiesto diverse ore di design e implementazione fatti in contemporanea, perché volevo farle bene, non buttarci dentro bottoni a cazzo per il gusto di), e un po’ capire come #programmare il worker che gestisce #cache e richieste di rete #offline. Solo che qui ho sclerato perché… inizialmente con il codice preso da Chrome for Developers non andava, e pensavo fosse un problema mio, ma invece sembra proprio colpa loro, le loro demo non vanno proprio in #Firefox (ma non ho testato nemmeno in Chromium)… quindi ho provato quello offerto da MDN, ma anche qui nada, solo che ormai stavo crollando e quindi vado a mimir… stamattina vedo meglio e quest’ultima implementazione in effetti scopro che funziona, ma a me non andava perché, nel modo in cui iniettavo il #ServiceWorker trasformandolo da oggetto a stringa, una variabile che referenziavo non era accessibile nel contesto di esecuzione effettivo dello script, e quindi l’accesso alla cache falliva, ma io non me ne sono accorta subito perché già gli strumenti di #debugging del #browser sono mezzi scassati per questi casi speciali, ma io poi avevo pure un try-catch di mezzo che quindi sopprimeva gli errori alzati dall’interprete… la #pazzia. 😫️ 😩️
C’è un #casino di mezzo con la pubblicazione di #addon per #Mozilla, quindi praticamente ora il mio è in revisione, ma se tutto va bene dovrebbe prossimamente apparire sulla pagina https://addons.mozilla.org/en-US/firefox/addon/offline-caching/; in ogni caso, chi volesse usarlo da subito (come me sul telefono in primis) può scaricare da qui il file firmato da installare a mano. Edit: un’oretta dopo, l’estensione è approvata! 💖️
Dexie is a great tool for persistently storing data in a #PWA context and today they finally released a way to sync that data without having to run your own servers: Dexie Cloud.
I’m planning on taking a deeper look at it next month, but I’m pretty excited for it! Tools like this could make side-projects that sync so much easier. 😊
Credo che fare quello che volevo fare riguardo le #PWA, a maggior ragione ora che mi sto informando un po’, è più complicato di quanto credevo… ecco perché ai tempi cercai vie apparentemente più impegnative. Il lavoro di ieri è comunque valido e meglio di nulla, ma ho paura che la mancanza del supporto offline si possa sentire, perché quel metodo non la aggiunge magicamente, e riuscire a farlo appunto non è una passeggiata. 😤️
Per poter “funzionare #offline”, un sito web deve registrare un Service Worker che risponde ad un particolare evento restituendo risorse precedentemente cachate. Sarebbe abbastanza semplice, se non fosse che, per una scomodissima combinazione di requisiti di sicurezza e mancanza di #API nei browser, non c’è letteralmente alcun modo pratico di registrare uno di ‘sti cosi tramite estensioni, figurarsi userscript. Nello specifico, gli script per i ServiceWorker devono essere necessariamente serviti su protocollo https: (quindi niente blob: o data:, cosa che ci taglia via immediatamente gli inject con gli userscript, ma nemmeno file: o http:), per forza dallo stesso dominio della pagina (e quindi non si scappa ospitando per conto proprio solo quel file senza clonare il #sito), e come ho detto non ci sono API per iniettarne da #estensioni. 😨️
Ovviamente, andando per la strada di creare un’estensione, in pura teoria non servirebbe nemmeno preoccuparsi di usare questo metodo, perché a quel punto si potrebbe direttamente usare l’estensione per intercettare il traffico, salvandolo quando è nuovo, per poi servirlo da una cache quando non c’è Internet. Le API sembravano proprio adatte, quindi mi sono messa a fare varie prove, per poi scoprire che… non riesco in alcun modo a visualizzare il contenuto restituito per una pagina se non c’è #Internet: la schermata di errore del #browser prende precedenza, e nessuna delle cose che ho provato riesce a sovrastarla. E anche potenziali #workaround, come usare le API per modificare il contenuto della pagina di errore pur rimanendo sull’URL desiderato, col piffero che funzionano! (E no, sembra proprio che io non possa usare le richieste #web dell’estensione per servire una risposta fake ad un path da registrare come worker, l’evento viene triggerato ma il navigatore non si beve il risultato.) 😭️
In poche parole: ennesimo #rabbithole#JavaScript che mi sta completamente consumando, e anche molto velocemente, perché più trovo ostacoli alla mia #idea più cerco di andare veloce per superarli, ma più ne incontro sempre di nuovi e più il cervellino ammuffito deve elaborare, ma ci sono aspetti del #webdev che sarebbe meglio non elaborare proprio. A questo punto, tutte le strade che posso prendere per risolvere il #problema sono in ogni caso #hack: ne ho in mente qualcuna rimanendo con un’estensione, che comporterebbe comunque un dietro le quinte estremamente bizantino ma nessun particolare compromesso di sicurezza o usabilità… oppure, ben due soluzioni ancora peggiori (e in parte simili), che spero vivamente di non dover usare; sarebbe anche peggio. Comunque, che cavolo, questa piattaforma di #sviluppo è piena di risorse, una maniera prima o poi si troverà. ☠️
Bene, #Firefox mi sta facendo più o meno scimunire per bene per quanto riguarda il supporto alle #webapp progressive (su #mobile dico, su desktop non ci pensate nemmeno, Mozilla è capa tosta). Ho perso veramente le ultime ore a capire perché cavolo Chromium accetta di buon grado anche il più scarno dei #manifest, permettendo senza fatica di raggiungere l’obiettivo di una pagina web che ha la sua finestra dedicata che sembra nativa… mentre sulla volpe un sito si installa bene, un altro si installa ma manca l’icona, un altro ancora non si installa e quindi magari ha l’icona perfetta però si apre come scheda del #browser. 🥴️
Ovviamente, anche #Mozilla Developer Network manca di #informazioni soddisfacenti a riguardo: certamente potrei in teoria esagerare e implementare tutti i #metadati possibili, ma visto che viviamo nel mondo reale devo chiedermi qual è il minimo sindacale. Dopo qualche #test, non ho alcuna risposta definitiva, ma almeno delle linee guida generali di cosa mettere nel manifest si:
name, display: in teoria sono obbligatori, ma francamente anche se non lo fossero sarebbero da mettere ugualmente, quindi non ho manco provato senza; il nome della app serve, così come serve specificare se vuoi che vada a schermo intero o lasci almeno la UI del sistema operativo (e/o quella del browser, a cui io dico no grazie)
start_url, scope: non so se per solo uno dei due parametri o entrambi ma, se non si impostano correttamente, magari la #app si installa pure e funziona ugualmente (in loro assenza, da standard il browser dovrebbe usare l’URL corrente per le sue considerazioni), ma ho notato che su Firefox può succedere che l’icona non viene visualizzata; anche questi, quindi, è bene metterli
icons: questo è un array di oggetti che è ancora più #complicato, ma per farla breve, serve almeno un’icona che sia in formato PNG per far rilevare la pagina come #PWA, e nello specifico ne serve una che sia abbastanza grande (128×128 è il minimo credo? almeno sul mio dispositivo, in realtà non so se su altri cambia, però Chromium fa in ogni caso meno capricci) per avere una scorciatoia di lancio che abbia effettivamente un’icona, e non la prima lettera del nome; i parametri sizes e purpose rendono tutto ancora più incasinato, se si ha 1 sola icona si fa prima a settare entrambi come "any" (però intanto il type sembra si possa omettere)
Perché mi interessa tutto questo? Perché non solo dovrei sistemare le mie #applicazioni, che appunto non si installano tutte come dovrebbero (e per alcune dovrei anche implementare i Service Workers per farle andare offline, ma quella è un’altra storia), ma perché fin troppe app #web programmate da altri non hanno proprio la decenza di supportare un minimo lo #standard, essendo pensate come #siti vecchio stile, e quindi non le si riesce ad usare in maniera soddisfacente su mobile. Volevo fare un mio browser nativo (wrapper dell’Android System Webview banalmente) ai tempi come soluzione, però non solo credo rimarrà nel limbo per sempre, ma non potrei mai implementare tutte le cose che mi sono utili in navigatori completi come Firefox e di cui giornalmente giovo, quindi è chiaro che la soluzione vera è semplicemente apparare quest’ultimo. ⛏️
Questa #idea mi è venuta circa stamattina senza alcun trigger particolare (ormai le mie migliori sono sempre così), e ho provato a cercare “un modo per forzare qualunque sito come PWA su #Android”, cosa che avevo già fatto tempo fa senza arrivare a nulla, e ho quantomeno trovato un #userscript, questo qui. Ha però un sacco di problemi (tra cui quelli che mi sono scimunita per levigare un attimino), quindi tant’è che ho fatto il mio ora con lo stesso meccanismo: https://greasyfork.org/en/scripts/490784-pwas-anywhere. In pratica genera al volo un manifest e lo inietta in qualunque pagina se questa non include già un suo, così da farlo rilevare al browser. Testato su vari siti e, nonostante i punti ancora da sistemare, è meglio avere lui che non avere nulla; però tra tutti quelli su cui ancora non funziona, ci sono i sitarelli di Google, mannaggia (più tanti altri ancora non provati)… dovrò aggiustare, e qualche metodo lo ho già in testa. 😳️
The #DigitalMarketsAct mandates Meta to "enable end users to freely choose to opt-in to [combining or cross-using personal data] by offering a less personalised but equivalent alternative".
When I pointed out to Meta that by offering users to either #consent to #SurveillanceAds or pay € 275 per year for #Instagram & #Facebook isn't "equivalent alternative" they said, Meta has to do that because of #GDPR 😤 Really??