The PWA Philosophy


From my #presentation to the Fredericksburg Developer Group: The Progressive Web App Philosophy. If you couldn’t make it, check out the slides below. And the source for the 10 Minute PWA demo is on Github.  

PWA Action


Happy #Festivus! For my feats of strength I’m giving Xmas Eve Nightmare #PWA powers. It doesn’t have offline support yet but the layout is all cleaned up and it prompts for install on #mobile.

Local Storage


Needed this feature for a long time. Finally implemented local storage in #Flux. Changes are now saved immediately in browser. Firebase storage is now controlled manually with Cloud Save/Load buttons in the main editor component.

Missed it by That Much


The Lighthouse scores are pretty good. I got dinged for not having http2 or webp images. And the fact that it’s so media heavy. Not too concerned about that. Overall I’m pretty happy with it.

Offline Support & Manifest

Added all the behind-the-scenes PWA features, web-manifest and service worker. I use workbox to handle the caching strategies. Since the site is static, everything is cached upfront.

Progress Bar


To keep things interesting over a slow connection, I added a progress bar that kicks in once the audio becomes playable but the image assets aren’t fully loaded. The syringe is an inline svg.

Intro With Style


Added a glowing silhouette of the radio as an inline svg. It adds a graphic touch to the app before any actual image files load. The menu is fully interactive at this stage as well. For mobile devices that don’t auto-play, the radio becomes a button to “tune in” and trigger the stream.

Bundle Size

Fontawesome (I’m a pro user!) is getting too big for its own good. Even with just the media controls the bundle size was almost 2M. With the social network icons I was pushing upwards of 4M. I switched to the material icon font which brought the bundle down to 200k. It includes everything I need... Read the full article

The Road to Appiness…

In an effort to behave more app-like, the control bar at the top of the site is replaced with an action button and slide-out menu. This way I’m not struggling to find room for buttons or dealing with popups. Everything is going in the one menu.


To decrease time-to-interactive in the #PWA, I integrated the introduction copy into the preloader. The first line of copy appears as the #JavaScript bundle loads up and audio begins streaming. The second line appears as image assets are loaded. If assets are cached, the second screen never appears.