An experiment in mixing Hugo and Polymer PRPL into a progressive web app blog.
- It's a progressive web app with all the fixin's (service worker, PRPL pattern, H2, et cetera)
- Renders if there is no JavaScript via
<noscript>injected fallback to static generation - Renders metadata to linkbots when sharing without the need for client JavaScript via server side detection and alternative render path
- Hugo to manage posts and metadata
- Polymer and web components app shell based on PRPL and the SHOP demo
- h2-push via http2push-gae for Google App Engine for serving
- letsencrypt-nosudo for Let's Encrypt generation on Google App Engine
I wrote a couple zsh utility scripts to power most of the shuffle and build of the site. Why not an npm script or a gulp or grunt task you ask? Frankly, because I just felt like writing some shell scripts. Don't you want to sometimes just write some shell scripts? Is that just me?
The gist of the tools employed and their uses include.
sedis amazing and helps rangle some of the JSON output from Hugo (years of old posts + multiple times moved = fun!)zmvis the thing you don't know about but probably should. Renames files fast to proper type (Hugo won't output pure JSON at moment)jqis blazing fast over lots of files; validates my json output so I know things will load in the PWA and Pythonpolymer-cliworks without a lot of fuss and handles the frontend generationhttp2-push-manifestis super useful and works out of the box with http2push-gae
➜ git clone [email protected]:justinribeiro/blog-pwa.git
➜ cd blog-pwa
➜ chmod +x utilities/builder.zsh
# check for tooling
➜ ./utilities/builder.zsh -t check
# get deps
➜ ./utilities/builder.zsh -t setup
# run dev env
➜ ./utilities/builder.zsh -t dev
A progressive web app is only as good as the web performance it offers. I mean, who wants to sit around waiting 10 seconds for a blog post to initially load? No one. So I pulled out my trusty LG Optimus Exceed 2 to test on. Never heard of it? It's because it was a new middle of the road powered device from about 2.5 years ago. The device could be had pre-paid at your local market for between $15-$35 USD (I bought it for $21 on Amazon a while back), and away you go.
How does that device fair on regular 3G for a first and second load? View the chrome timeline comparison.
Just want the timelines json files? Download via links below:
You can read a blog post and see the site in action: some post.