Progress Web Apps (PWA's)

Progressive Web Apps (PWAs) offer a near-native app experience with web technologies. They are reliable, fast, and engaging. Here's how you can build a PWA using Aurelia 2 with TypeScript and Webpack.

Setting Up the Service Worker

The service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction. To create a PWA, we first need to set up a service worker.

Create a new file service-worker.ts in your src directory:

// src/service-worker.ts

const cacheName = 'aurelia-pwa-cache-v1';
const filesToCache = [
  '/scripts/bundle.js', // Adjust with your actual app bundle files
  // Add other files you want to cache

self.addEventListener('install', (event: ExtendableEvent) => {
  event.waitUntil( => {
      return cache.addAll(filesToCache);

self.addEventListener('activate', (event: ExtendableEvent) => {
    caches.keys().then((keyList) => {
      return Promise.all( => {
        if (key !== cacheName) {
          return caches.delete(key);

self.addEventListener('fetch', (event: FetchEvent) => {
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);

Registering the Service Worker

Now, we'll register the service worker in our Aurelia app.

Create a service worker registration file service-worker-registration.ts:

// src/service-worker-registration.ts

export function registerServiceWorker() {
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
      navigator.serviceWorker.register('service-worker.js').then((registration) => {
        console.log('SW registered: ', registration);
      }).catch((registrationError) => {
        console.log('SW registration failed: ', registrationError);

Import and call this function in your main.ts:

// src/main.ts

import Aurelia, { RouterConfiguration } from 'aurelia';
import { MyApp } from './my-app';
import { registerServiceWorker } from './service-worker-registration';



Webpack Configuration

Update the webpack.config.js to include the service worker file in your build process. Make sure you install the workbox-webpack-plugin development dependency.

// webpack.config.js

const { AureliaPlugin } = require('aurelia-webpack-plugin');
const path = require('path');
const { GenerateSW } = require('workbox-webpack-plugin');

module.exports = {
  // ... other configurations ...
  plugins: [
    new AureliaPlugin(),
    // ... other plugins ...
    new GenerateSW({
      swDest: 'service-worker.js',
      clientsClaim: true,
      skipWaiting: true,
  // ... other configurations ...

Manifest File

Create a manifest.json in your src directory:

// src/manifest.json

  "short_name": "Aurelia PWA",
  "name": "Aurelia Progressive Web App",
  "icons": [
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"

Ensure that the manifest is copied to your dist directory during the build, and link it in your index.html:

<!-- index.html -->

<link rel="manifest" href="/manifest.json">

Testing the PWA

To test your PWA, you need to:

  • Run npm run build to create the production build.

  • Serve your dist directory using a static server that supports service workers (e.g., http-server).

  • Open your app in a browser, and use the Chrome DevTools to audit your app with Lighthouse.

Your Aurelia 2 app should now be a fully functioning PWA! Remember to update the list of files to cache in your service worker as your app grows and changes.

Last updated