Elm and progressive web apps (pwa)

[gabrielperales]

People is raising their interest about progressive web apps.

Other technologies have tools for code splitting, so service workers can cache chunks of that code to load faster. Does anybody knows if there is any tool to do something similar in elm? maybe there is a way to split the runtime from the rest of your application and also split your app by routes.

[nelsonic]

@gabrielperales if you have time please write up your findings on building PWAs with Elm! 😍

[gabrielperales]

I found this answer in stackoverflow http://stackoverflow.com/questions/41846216/extract-elm-runtime-into-separate-chunk . Seems like in elm 0.18 there is not nice way to split your code in chunks yet...

[lucymonie]

Hey @gabrielperales, this is so interesting! I'm not sure if this is quite the same issue but I was listening to a podcast interview of Richard Feldman, and he talks about modularity, state and scale in elm. It's worth a listen: https://devchat.tv/js-jabber/229-jsj-elm-with-richard-feldman (from 36:30)

[newswim]

Looks like there were a few threads on elm-discuss involving Service Workers, like you point out, SW's provide client-side caching and offline support. The SW piece would be written in JS (or TS) [thread] and talk to Elm via the messaging protocol.

This doesn't address the code-splitting issues, but might make up for some perceived load time lag.

[nelsonic]

this looks promising: https://github.com/skrypte/elm-hn-pwa

[nelsonic]

also looking at: https://github.com/fpapado/ephemeral (v. promising!)

[nelsonic]

Service Workers Beta in Safari: (great post by @firtman echoing @rmondello who works on the Apple Safari team) https://medium.com/@firt/pwas-are-coming-to-ios-11-3-cupertino-we-have-a-problem-2ff49fd7d6ea Still a lot of work to do, but really promising. 🎉

[halfzebra]

It is possible to create a very basic PWA with Create Elm App.

Check out pixelm it's a PWA made by @shuhei

We do not address the code-splitting part in Create Elm App, but caching the bundle with the app for offline usage is quite possible.

[nelsonic]

11.3 has been released with (basic) PWA support: https://medium.com/@firt/progressive-web-apps-on-ios-are-here-d00430dee3a7 🎉

[nelsonic]

Really good account of deploying a PWA to App/Play/Windows Store by @JudahGabriel: http://debuggerdotbreak.judahgabriel.com/2018/04/13/i-built-a-pwa-and-published-it-in-3-app-stores-heres-what-i-learned

PDF snapshot: I-built-a-PWA-and-published-it-in-3-app-stores.-Here’s-what-I-learned.pdf just in case the site is unavailable for any reason ... e.g:

[nelsonic]

• @ceddlyburge wrote a great post detailing how to build an PWA in Elm: https://codeburst.io/how-to-make-an-elm-app-progressive-d2e17d2f6fea
• @Birowsky wrote about the "tears of joy" building a PWA in Elm: https://medium.freecodecamp.org/web-is-ready-for-you-on-line-elm-d3aa14dbf95

[nelsonic]

@andrewMacmurray and @RobStallion are modest about their work,
(so someone else has to be their PR agent / megaphone on this ...) they built a really good PWA example in Elm last year: https://github.com/wide-grip/wide-grip

Andrew also independently created https://github.com/andrewMacmurray/seeds-game which is incredible and everyone should play it and study the code!! Andrew has poured several hundred hours of his time into this game the quality is amazing! Recently updated to Elm 0.19, it's a true showcase of Elm's simplicity and elegance. Play it online now: https://www.seedsgame.com

[nelsonic]

Recent relevant thread on Elm forum: https://discourse.elm-lang.org/t/mobile-app-alternative-pwa-via-elm/4176/9 which in turn links to: https://github.com/opvasger/elm-pwa which has a good Lighthouse score:

We need to figure out how to get the Accessibility and Best Practices up to 100.

[nelsonic]

Hacker News PWA in Elm 0.19.1 by @rl-king: https://github.com/rl-king/elm-hnpwa 🚀

[nelsonic]

Next:

• [ ] go through @ceddlyburge's "How to make an Elm app Progressive" (from Jun 25, 2018) https://codeburst.io/how-to-make-an-elm-app-progressive-d2e17d2f6fea
• [ ] https://github.com/ceddlyburge/progressive-elm-app/commit/f2f23189d6328203ae38491c2527424b88ffe562
• [ ] confirm that everything still works in Elm 0.19.1.

[ceddlyburge]

Hi @nelsonic. Everything does still work in the blog post with Elm 0.19.1, although the example code links are to specific commits in the repository, so show 0.18 code.

However the head commit of the repo is upgraded 10 0.19 and is working.

However, I would probably recommend using Create Elm App which creates Elm websites that are progressive out of the box.