Convert to progressive web app

[baizel]

It would be great to convert this site into a progressive web app which could potentially take advantage of the push notification system. [1][2] gives an overview of making a PWAs

Things to implement

• [ ] manifest file
• [ ] serviceworker.js
• [ ] install prompt
• [ ] cache data for offline use
• [ ] notification system

[1] https://web.dev/progressive-web-apps/ [2] https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0

[patricoferris]

PWA Design Idea

I think moving towards a complete build-system for managing the migration to a progressive web app (PWA) makes a lot of sense. With some of the long term goals to potential grow the site to accommodate more health-related problems and more languages (and perhaps more rich content); a scalable and robust system makes sense.

For this I proposed GatsbyJS - a React based framework for developing PWAs and static websites - as it says on the box:

Gatsby.js is a PWA (Progressive Web App) generator. You get code and data splitting out-of-the-box. Gatsby loads only the critical HTML, CSS, data, and JavaScript so your site loads as fast as possible. Once loaded, Gatsby prefetches resources for other pages so clicking around the site feels incredibly fast.

A lot of the nitty-gritty details is handled automatically provided you set up the correct configuration. You also get other small wins like image-device resolution matching, a portable backend CMS etc.

Notifications

Notifications are slightly more tricky, I implemented them for a PWA I made before. It's completely doable, but you will need a cloud-solution to handle the following:

(a) Storing Push URLs (something like DynamoDB offered by AWS) (b) Sending push notifications (something like Lambdas offered by AWS)

This is more difficult to manage then the rest of the app but as I said is completely doable

[baizel]

This sounds good but my main area of concern is maintainability. I want to keep this project as simple as possible with a small learning curve so that anyone can take over in the future. Using something like Gatsby might be difficult for new developers to pick up especially for those who do not have much JS experience.

@SzyJ and I both do not have much JS experience and so we tried to minimize the amount of JS used in this project. This won't be a problem if you plan on maintaining this project in the long term. The simplest way to make this into a PWA would be to add a manifest file and a service-worker.js which should meet the requirements for a PWA.

In the future, I think it would be beneficial to use something like Netlify as you suggested to host the site so we should try to keep this site static as possible.

In terms of notification, I think we can use firebase notification service which should be simple to implement [1].

[1] https://firebase.google.com/docs/projects/pwa

[patricoferris]

Completely agree re:maintainability. I understand the want to minimise the amount of JS (I don't really like it that much, much more of an OCaml person haha).

Disclaimer: The work you guys have done so far is amazing. Please don't take my opinions as in any way belittling your work. The whole project is great and I think there is room to make it even better.

TL;DR: the maintainability problem in my eyes is between "learning new frameworks/languages/libraries" vs. "learning how a custom solution works". For small projects the latter is almost always the right answer. As projects grow I think it begins to pay off to use tooling to make life easier.

My concern is that as the project grows the upfront cost of having to learn something like JS+Gatsby is much smaller than trying to understand a large codebase with custom solutions to common problems. This is fairly brittle from what I can tell - although, it does what it is supposed to. Again the dynamic content being added through jQuery works but is prone to error, there is no checking that the HTML strings are well-formed HTML for example.

Gatsby Pros:

• Gatsby is incredibly well documented.
• There is also a tight-integration with Netlify for continuous deployment. For example, the fix to the link I pushed would already be deployed and takes the burden off of you having to manually push to the server.
• In addition to this with React you can have much better testing and continuous integration to ensure breaking changes don't make it into production.
• Using some form of templating means you will have less bugs. If the entire site were to be translated into multiple languages the only way I see the current site handling this is with multiple html files i.e. duplicating code which will be a maintainability nightmare.
• Scalable: here are some sites built with it.
• Large community and maintained plugins: Firebase messaging support can be added with a plugin

Gatsby Cons:

• Somewhat of a steep learning curve if you have never used JS or React (although it is heavily used in industry which means there are a ton of great tutorials. For new people there is an upfront cost to learning it.
• Not as intuitive as the conventional HTML, CSS and JS scripts approach to web dev.

Next Steps I'll continue working on a Gatsby solution (it's not far off being testable) and then we can see what we think about it in terms of maintainability? As for making it a PWA, then for sure implement the changes you proposed for the current site. My point is more about long-term scalability and maintainability rather than "this is the way a PWA should be done" :smile:. In terms of next steps I think moving to Netlify (or similar) is a really worthwhile step as it lifts the burden of server admin off of you.