create-lit-pwa v0.1.44

Create Lit PWA

To install, run

npm init lit-pwa@latest

Introduction

This is a simple template for a PWA that uses only native Web Components, with only Google's Lit library to make working with Web Components easier.

• PWA Installable on desktop, tablet and mobile
• Works offline
• Passes all Lighthouse tests
• TS and JS can be used simultaneously

Why Lit?

Lit handles smart reactive rendering in a way similar to React, but without the overhead of a Virtual DOM.\ It uses native ES String Literals and variables. Hence the name 'lit'.

import {html, css, LitElement} from 'lit';
import {customElement, property} from 'lit/decorators.js';

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  static styles = css`p { color: blue }`;

  @property()
  name = 'Somebody';

  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}

The library adds just 5KB to your bundle.\ 💡 Learn Lit:

• https://lit.dev/
• Lit for react developers

Dev Tools

• Uses TypeScript and ESLint for static analysis
• Uses ESBuild for:
  • TypeScript compilation
  • Bundling
  • Development web server

VS Code Extensions

It is highly recommended to install following extensions:

• esbenp.prettier-vscode
• runem.lit-plugin
• dbaeumer.vscode-eslint

Service worker

Lit PWA uses a service worker to implement the following features:

• Installability
• Work offline
• Runtime caching
• Serving index.html in case the server is not available or does not implement "spa behavior"

For day-to-day development, Lit PWA uses a 'Dev' service worker, which is "transparent" in the sense that it doesn't have any caching. Using this worker helps achieve a better development experience.

NPM scripts

We included 2 options for starting a development server, based on different development scenarios:

1: Common frontend development

• 'Hot' browser reloading at every code change
• 'Transparent' development service worker

npm start

2: Developing offline features, testing caching, running Lighthouse tests

• Rebuild on change
• No Live reloading
• Fully functional service worker

npm run serve

Build for production:

npm run build

Run tests:

npm test

Debug tests:

npm run test:debug

Testing

Lit PWA uses @web/test-runner for testing. You can read more about it here:

https://modern-web.dev/guides/test-runner/getting-started https://modern-web.dev/guides/test-runner/watch-and-debug/ https://www.npmjs.com/package/web-test-runner-jasmine