How (and Why) We Built a Progressive Web App (PWA)

When you use one of our tools like Uniform or Stillpoint, you might notice something interesting. You can "install" it to your desktop or home screen, it can work offline, and it feels almost like a native application you'd download from an app store. But you never had to go to an app store. You just visited a website.

This app-like experience is made possible by a set of modern web technologies collectively known as a Progressive Web App (PWA). At Vibratom Studios, we made a deliberate choice to build our applications as PWAs. Here's a look at what that means and why we believe it's the future of software delivery.

What is a Progressive Web App?

A PWA is a website that has been "progressively enhanced" with modern web APIs to give it the features and feel of a native application. The key characteristics of a PWA are:

• Installable: You can add it to your home screen or desktop, and it will launch in its own window, without the browser's address bar.
• Offline-Capable: It can work even without an internet connection, using locally cached data.
• App-like: It has a dedicated icon, can have a splash screen, and provides a smooth, full-screen user experience.
• Discoverable: It's still a website at its core, so it's indexed by search engines and can be shared with a simple URL.

How Do We Build a PWA? The Technical Ingredients

Turning a website into a PWA involves a few key technical components.

1. The Web App Manifest (manifest.json)

This is a simple JSON file that tells the browser how the PWA should behave when "installed." It's where we define:

• The app's name (e.g., "Uniform").
• The icons to be used for the home screen or desktop.
• The "start URL" (the page that opens when you launch the app).
• The display mode (e.g., standalone to make it look like a native app).
• The theme and background colors for the splash screen.

The browser reads this file and uses it to create the app-like shell for the website.

2. The Service Worker

The Service Worker is the real powerhouse of a PWA. It's a special type of JavaScript file that runs in the background, separate from the web page. It acts as a proxy between the browser and the network.

This proxy capability is what allows for offline functionality. Here's how it works:

1. Installation: When you first visit one of our sites, the Service Worker is installed in your browser.
2. Caching: During this installation, we tell the Service Worker to fetch all the essential files needed to run the app (the HTML, CSS, JavaScript, and even our WebAssembly modules) and store them in a local cache on your device.
3. Intercepting Requests: From then on, every time the app tries to request a file (e.g., to load a script), the Service Worker intercepts that request.
4. Serving from Cache: If you are offline, the Service Worker simply serves the file from the local cache instead of trying to fetch it from the internet. If you are online, it can use a "cache-first" strategy to load the app instantly from the cache while simultaneously checking for any updates in the background.

This is how you can open and use Uniform to convert files even when you're on a plane with no Wi-Fi.

Why We Chose the PWA Path

For us, the decision to build PWAs was a clear one, as it aligns perfectly with our core principles.

• Accessibility and Discoverability: By building on the web, our tools are instantly accessible to anyone with a browser. There's no app store gatekeeper, no download process, and no installation friction. A simple link is all you need.
• Cross-Platform by Default: We write our code once, and it runs everywhere—on Windows, macOS, Linux, Android, and iOS. This allows our small team to deliver a consistent, high-quality experience to all users without the massive overhead of developing separate native apps for each platform.
• Enhanced Performance and Privacy: The offline capabilities of PWAs are a natural fit for our local-first philosophy. By caching the application shell and running our core logic on the device, we can provide a faster, more responsive, and more private experience.

Progressive Web Apps represent the best of both worlds: the reach and accessibility of the web, combined with the power and user experience of native applications. It's the technology that allows us to deliver on our promise of providing powerful, beautiful, and simple tools to everyone, everywhere.