SPIKE: `Elm PWA` - Basic Offline Support

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**](https://github.com/dwyl/app-mvp-phoenix)

# _Objectives_
+ [x] Build a _super basic_ Elm App with a Phoenix back-end (_for storing data_) [/elm-pwa-example](https://github.com/dwyl/elm-pwa-example)
we only need the "capture" functionality from [Sprint Zero](https://github.com/dwyl/app/milestone/2?closed=1) with the most basic [`textarea`](https://package.elm-lang.org/packages/elm-lang/html/2.0.0/Html#textarea)
> There's a new repo [/elm-pwa-example](https://github.com/dwyl/elm-pwa-example) but we will _import_ all the code from [dwyl/**app-mvp-phoenix**](https://github.com/dwyl/app-mvp-phoenix) once the [Google Auth PR](https://github.com/dwyl/app-mvp-phoenix/pull/24) 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.
+ [x] Saving the content of the `textarea` should:
+ [x] 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
+ [x] `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.
+ [x] Turn phone to "airplane mode" ✈️ (_wifi and cellular radios disabled_)
+ [x] Should display an icon [`signal_wifi_off`](https://www.material.io/resources/icons/?icon=signal_wifi_off&style=baseline) 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
+ [x] ~~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](https://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](https://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: https://github.com/dwyl/learn-elm/issues/145

We have collected a few useful links on Elm PWAs https://github.com/dwyl/learn-elm/issues/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**](https://github.com/dwyl/app-mvp-phoenix)
with this https://github.com/opvasger/elm-pwa by following this guide: https://github.com/dwyl/learn-elm/issues/54#issuecomment-558550433

# _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](https://github.com/dwyl/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)