Conversation
|
can you update the screenshots to this pr to feature the latest version (with the mobile branch) to allow ui/ux review |
|
@Dadadah Screenshots added! |
b9fd40d to
5b617b5
Compare
182a149 to
688ac02
Compare
Dadadah
left a comment
Dadadah
left a comment
There was a problem hiding this comment.
I'm not sure we need to include installation instructions on this page - what if we instead put up a support article for installation and just linked to that? I feel that might match the behavior of similar systems better. This may be a UI/UX issue.
Is it really worth importing vite-plugin-html-minifier? You're talking a savings of like a few bytes as it won't even minifiy the event names, I don't think we need to import 90 packages for this.
Well someone would need to create that but I think either approach would be fine, as long as it's easy to understand like the writeup in this PR is. Hmm then again, might be harder for the user to follow it given they'd be doing this on a phone specifically, so avoiding making them go open up an external link on their little phone browser just to read some directions might make more sense vs on PC.
That is a good point lol, didn't think about how heavy that dep might be compared to the small savings given our single HTML file. On the plus side it seemed to add no precipitable change to build time. |
63063bd to
8d15c4f
Compare
|
Sorry i didn't catch these earlier but I think these features I'm mentioning are new anyway. Once you address these two I think we can get this to UI review. Btw were you going to remove the .html file minification? |
Idk, I don't like the idea of having unminified code in production but I guess it's not doing too much harm when it's only one file that's only ~1 KB |
bf04720 to
920db47
Compare
|
Ok I at least disabled formatting of <script> tag in HTML so that we could use the minified version of the JS inside the HTML, this saves 200 bytes and more importantly, allows me to sleep at night |
fix: Make dialog less wordy refactor: Simplify Install page styles fix: Move event code to inline script to improve detection reliability undo: Drop unrelated serviceWorkerInterface change fix: Add note about minify fix: Move isPWA to Device context fix: Enable HTML minify in prod fix: Update lockfile fix: Use Symbol, use gap-lg for padding Signed-off-by: Pecacheu <3608878+Pecacheu@users.noreply.github.com> Replace PWA modal with button in settings menu This also aligns the way we use vite-pwa-plugin with modern best practices Skip unnecessary destructuring Add refresh button if user declined PWA installation Signed-off-by: Misofist <misofist@heavendivided.net>
Signed-off-by: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
Signed-off-by: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
The download page offers an installer for Windows and a package for Debian, neither of which means anything on a phone, and it was the only thing the app said about installing itself. Someone reading on a phone had no way to get past the browser tab. Settings now carries instructions for installing the web app, shown only on a phone and only while it has not been installed. The download entry gets the opposite condition for the same reason. From stoatchat#1380, minus two things it carried that have nothing to do with installing: an editor setting, and the removal of the ordering on the font preload plugin. The snippet that captures the install event stays in the HTML, since the browser fires it before the app has loaded and there is nothing listening yet, but it arrived minified into one line and is written out here. Signed-off-by: pobruno <brunoshy@gmail.com>
3 participants
This is a rebase of #1077 on latest main + dropping the message.po files, since @Misofist didn't get around to it for a while. I also dropped the PWA SW update change, that should probably be in its own PR since it requires its own testing to ensure it actually works.
On mobile browsers, the "Install" menu appears in settings.
On browsers with support for
beforeinstallprompt, an easy install button is present.Pressing it displays the native browser install prompt.
On a tablet (iPad Mini sized):
If you decline the installation prompt:
On older mobile browsers where automatic install isn't supported, only the manual directions are shown. (And yes the different capitalization is intentional, that's exactly how it's displayed on iOS vs Android, little cursed fun fact for you lmao)
And once PWA is installed, the option disappears. It also only appears on mobile devices, since there is little point to installing the PWA on Desktop.
Original PR description below
This builds on the work done by Pecacheu in #1024, but completely reworks the UX.
No modal window is shown. Instead, a new "Install" option has been added to the Settings menu.
On browsers that support the
beforeinstallpromptevent, this page contains a button to install the PWA. Clicking this button starts the PWA install experience. This also gracefully handles the case where the user declines the installation. For browsers which do not support thebeforeinstallpromptevent, manual installation instructions are shown. The install button is hidden within the PWA itself. The install button also only appears on mobile browsers, since currently on desktop I think there is little point in installing the PWA.I also updated the way we use Vite PWA to follow their best practices for SW updates: https://vite-pwa-org.netlify.app/guide/periodic-sw-updates.html#handling-edge-casesmain