Battlesim: Using the PWA Starter Kit

I recently created an app called Battlesim. This app is used to play a table top miniatures game that simulates historical warfare. I created this app using the PWA Starter Kit which is essentially a project archetype for creating progressive web apps. It uses Service Workers and web manifests to turn a normal website into an app that can be used offline and installed to your device.

This starter kit is very helpful in bootstrapping a near-vanilla web project. This method of creating a progressive web app allows you to have complex features and dynamic content all while serving the app as a statically hosted site. No complex server side application or hosting infrastructure. Just HTML, CSS, and JavaScript statically delivered, using the modern features of the web platform to provide powerful user experiences.

My strategy for developing this app was to first utilize the web platform to create an offline first experience. In this example all user created content get's stored in the browser storage. The user can be offline, come to the site, interact with the various features and create their own content, all without any interaction with the server. After the initial installation of the service worker it never interacts with the server again other than to receive code updates.

The next step in my strategy was to enhance the experience by providing a sharing feature where I used Firestore to share data between users. References to this shared data are stored on the users device and the data itself is stored in Firestore so that other users can access the same data. This means that multiple users can join the same battle and have a shared user experience.

I am slowly evolving my own conceptualization of web development towards installable, offline first experiences as the primary targeted experience. The PWA Starter Kit seems to be forging a path in this direction.

Comments

Popular Articles

The Vanilla Javascript Component Pattern

The Sunless Citadel: A D&D 5e Session Report

Getting Started with Harp