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/main.ts
import Aurelia, { RouterConfiguration } from 'aurelia';
import { MyApp } from './my-app';
import { registerServiceWorker } from './service-worker-registration';
Aurelia
.register(RouterConfiguration)
.app(MyApp)
.start();
registerServiceWorker();
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.
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.