Elm PWA on Capture page

[SimonLab]

ref: dwyl/app#254
At the moment the capture page is displayed with Phoenix template. To test PWA we can create an simple Elm app which will allow the user to capture the text via Elm.

• Create a Browser.element application which will compiled and bundle to the main app.js script file

• Nest this application on a specific elm capture page

• Send post request to the api endpoint (see Add routes for API capture #53) to save the text

Once this checkbox for the main structure of the Elm nested app have been implemented we can enhance the application by adding offline feature with PWA

• Reading https://codeburst.io/how-to-make-an-elm-app-progressive-d2e17d2f6fea and https://github.com/ceddlyburge/progressive-elm-app and https://create-react-app.dev/docs/making-a-progressive-web-app/

[SimonLab]

Creating a simple elm application:

main = text "Hello Elm Capture!

And nesting this application on /elm/capture (keep the original capture endpoint for now but we can deleted later when Elm application is fully functional). Visiting http://localhost:4000/elm/capture will display the Phoenix html page (only containing the h1) and initialise the Elm app containing the "Hello Elm Capture!" text:

Now that the app is nested we can start to build the textarea and using Browser.document to manage the view and the state of the application
see commit f43b139

[SimonLab]

Updating application with Browser.element to manage the capture text state with via a textarea:

see 9681363

The next step is to send the capture with a post request to the api.
I've forgotten the details on sending and decoding the response from an api so reading the Elm in Action chapters:

[SimonLab]

Saving capture using post request from Elm:

[SimonLab]

To use PWA we need to create and add files to our application assets, see https://shaun-etherton.com/tech/2019/01/24/phoenix-1.4-js-static-assets.html

[SimonLab]

Following the article and repo above I've manage to make the service_worker.js file accessible for the Elm application:

[SimonLab]

The application can't be installed yet as the following error is displayed:

reading https://stackoverflow.com/questions/45534076/site-cannot-be-installed-no-matching-service-worker-detected

Using service worker with Phoenix https://www.botsquad.com/2018/03/07/phoenix-sw/

[SimonLab]

Testing WPA on a separate Elm application using its own navigation to see if the issue above can be resolved without using Phoenix routing