Add "Progressive Web App (PWA)" support#383
Conversation
680515d to
c2d3cdd
Compare
|
@undergroundwires I haven't installed Cypress correctly, so it shows a Cypress error. |
e45cf4f to
d77c3cb
Compare
undergroundwires
left a comment
undergroundwires
left a comment
There was a problem hiding this comment.
I have added some comments.
I also wonder if you checked vite-plugin-pwa, it claims to provide PWA support with single line / zero config, most likely fixing all manifest.json/icons etc. automatically from existing data/assets.
My experience showed me that it's almost always better not depend on third-party dependencies, as these can have dependency conflicts, get outdated etc, and create headache later, so I'm OK with going with current solution but we need to improve the points that I provided in the comments. However, if you think that plugin would make the job easier for you, I can accept it as it seems very easy, but still appreciate 0-dependency version. You can make the decision.
| "screenshots": [ | ||
| { | ||
| "src": "screenshots/screenshot-1280x720.png", | ||
| "sizes": "1280x720", | ||
| "type": "image/png", | ||
| "form_factor": "wide" | ||
| }, | ||
| { | ||
| "src": "screenshots/screenshot-1366x768.png", | ||
| "sizes": "1366x768", | ||
| "type": "image/png", | ||
| "form_factor": "wide" | ||
| }, | ||
| { | ||
| "src": "screenshots/screenshot-1600x900.png", | ||
| "sizes": "1600x900", | ||
| "type": "image/png", | ||
| "form_factor": "wide" | ||
| }, | ||
| { | ||
| "src": "screenshots/screenshot-1920x1080.png", | ||
| "sizes": "1920x1080", | ||
| "type": "image/png", | ||
| "form_factor": "wide" | ||
| } | ||
| ] |
There was a problem hiding this comment.
Do we need those? If we do, it would be hard to maintain screenshots images on each version change. Can we create like a conceptual picture like this without really showing the application but a concept with cards and code section so it can be reused all the time? Or is the point of screenshot to be real screenshots?
There was a problem hiding this comment.
There was a problem hiding this comment.
We can also use img/screenshot.png. We can move the file to public directory, and change its references to the public directory. It would be single file but easier to maintain.
There was a problem hiding this comment.
We actually need screenshots of every sizes
There was a problem hiding this comment.
Another option is to use puppeteer to automate the flow. We can create a script that will build the application, load in a web browsers, take screenshots of different sizes and stores them.
Or else, we can just remove the screenshots from this PR and think / solve in future.
There was a problem hiding this comment.
Ok I will research on this as soon as possible 🫡
| "name": "privacy.sexy", | ||
| "short_name": "privacy.sexy", | ||
| "description": "Enforce privacy & security best-practices on Windows, macOS and Linux, because privacy is sexy.", | ||
| "version": "0.13.5", |
There was a problem hiding this comment.
This version should be bumped automatically. It would be better use some kind of logic in the vite build system to read the latest version and output it here.
| "display": "standalone", | ||
| "background_color": "#ffffff", | ||
| "theme_color": "#000000", | ||
| "icons": [ |
There was a problem hiding this comment.
We should be able to automatically update the icons.
There's logo-update.js which is executed when you run npm run build:icons. It creates all logos from single logo.svg , see README.md. We should update the script so it generates all needed icons in the icons folder (populates from the SVG).
This helps maintaining the project by updating the logo in single file/place and knowing that it will be updated throughout the application after single command.
There was a problem hiding this comment.
Hello @undergroundwires,
I attempted to run the icons:build command, but it is dependent on ImageMagick. The software uses the convert command, which conflicts with the convert.exe utility in Windows. The convert.exe file in Windows is a command-line utility used to convert file systems on a volume to FAT32 or NTFS. Due to this conflict, I am encountering several errors.
4578a0d to
a05a600
Compare
65b10a3 to
9e8bad0
Compare
1977493 to
7a2ad61
Compare
c22eab2 to
0900492
Compare
080047d to
2f8aaf4
Compare
e5346d1 to
2f2813e
Compare
25d0d37 to
e6c52db
Compare
aae488a to
3d98c6d
Compare
e3cc404 to
bfd1b72
Compare
298af54 to
07bf5df
Compare
f3ad28a to
dfbcb12
Compare
2 participants
This pull request introduces crucial updates aimed at optimizing our web application's functionality as a Progressive Web App (PWA). The following enhancements have been implemented:
Manifest Integration: Added
manifest.jsonto enable a seamless installation experience and ensure an app-like feel across various devices and platforms. The manifest file includes metadata such as app name, description, version, start URL, display mode (standalone), background color, theme color, and multiple icon sizes optimized for different contexts.Service Worker Implementation: Introduced
service-worker.jsto enhance offline capabilities, caching strategies, and overall performance. Key features include:main.ts,favicon.ico,icon.png) upon service worker installation to improve initial load times and offline access.These updates are designed to significantly enhance usability, responsiveness, and reliability of our web application, aligning it with industry best practices for Progressive Web Apps.