Improve offline functionality

[jameshadfield]

Currently auspice can run “locally” such that datasets are sourced from the user’s computer. This is fantastic, but requires an internet connection to load a number of cross-origin resources (see below). This includes mapbox tiles, meaning the map isn’t usable when offline. This functionality would be particularly desirable for conference talks etc where network connections are often unavailable, as well as developing / running auspice while offline.

Here are the cross-origin requests made by auspice. These should be either made available offline — where allowed — or auspice should gracefully handle their non availability. (It may be that, when an internet connection is available, some are preferable to load from other domains for performance reasons, or as specific requests that can be cached.)

Fonts / styles

• leaflet.css (unpkg.com) — sourced from index.html. Available in a HTTP cache for 24 hours. Update: fixed in Replace remote styles and fonts with the ones served locally #826
• font-awseome.min.css (maxcdn.bootstrapcdn.com) — sourced from index.html & HTTP cached for up to 1 year. Update: fixed in Replace remote styles and fonts with the ones served locally #826
• Lato fonts description — not the fonts themselves, fonts.googleapis.com, sourced from index.html HTTP cached for up to 1 year. Update: fixed in Replace remote styles and fonts with the ones served locally #826

The number of font files — typically font/woff2 files — requested varies according to which ones (and weights) are used in the current page. All seem to have cache limits of 1 year. They’re requested from font-awseome.min.css, the lato fonts description, and a bundled leaflet script. Number of requests varies from 2 (auspice splash page) to 15 (zika).

Scripts

• Google analytics (google-analytics.com) — cached for 2 hours, but somewhat pointless when offline! (Ditto for the requests the script will make.) This doesn’t affect performance / functionality in any way. UPDATE: This is now an opt-in build-time customisation
• A twitter script (platform.twitter.com) is fetched (which fetches another few resources), but this functionality is only used for the narrative. It shouldn’t be needed when offline, and ideally should only fetched when a narrative with tweets is loaded. It’s reasonably common to block these scripts, so we should ensure the narrative view looks ok without this. UPDATE: now removed

Mapbox tiles

Mapbox requests a number of png map tiles (16 for zika before zooming/panning), all cached for up to 12 hours. Storing the files in the git repo isn’t allowed, but this thread provides a solution using service workers and one using CacheStorage (which is a service worker API but is apparently also available in window scope).

UPDATE: see #827 for a possible implementation of tiles

Service workers: the solution?

At a glance, service workers are my preferred solution as we could use them for other things as well (but CacheStorage might be simpler).

Service workers would allow us to use fonts offline as well (implementation here). On whether this is strictly allowed, this thread — from the Google Chrome GitHub org — is the best resource I’ve found, stating:

[one cannot] keep cached copies longer than permitted by the cache header

Google does not allow to keep cached copies of the results of APIs, probably to prevent people from redistributing them through a different service [but] I would think that it is tolerated for the case of services workers caches. It is essential for the PWAs so much promoted by Google!

Eventually, service workers could allow nextstrain.org to work without an internet connection, but that’s quite far away ;)

[ivan-aksamentov]

Hello!

In #826 I bundled all external CSS and fonts, so that they could be served statically from localhost.
It seems that the only remaining remote resource is mapbox.

[ivan-aksamentov]

In #827 I added server-side map tile cache, which allows running the application offline.