numbat icon indicating copy to clipboard operation
numbat copied to clipboard

Deliver as a PWA on the web

Open bsidhom opened this issue 1 year ago • 6 comments

It would be great to make Numbat installable as a Progressive Web App (PWA). The key benefit of this is the ability to use it offline on any device with a modern web browser.

Here's the minimum set of changes needed to get core PWA functionality:

  • [ ] Web manifest. See also web.dev.
  • [x] Icon assets. These will be associated with the installed PWA, either on desktop or home screen.
  • [ ] Service worker with full offline pre-caching of all mandatory static assets. At this point, this is likely the index page, WASM bundle, and any JS/CSS/fonts used. The ECB data is dynamic and should probably be fetched in a network-first fashion and only fetched on demand.

Some great follow-up features which could be done down the road but would really enhance the experience:

  • [ ] A first-class, web-forward UI as described in #218. Depending on how this materializes, it could be the default (or only) UI for all web users or we could have separate "desktop" and "mobile" options.
  • [ ] Persistent, offline user configs. As I'm currently envisioning it, this would basically just consist of user-defined modules saved across sessions (outside of URL params). For maximum compatibility, this would probably live in the origin-private file system. In truth, I would prefer full-fledged FS access (see the spec) so that users could literally share the same config files with their locally-installed CLI app, but it looks like Safari has no plans to support this (i.e., it looks like we'll be stuck with OPFS).
  • [ ] An install banner to make users aware they can install Numbat as an offline app.
  • [ ] Notification banner to prompt user to refresh/update when a new version is available. Otherwise, the old PWA version is retained until all live tabs with the site loaded are closed. Refreshing is not sufficient!

In any case, I think it would be a good exercise to start with the current web implementation and see how far we can go with the offline experience.

bsidhom avatar Feb 22 '24 01:02 bsidhom

NOTE: At the moment, I'm only considering the core Numbat calculator app as being "in scope" for the PWA, but I assume we could easily cache the docs for offline use as well.

bsidhom avatar Feb 22 '24 01:02 bsidhom

It looks like there are already icons. I'll need to check whether those already cover the obvious platforms, in which case we can check that off. 🙂

bsidhom avatar Feb 22 '24 03:02 bsidhom

on any device with a modern web browser

If only this were true :smiling_face_with_tear:. Firefox does not have support for PWAs. And Apple is breaking PWA support for customers in Europe with iOS 17.4: https://techcrunch.com/2024/02/15/apple-confirms-its-breaking-iphone-web-apps-in-the-eu-on-purpose/?guccounter=1

sharkdp avatar Feb 29 '24 09:02 sharkdp

Where did you hear about lack of Firefox support? It used to work. (Not sure about mobile to be clear; since what you typically care about with PWAs is offline functionality and separate window support, I expect that to be integrated into the default system browser, i.e., Safari on iOS and Chrome on Android.) As far as I can tell, Firefox removed windowed mode for PWAs (also known as single-site browser), but did not remove the PWA APIs that allow the app to operate (e.g., it should still work offline). And I think that's only on desktop in any case, where I'd be more likely to use a regular browser bookmark (even if offline).

For iOS, I'm less certain. One can only hope that this is a pre-release bug (not unheard of). If it's only happening in the EU, then hopefully Apple is eventually forced to allow third-party browser engines on iOS. I've been waiting for this since I first heard rumors. :) In any case, all three browsers on the major OSes should support service workers, etc. So the functionality is still there. The main problem I'm seeing now is that if the iOS 17.4 regression was intentional, then offline PWAs will only operate for up to 7 days, since they now use the shared browser GC policy rather than a separate app-specific one.

bsidhom avatar Feb 29 '24 12:02 bsidhom

More specifically, we can project compatibility onto the dimensions we care about:

And that's basically it.

If we wanted to get fancier and maintain some sort of shared memory app state, we could even use newer technologies such as broadcast channels and/or web locks. Honestly, I'd be surprised if any of these already-shipped features were removed or deprecated suddenly. I think my biggest concern now is around iOS (just in the EU?) deleting your offline stuff more aggressively in the future. But that's no worse than the pre-PWA situation. :)

bsidhom avatar Feb 29 '24 12:02 bsidhom

Where did you hear about lack of Firefox support?

image

https://en.wikipedia.org/wiki/Progressive_web_app#Browser_support

Your version in #372 actually works fine in Firefox on Android though!

Firefox removed windowed mode for PWAs (also known as single-site browser), but did not remove the PWA APIs that allow the app to operate (e.g., it should still work offline).

Right. The service worker APIs still work fine.

For iOS, I'm less certain. One can only hope that this is a pre-release bug (not unheard of). If it's only happening in the EU, then hopefully Apple is eventually forced to allow third-party browser engines on iOS. I've been waiting for this since I first heard rumors. :)

I don't think it was a bug. It was intentional. But in the meantime, they backtracked, apparently: https://appleinsider.com/articles/24/03/01/apple-reverses-course-on-death-of-progressive-web-apps-in-eu

So yeah, let's try this :+1:. Sorry for being so reluctant.

sharkdp avatar Mar 05 '24 21:03 sharkdp