Add "Progressive Web App (PWA)" support #383
Conversation
undergroundwires
force-pushed
the
master
branch
2 times, most recently
from
680515d
to
c2d3cdd
Compare
|
@undergroundwires I haven't installed Cypress correctly, so it shows a Cypress error. |
undergroundwires
force-pushed
the
master
branch
3 times, most recently
from
e45cf4f
to
d77c3cb
Compare
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.
undergroundwires
force-pushed
the
master
branch
4 times, most recently
from
4578a0d
to
a05a600
Compare
undergroundwires
force-pushed
the
master
branch
13 times, most recently
from
65b10a3
to
9e8bad0
Compare
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.