Building a PWA with Compose for Web has never been easier! Introducing ComposePWA

Ever thought of turning your Compose for Web project into a Progressive Web App (PWA)? With ComposePWA, a Gradle plugin I created, you can do it with a single command!

This article will walk you through how to use ComposePWA to build a PWA from your Compose Multiplatform Web App.

What is ComposePWA?

ComposePWA is a Gradle plugin that provides a task to build your Compose Multiplatform Web App as a PWA. It automates the necessary setup for turning your web app into a PWA, which usually involves several manual steps.

Installation

First, let’s add the plugin to your project.

In your gradle/libs.versions.toml file, add the following:

[versions]
...
+ yuyuyuyuyu-composePwa = "0.2.0"

[libraries]
...

[plugins]
...
+ yuyuyuyuyu-composePwa = { id = "dev.yuyuyuyuyu.composepwa", version.ref = "yuyuyuyuyu-composePwa" }

Then, in your composeApp/build.gradle.kts file, apply the plugin:

...

plugins {
    ...
+   alias(libs.plugins.yuyuyuyuyu.composePwa)
}

That’s it for the installation!

How to Use

To build your Compose for Web app as a PWA, simply run the following command instead of the usual wasmJsBrowserDistribution:

./gradlew :composeApp:buildPWA

After running this command, your PWA will be generated in the composeApp/build/dist/wasmJs/productionExecutable directory.

How it Works

The buildPWA task automates the following steps to build your app as a PWA:

1. Runs ./gradlew clean to ensure a fresh build.
2. Generates necessary files: If they don’t already exist, it creates workbox-config.js, manifest.json, registerServiceWorker.js, and the icons directory in your composeApp/src/wasmJsMain/resources folder.
3. Updates index.html: It adds the necessary script and link tags to your composeApp/src/wasmJsMain/resources/index.html to register the service worker and link the manifest file.
4. Builds the app: It runs ./gradlew wasmJsBrowserDistribution to build your Compose for Web application.
5. Generates the service worker: Finally, it uses workbox-cli to generate a service worker based on the workbox-config.js file.

Customizing the Icon

If you want to use your own icon for the PWA, you can use a tool like ngx-pwa-icons to generate the necessary icon sizes. You can run it with the following command:

npx ngx-pwa-icons

Conclusion

ComposePWA simplifies the process of converting your Compose for Web app into a PWA. With a simple setup and a single command, you can get a PWA up and running in no time. Give it a try and let me know what you think!

License

ComposePWA is available under the Apache License 2.0.