How much use is a "keep track of all the things" App that doesn't work offline?

We hypothesize that an App meant to help people capture everything on their mind and get stuff done must work offline.

With this in mind, we need to do a Spike¹ to explore using Elm for a Progressive Web App (PWA).

We can only test "offline support" by having some sort of "online" functionality thankfully we already have the "online" counterpart in the form of the capture workflow in dwyl/app-mvp-phoenix

Objectives

• Build a super basic Elm App with a Phoenix back-end (for storing data) /elm-pwa-example
  we only need the "capture" functionality from Sprint Zero with the most basic textarea

  There's a new repo /elm-pwa-example but we will import all the code from dwyl/app-mvp-phoenix once the Google Auth PR has been merged so we have that as a starting point. The reason for having a separate "spike" repo is to "snapshot" the basic PWA functionality in isolation but not have to re-write any of the auth or capture code from scratch.

  • Saving the content of the textarea should:
    • Update the Model (fairly obvious)
    • Should save Model.items to localStorage so that the page can be refreshed without losing the content see: https://elmprogramming.com/saving-app-state.html
    • if the device is online save the item to the backend.

    We may need to write some JS to handle this if we can't do it in Elm.

• Turn phone to "airplane mode" ✈️ (wifi and cellular radios disabled)
• Should display an icon signal_wifi_off in UI to inform the user they're offline.
• Should still be able to view the existing item when offline.
• Should be able to create a new item while offline
• Items created offline should sync to backend when re-connected.
• Meet the criteria specified in Google's PWA Checklist: https://developers.google.com/web/progressive-web-apps/checklist

Todo

• Refresh your Elm Skills if you feel at all "rusty". e.g: by reading
  • Official Elm Guide: https://guide.elm-lang.org
  • Elm in Action: https://www.manning.com/books/elm-in-action
  • Practical Elm Book: https://korban.net/elm/book
  • Programming Elm by Jeremy Fairbank: https://pragprog.com/book/jfelm/programming-elm
  • If you learn anything new during your refresh, please share as comments in this thread and/or a pull request to github.com/dwyl/learn-elm anything we can do to bring up the collective level of Elm skills in the team is of major value to @dwyl 👍
• Create the Elm PWA to fulfil the objectives above.
• Deploy to Heroku so that we can run Lighthouse on it. developers.google.com/web/tools/lighthouse

The PWA does not have to use Elm UI, but it would be a good "bonus level" to attempt to use it.
See: dwyl/learn-elm#145

We have collected a few useful links on Elm PWAs dwyl/learn-elm#54
including a complete application: https://github.com/rl-king/elm-hnpwa
We should be able to get started quite quickly by combining the work done in our dwyl/app-mvp-phoenix
with this https://github.com/opvasger/elm-pwa by following this guide: dwyl/learn-elm#54 (comment)

Constraints

• The Spike does not need to have any fancy functionality, the purpose is just to test the idea.
• We don't want to spend more than 3 days on this, so pace yourself accordingly.
• Must include all steps taken so that someone else can re-produce the app
  i.e. we aren't interested in just the "end result" we want to know exactly how it was done.
  If you're in any doubt what step-by-step instructions look like, see: /todo-list-javascript-tutorial
  The point of a Spike¹ is to share the knowledge acquired with the team
  (and in our case the wider @dwyl community)

¹https://en.wikipedia.org/wiki/Spike_(software_development)