Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Transform Almanac to a PWA #75

Open
AymenLoukil opened this issue Jul 5, 2019 · 8 comments
Open

Transform Almanac to a PWA #75

AymenLoukil opened this issue Jul 5, 2019 · 8 comments

Comments

@AymenLoukil
Copy link

@AymenLoukil AymenLoukil commented Jul 5, 2019

It would be nice that Almanac website shupports PWA capabilities for performance and offline support..Etc. I'll make a try on it.

@AymenLoukil AymenLoukil self-assigned this Jul 5, 2019
@AymenLoukil

This comment has been minimized.

Copy link
Author

@AymenLoukil AymenLoukil commented Jul 7, 2019

PL #76

@rviscomi rviscomi added this to TODO in Web Almanac via automation Jul 8, 2019
@rviscomi rviscomi added this to the Infrastructure complete milestone Jul 8, 2019
@rviscomi

This comment has been minimized.

Copy link
Member

@rviscomi rviscomi commented Jul 8, 2019

Nice idea! I see you've already drafted a PR but I'd like to discuss the features you have in mind before committing anything to the codebase.

Being a mostly static website, I can definitely imagine offline support being an important feature. How do we ensure that all of the contents are preloaded and not just pages/resources users have already loaded? And how do we ensure that preload is done performantly?

Add to homescreen would be useful as well. I'm not sure that we need to prompt users to do this, though, as mobile browsers have native UI for that, right?

@AymenLoukil

This comment has been minimized.

Copy link
Author

@AymenLoukil AymenLoukil commented Jul 8, 2019

Nice idea! I see you've already drafted a PR but I'd like to discuss the features you have in mind before committing anything to the codebase.

Ok :)

Being a mostly static website, I can definitely imagine offline support being an important feature. How do we ensure that all of the contents are preloaded and not just pages/resources users have already loaded? And how do we ensure that preload is done performantly?

The Service Worker will cache files and paths we precise. So no need to load the resources by the user for preloading/caching them. Another benefit of that, may be we will use a library for generating graphs (3d.js for example), we could also cache the JS files to improve to performance.

Add to homescreen would be useful as well. I'm not sure that we need to prompt users to do this, though, as mobile browsers have native UI for that, right?>

A2HS depends on the browser and is not always native. An UI element should be created / updated to show/hide the prompt.
Some infos : https://developers.google.com/web/fundamentals/app-install-banners/

@rviscomi

This comment has been minimized.

Copy link
Member

@rviscomi rviscomi commented Jul 9, 2019

Sounds good. Have you looked into using Workbox to generate the SW code? I'm not sure how that might work when we don't have static HTML files but @jeffposnick would be able to answer that.

Can we defer on A2HS for now?

@AymenLoukil

This comment has been minimized.

Copy link
Author

@AymenLoukil AymenLoukil commented Jul 10, 2019

Yeah i tried Workbox but it was a struggle to make it works on localhost. I added CSP then tried self host but didn't work...exceptions, errors, violations 😢

I'm not sure how that might work when we don't have static HTML files but @jeffposnick would be able to answer that.

SW will fetch the given routes and resources and cache them so we should be able to render them when "offline". Would also love to hear from @jeffposnick :)

Ok for A2HS.

@jeffposnick

This comment has been minimized.

Copy link
Contributor

@jeffposnick jeffposnick commented Jul 10, 2019

In general, the ideal approach for adding in a service worker to a "content" site is to have the service worker mimic the templating/routing rules used during either the static generation or SSR (depending on whether the site is pre-generated or rendered on the fly).

There's more background in this "Beyond SPAs: alternative architectures for your PWA", and in particular, the "Worst Case Scenarios" section lists some gotchas/things to avoid.

While it's possible to just add in Workbox and get some level of offline support, like a custom offline page, that might not be worth the overhead.

I'm afraid that I'm not familiar with the architecture/CMS for the Almanac site. What is being used under the hood? The amount of work that it would take to have a clean Workbox integration varies a lot based on that 😄

@rviscomi

This comment has been minimized.

Copy link
Member

@rviscomi rviscomi commented Jul 10, 2019

We use SSR. Here's the routing logic and templates, for example.

The main contents of the Almanac are the chapter pages, which we don't have yet (for obvious reasons) but they would be routed/rendered something like this:

  • user requests almanac.httparchive.org/2019/pwa
  • Flask figures it's a chapter page based on URL structure, looks up in a JSON config whether the 2019 Almanac has a chapter with the ID pwa
  • Flask renders the chapter template with the authored markdown and contributor info
@jeffposnick

This comment has been minimized.

Copy link
Contributor

@jeffposnick jeffposnick commented Jul 10, 2019

Given that the routing logic is implemented in Python, it would be somewhat of a manual process to translate that into something that a JavaScript-based service worker could make use of. It doesn't seem like that would be too bad for the current set of rules, which are pretty straightforward, but I do worry about maintainability and things gtting out of sync when changes are made to the Python backend.

The templating end of things might be easier, though, as it looks similar enough to what Nunjucks supports. I've had decent luck doing that sort of templating inside of a service work for my personal blog (which uses 11ty as the static generation process, so there's no backend server to coordinate with).

@rviscomi rviscomi removed this from the Infrastructure complete milestone Oct 31, 2019
@rviscomi rviscomi added this to the Après Ski milestone Nov 8, 2019
@AymenLoukil AymenLoukil mentioned this issue Nov 19, 2019
3 of 21 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Web Almanac
  
TODO
3 participants
You can’t perform that action at this time.