next-pwa VS Image-to-Braille

Thank you for trying it and asking questions. Let me reply to them below.

> Could you give a brief overview of how the project is built, or what libraries are used? I found two in the source, React and Workbox. I've never heard of Workbox before, and I'm still figuring out how service workers are used. But it seems like a big part of the source.

For building, I used Next.js with static generation, not using Server-side rendering. But it's not an important part because it doesn't rely on Next.js features so much.

About Workbox, the app uses them with next-pwa (https://github.com/shadowwalker/next-pwa) for providing caching strategies and offline behavior as Progressive Web App. For example, the app registers several precached files via Workbox. Precached files are fetched and cached by the service worker and these caches can be used while offline. Also, Workbox can configure runtime caching strategies. You can see details in Workbox documentation (https://developer.chrome.com/docs/workbox/).

The app also uses the Service Worker to connect IndexedDB as a local database and send HTTP requests to synchronize data with Google Drive. By using the Service Worker, these methods don't block the user interaction from the main thread and Service Worker can run in the background to synchronize data even if the browser window is suddenly closed.

We tried to use next-offline and next-pwa, but we were only able to precache the static assets.

It's possible that next-pwa might support precaching pages in the future. Subscribe to issue 252 to keep up to date on that.

There's next-offline and next-pwa (and some comparison too). But has anyone here made a PWA with NextJS? Now I am not only referring to service workers/offline functionality, but also icons, adding to homescreen, manifest, and other PWA features. Does anyone have any good examples or guides to refer to?

next-pwa, for PWA support.

Project setup: I applied for a DigitalOcean credit, created a Next.js static app, set up Tailwind, TypeScript and next-pwa. I deployed the app to DigitalOcean App Platform and it just works (except the part where I waited for the spinner to finish. By the way everyone, please don't add a spinner if you will not also automatically refresh it.)

shadowwalker/next-pwa#132 improves error messages

I just used this website: https://505e06b2.github.io/Image-to-Braille/

Check out https://github.com/505e06b2/Image-to-Braille, https://github.com/MathEnthusiast314/bad-apple

- i made these :) converter to change pictures into ascii: https://505e06b2.github.io/Image-to-Braille/ - to fit them in twitch chat keep width below 30 or they'll not show up properly and invert them so they look better :) - To convert an image, right click the image you want from a google photos page like https://photos.app.goo.gl/Vmtj2DyoYbDnheZp6 click open link in new tab or new window, whichever you like, right click the image in the new tab, click save image as and choose a folder to save it to on your computer, then click choose file field in https://505e06b2.github.io/Image-to-Braille/ and select the file from the folder you saved it to. - newly completed ones: https://photos.app.goo.gl/ZyoFcjJrs8BmfjTA8 - all my completed ones: https://photos.app.goo.gl/Vmtj2DyoYbDnheZp6

The method i employ is just use microsoft paint 3d or a simple paint program like it, start by opening https://505e06b2.github.io/Image-to-Braille/ set width to 30 and invert on, but decrease by 1 as needed to keep character limit under 500 or so as they generally won't fit in twitch chat if they have more characters than that or a greater width and twitch chat generally limits messages to 500 characters, then open the image, cropped as desired, take a fill bucket with 100% tolerance and fill the canvas white then take a marker or similar tool and choose black and draw diagonal, horizontal and vertical lines increasing width as needed until they just barely show up when you save the image and put it into the converter: https://505e06b2.github.io/Image-to-Braille/ and once you have that width number from the marker revert changes with ctrl + z, a copy, or whatever else until you have the original image. That width will serve to outline the image, use a black marker to outline the image, fill the background black, and fill parts white or black depending on if they're light or dark, and another outline over the image to solidify lines as needed because usually fills in microsoft paint 3d intrude on the outlines some, and finish with drawing any details that haven't been done.

- WORSE METHOD, To convert an image, as it uses your memory, but it'll save the image to your computer or you can just choose an image file from your computer : Or right click the image you want from a google photos page like https://photos.app.goo.gl/Vmtj2DyoYbDnheZp6 click open link in new tab or new window, whichever you like, right click the image in the new tab, click save image as and choose a folder to save it to on your computer, then click choose file field in https://505e06b2.github.io/Image-to-Braille/ and select the file from the folder you saved it to.

⠀⠀⠀⡝⡮⠯⢊⠈⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⡪⡺⡢⡑⢌⠢⡊ ⠀⠀⠀⠚⠉⠈⠀⠀⠀⠂⠀⠀⠀⢀⢀⢠⢠⢠⡠⡠⣀⢀⠄⠀⠈⠂⠑⢅⢕⠨ ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢤⢱⢱⢪⢮⣳⢯⢯⣳⢧⡳⣕⠥⡀⠀⠀⠐⠐⢅ ⢀⠄⠐⠀⠀⠀⡀⠄⢂⠑⢐⢕⢕⢵⢹⣪⢾⢽⣻⢮⡳⣕⢵⡹⡔⡀⠀⠀⠈⠰ ⣤⠁⠀⠀⠀⢀⠂⠡⠀⡂⡇⡇⣇⢧⢳⢕⡯⣻⢞⣯⡳⣕⢧⢇⢧⠡⠀⠀⠀⡑ ⣿⠀⠀⠀⢈⠀⠈⡄⢕⢕⢕⢕⢕⢕⢕⢗⡝⣞⢽⢾⣝⢮⢎⢧⢳⠡⠂⠀⠀⢘ ⣷⡅⠀⠀⠀⠄⠁⠈⠊⠜⢌⠪⡊⢎⢎⠎⡎⡎⠎⠓⠕⠑⠍⠳⠱⡕⡄⠀⠀⡆ ⣯⣷⠀⠀⠁⡐⠐⠀⠀⠀⠀⠀⠈⠐⡔⣑⠐⠠⠀⠀⠀⡀⠐⠀⢂⢭⣂⠀⠀⡪ ⣷⣻⠀⢀⢂⠀⠀⠈⠀⠈⠀⠀⠀⢜⢜⣮⠈⠀⠀⠈⠀⡈⡅⢆⣐⣩⢖⠀⡀⡇ ⣿⣺⠀⠐⡀⠀⠀⠂⠀⠀⢀⠀⠀⢕⢕⡗⡕⢔⢄⢄⠅⡡⠱⡕⡆⡅⢳⠀⠐⡕ ⣟⡾⠀⠐⠀⠡⡢⡣⡢⢃⠢⠀⠀⡰⣱⢱⢑⢕⠢⠢⡑⡌⣎⢣⢫⡺⢔⠁⣎⢧ ⣯⢇⠄⠠⠀⡑⠐⠅⠂⠀⠀⠂⠀⢆⢎⢎⢆⠕⢕⠱⡀⠀⠀⠁⡑⡌⢇⢽⢺⢣ ⡯⣯⢧⡀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠒⠪⠈⢂⠡⡑⠕⠅⠅⠀⠀⠀⢣⠢⡱⡑⢎ ⡯⣯⢯⢂⠀⠄⠄⠄⠀⠀⠀⠀⠀⠀⠀⠔⠐⠁⠁⡁⢄⠀⠠⢀⠠⡘⢔⡢⡡⡑ ⡯⣗⣟⢸⡠⠈⠌⠄⠀⠘⡦⣆⡦⣤⣄⣦⣮⣾⣺⣾⠚⠠⡃⡂⡕⠨⡰⢨⠐⡌ ⡯⣗⡯⣞⡽⣄⠑⠌⠄⠀⠈⠋⠟⢯⢷⣻⢽⠚⡙⢅⠀⡕⢕⠬⢐⢅⠣⡁⡂⠈ ⣟⢮⢯⠎⣟⢞⢆⠈⠔⠀⢀⠀⠐⢆⢤⠤⣔⠼⡛⢔⢸⢸⢸⠨⠰⡨⡂⡢⠀⠀ ⣗⠽⠹⠑⢈⠠⠀⠄⠈⠄⠀⠈⠔⠠⠠⡨⡐⢕⢔⢕⢕⢕⠕⢌⢝⠈⢳⢵⣀⠀ ⠀⠠⢈⠀⡐⠨⢀⠁⠀⠀⠈⠄⠡⡡⡑⢔⠌⡆⡇⣎⢎⠇⠁⠕⡕⡅⢽⢵⢽⣝ ⠀⠀⠄⡀⠄⠅⠂⠀⠀⠀⠀⠈⢂⠪⡘⡔⢕⠕⡕⡕⠁⡂⢕⠄⠑⢅⢯⡳⣳⢳ ⠀⠠⠡⠀⠀⠂⠀⠀⠀⠀⠄⠀⠀⠁⠊⠌⠌⠊⠐⠀⠰⡨⡸⡸⡰⡸⡪⣺⡪⡯ https://505e06b2.github.io/Image-to-Braille/

This one is for making art with braille symbols more like the one you show. I used it to put these kind of images in my c++ code for my HW and it looked really cool. It captures a lot of detail more than the ASCII ones