Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ezekielchentnik/preact-pwa
Super fast progressive web app with small footprint & minimal dependancies
https://github.com/ezekielchentnik/preact-pwa
buble optimize-js performance preact redux rollup service-worker
Last synced: about 1 month ago
JSON representation
Super fast progressive web app with small footprint & minimal dependancies
- Host: GitHub
- URL: https://github.com/ezekielchentnik/preact-pwa
- Owner: ezekielchentnik
- License: mit
- Created: 2016-12-29T08:35:40.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-08-12T02:48:39.000Z (about 7 years ago)
- Last Synced: 2024-05-15T15:45:59.496Z (4 months ago)
- Topics: buble, optimize-js, performance, preact, redux, rollup, service-worker
- Language: JavaScript
- Homepage: https://preact-pwa-yfxiijbzit.now.sh/
- Size: 803 KB
- Stars: 510
- Watchers: 13
- Forks: 45
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-preact - Preact PWA - PWA focused on raw performance, server side rendering, prerendering, redux, express, rollup. (Uncategorized / Uncategorized)
README
# [preact-pwa](https://preact-pwa-yfxiijbzit.now.sh/)
A `Super fast progressive web app` with a small footprint & minimal dependencies.
Features universal rendering, redux, state-driven routing, preact, & service workers. Crunched & optimized with rollup, buble, optimize-js, & purify-css.
Live version (zeit): [https://preact-pwa-yfxiijbzit.now.sh/](https://preact-pwa-yfxiijbzit.now.sh/)
## bundle sizes & performance
```
Bundle Size: 28.63 KB, 9.64 KB Gzipped
Webpage test: A, A, A
pagespeed: 100
lighthouse: 100
```
## Getting Started
### Prerequisites
Make sure that [Node v7](https://nodejs.org/en/download/releases/) is installed.
Make sure that [yarn](https://github.com/yarnpkg/yarn) is installed.
### Instructions
First, clone the repo
```bash
$ git clone https://github.com/ezekielchentnik/preact-pwa
```
Then, install all dependencies:
```bash
$ yarn
```
Finally, to run the project for development:
```bash
$ yarn dev
```
Or, to run the project for production:
```bash
$ yarn start
```
## performance insights (note: incomplete)
### manifest.json
Using 192x192 for minimum sized icon, omitting other sizes to reduce downloads for users
[reference](https://developers.google.com/web/updates/2015/10/splashscreen)
### libraries
- we can shave off ~10 KB, ~3kb Gzipped by pruning `preact-redux` & manually connecting
## Features
- Progressive Web App enabled with [service workers](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers)
- Offline capable with [service workers](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers)
- Universal JavaScript (isomorphic rendering)
- Asset Versioning, long term caching, & cache busting for browser that do not support service workers via [node-rev](https://www.npmjs.com/package/node-rev)
- Modern JavaScript syntax with [ES6](https://github.com/lukehoban/es6features) via [buble](https://buble.surge.sh/guide/).
- Performant bundles via [rollup](http://rollupjs.org/).
- Component-based UI architecture via [Preact](https://preactjs.com/).
- Application state management w/time-travel debugging via [Redux](https://github.com/gaearon/redux).
- CSS built with [Sass](http://sass-lang.com/) and optimized with [purify-css](https://github.com/purifycss/purifycss).
- Async actions handled with [redux-thunk](https://github.com/gaearon/redux-thunk), [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch), and [promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise).
- Node server is built with [express](http://expressjs.com/).
- Linting is handled with [Standard](http://standardjs.com/).
License
MIT