frc-docs icon indicating copy to clipboard operation
frc-docs copied to clipboard

Implement PWA extension

Open Daltz333 opened this issue 3 years ago • 6 comments

It would be totally awesome and cool to create an extension that turns Sphinx websites into PWA for offline use on mobile devices.

Basically, we should automatically add the necessary resources to our manifest.json. Then generate the relative metadata in the meta data of the various pages on the site.

Daltz333 avatar Jan 24 '22 00:01 Daltz333

Currently @ItayZiv and myself are investigating this. Lots of research necessary. We can use this issue to write down development notes.

Daltz333 avatar Jan 24 '22 22:01 Daltz333

Reference regarding caching for offline: https://www.simicart.com/blog/pwa-offline/ Reference regarding caching with multiple pages: https://stackoverflow.com/questions/45028343/pwa-with-multiple-pages

Possibly need to display splash screen while the PWA caches the site.

Daltz333 avatar Jan 24 '22 22:01 Daltz333

The biggest problem would be the cache size, the entire website currently is a bit over 100MB. One possible solution is to cache all the images in a smaller resolution (possibly only on mobile) but even so, that might not be enough for some devices. Regarding the 50MB limit on iOS: https://stackoverflow.com/questions/50093856/overcoming-the-50-mib-limitation-on-pwa-cache-for-ios

The other problem would be having the script to register the service worker on each page (might need a small sphinx extension)

ItayZiv avatar Jan 24 '22 22:01 ItayZiv

Yeah. I definitely think we need a sphinx extension. Ideally this can scale past frc-docs and we can have the extension automatically generate the manifest.json and inject the service work into the pages (with config overrides). We can do something quick and dirty for now inside the frc-docs repo for development, and then scale it into a sphinx extension later.

Daltz333 avatar Jan 24 '22 22:01 Daltz333

On size, if we switch from [source or responsive] to just webps, remove all the downloads, and minify the html (which I thought we already did), the whole package should come down to ~45mb which is just under the PWA limit of 50-52 MB, so pushing it.

To decrease service worker storage even more, all images can be stored in Indexeddb and be fetched on page load.

TheTripleV avatar Jan 24 '22 23:01 TheTripleV

@TheTripleV the 50mb limit only applies on iOS < 13. After that, it's half of available storage. We are just moving forward without the concern of storage for now. If it's easier, we just don't support iOS < 13.

Daltz333 avatar Jan 24 '22 23:01 Daltz333