https://github.com/weaponsforge/simple-pwa
Simple PWA setup in a vanilla HTML/CSS/JS website
https://github.com/weaponsforge/simple-pwa
pwa workbox
Last synced: 15 days ago
JSON representation
Simple PWA setup in a vanilla HTML/CSS/JS website
- Host: GitHub
- URL: https://github.com/weaponsforge/simple-pwa
- Owner: weaponsforge
- Created: 2026-03-17T10:22:46.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2026-03-17T16:39:30.000Z (3 months ago)
- Last Synced: 2026-03-18T06:35:31.099Z (3 months ago)
- Topics: pwa, workbox
- Language: HTML
- Homepage: https://weaponsforge.github.io/simple-pwa
- Size: 60.5 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## simple-pwa
Simple PWA setup in a vanilla HTML/CSS/JS website.
Related to [cra-pwa](https://github.com/weaponsforge/cra-pwa) (React).
### Demo
https://weaponsforge.github.io/simple-pwa/
## Installation
> [!NOTE]
> This project uses `/simple-pwa` as a base path for GitHub Pages deployment.
> If running locally or deploying to a root domain, remove this prefix from all asset and service worker paths.
#### 1. Clone this repository.
```sh
git clone https://github.com/weaponsforge/simple-pwa.git
```
#### 2. Update asset paths.
If you're **not deploying to GitHub Pages**, update paths to remove `/simple-pwa`.
`manifest.json`
Update icon paths:
```json
{
"name": "Simple PWA",
"short_name": "PWA",
"start_url": "/",
"icons": [
{
"src": "/assets/web-app-manifest-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "/assets/web-app-manifest-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable any"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
```
#### 3. Update service worker path.
`index.html`
Ensure the service worker is registered from the root:
```javascript
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
}
```
#### 4. Run locally.
- (a) Option 1: using `serve`.
```sh
npx serve
```
- (b) Option 2: using Docker eg., with Windows PowerShell.
> From the **parent** directory of the **root** project:
```sh
docker run -it --rm -p 3000:3000 `
-e PORT=3000 `
-e USE_POLLING=true `
-v ${pwd}/simple-pwa:/opt/app/public `
weaponsforge/livereload-basic
```
## Resources
- [RealFaviconGenerator](https://realfavicongenerator.net/) - generates image and SVG favicons with a site.webmanifest file.
- [pwa-asset-generator](https://www.npmjs.com/package/pwa-asset-generator) - Offers a one-off execution that automatically generates icon and splash screen images, favicons and mstile images, and a JavaScript module that could be used programmatically for generating assets.
@weaponsforge
20260317