How does preact-pwa compare to create-react-app for building PWAs?

preact-pwa uses Preact and Redux for a smaller bundle size and includes PWA features by default, while create-react-app is React-based with a larger footprint but more community plugins and ecosystem support, making it better for teams needing broader compatibility.

Can I use TypeScript with preact-pwa?

Not out of the box; preact-pwa uses Buble for ES6 transpilation, which doesn't support TypeScript. You would need to reconfigure the build setup, such as replacing Buble with Babel and adding TypeScript loaders, which adds complexity.

How to deploy a preact-pwa application to production?

Run yarn start for production mode, and deploy to Node.js hosting services like Vercel (formerly Zeit) as shown in the live demo, or configure it for platforms like Heroku by setting up the express server properly.

Is preact-pwa suitable for large-scale applications?

Yes, with universal rendering and Redux state management, it can handle scaling, but the opinionated stack and minimal dependencies might require customizations for complex state logic or team workflows.

How to add custom service worker logic to preact-pwa?

Modify the service worker files in the project, but the README lacks detailed instructions, so you may need to refer to external PWA documentation or experiment with the existing setup for advanced caching strategies.

What are the alternatives to redux-thunk in this template?

The template is built with redux-thunk for async actions; to use alternatives like redux-saga or redux-observable, you would need to replace the middleware in the Redux store configuration and refactor action creators accordingly.

Open-Awesome

Preact PWA

MITJavaScript

A super fast Progressive Web App template with universal rendering, Redux, and minimal dependencies.

Visit Website GitHub

502 stars36 forks0 contributors

What is Preact PWA?

preact-pwa is a template for building Progressive Web Apps using Preact and Redux. It provides a production-ready setup with universal rendering, service workers, and optimized builds to create fast, offline-capable web applications with a minimal footprint.

Target Audience

Frontend developers and teams looking to build high-performance PWAs with a modern stack (Preact/Redux) and minimal configuration.

Value Proposition

It offers a lean, opinionated foundation with built-in optimizations, reducing setup time and ensuring best practices for performance and PWA features out of the box.

Overview

Super fast progressive web app with small footprint & minimal dependancies

Use Cases

Best For

Building fast, offline-first Progressive Web Apps
Creating universal/isomorphic JavaScript applications with Preact
Projects requiring minimal bundle sizes and high Lighthouse scores
Developers preferring Redux for state management in Preact apps
Teams needing a production-ready PWA template with modern tooling
Applications where performance and user experience are critical

Not Ideal For

Projects needing extensive UI component libraries or pre-styled themes without custom CSS work
Teams preferring modern state management with hooks or alternatives to Redux and redux-thunk
Environments where Node v7 is considered outdated and upgrading is a priority
Applications that require detailed, complete documentation for all optimization steps

Pros & Cons

Pros

Minimal Bundle Size

Bundle is only 28.63 KB (9.64 KB gzipped) with Lighthouse scores of 100, as shown in the README, ensuring fast load times and high performance.

PWA Ready Out of Box

Includes service workers for offline capability and asset caching, making it easy to build Progressive Web Apps without additional setup, as highlighted in the features.

Universal Rendering Support

Provides isomorphic JavaScript with server-side and client-side rendering using Preact and Redux, improving SEO and initial render performance out of the box.

Modern Development Workflow

Uses Rollup for bundling, Buble for ES6 syntax, and Standard for linting, offering a streamlined and opinionated development environment with minimal dependencies.

Cons

Outdated Node Version

Requires Node v7, an older release that may not support newer npm packages or JavaScript features, as stated in the prerequisites, limiting compatibility.

Incomplete Optimization Docs

The README admits that performance insights are incomplete, suggesting potential gaps in guidance for advanced tuning and customization.

Redux and Thunk Lock-in

Heavily integrated with Redux and redux-thunk, which might be overkill for simpler apps or not preferred with modern Preact hooks, reducing flexibility.

Frequently Asked Questions

Related Projects

Official Boilerplate

:guitar: Ready-to-rock Preact starter project, powered by Webpack.

Stars960

Forks181

Last commit1 year ago

Preact Chrome Extension

Browser Extension Template with ESbuild builds, support for React, Preact, Typescript, Tailwind, Manifest V3/V2 support and multi browser build including Chrome, Firefox, Safari, Edge, Brave.

Stars692

Forks59

Last commit2 years ago

Preact Offline Starter

Webpack3 boilerplate for building SPA / PWA / offline front-end apps with Preact

Stars387

Forks38

Last commit7 years ago

Preact Simple Starter

PWA Simple Starter with Preact, Preact-mdl and Webpack2 🔥🔥🔥

Stars64

Forks9

Last commit8 years ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub