Skip to content

Commit bb0f1bf

Browse files
authored
Add status badge
1 parent 0f0279d commit bb0f1bf

File tree

1 file changed

+36
-33
lines changed

1 file changed

+36
-33
lines changed

README.md

Lines changed: 36 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,32 @@
1+
[![pages-build-deployment](https://github.com/TolinSimpson/PWA-Template/actions/workflows/pages/pages-build-deployment/badge.svg)](https://github.com/TolinSimpson/PWA-Template/actions/workflows/pages/pages-build-deployment)
2+
13
# PWA Template
24

35
A comprehensive Progressive Web App template with enhanced auto-updater and cache management features. This template addresses common PWA deployment issues like browser caching and ensures installed PWAs update properly when deployed to platforms like GitHub Pages.
46

5-
## Features
7+
## Features
68

7-
### 🔄 Auto-Updater & Cache Management
9+
### Auto-Updater & Cache Management
810
- **Automatic Update Detection**: Checks for new versions every 30 minutes
911
- **Smart Cache Management**: Intelligent caching strategies with expiration
1012
- **Force Update Capability**: Manual cache clearing and app refresh
1113
- **Update Notifications**: User-friendly update prompts with changelog
1214
- **Version Control**: Automatic version tracking and management
1315

14-
### 📱 PWA Features
16+
### PWA Features
1517
- **Offline Support**: Works without internet connection
1618
- **Installable**: Can be installed on mobile and desktop
1719
- **Responsive Design**: Works on all device sizes
1820
- **Encrypted Storage**: Secure local data storage with encryption
1921
- **Push Notifications**: Support for push notifications (when configured)
2022

21-
### 🛠️ Developer Tools
23+
### Developer Tools
2224
- **Cache Management UI**: Visual cache information and controls
2325
- **Deployment Script**: Automated version management for deployments
2426
- **Debug Information**: Detailed logging and status reporting
2527
- **Cross-Platform**: Works on all modern browsers
2628

27-
## 🚀 Quick Start
29+
## Quick Start
2830

2931
1. **Clone or download** this template
3032
2. **Serve locally** using a web server (required for service worker)
@@ -46,7 +48,7 @@ php -S localhost:8000
4648

4749
Then visit `http://localhost:8000` in your browser.
4850

49-
## 📦 Deployment
51+
## Deployment
5052

5153
### Automatic Deployment (Recommended)
5254

@@ -73,7 +75,7 @@ node deploy.js --major
7375
3. Deploy to your hosting platform
7476
4. The PWA will automatically update for users
7577

76-
## 🔧 Configuration
78+
## Configuration
7779

7880
### Cache Settings
7981

@@ -101,7 +103,7 @@ const UPDATE_CONFIG = {
101103
};
102104
```
103105

104-
## 🎯 How It Solves PWA Update Issues
106+
## How It Solves PWA Update Issues
105107

106108
### Problem: Browser Caching
107109
- **Old Issue**: Browsers cache PWA files, preventing updates
@@ -119,7 +121,7 @@ const UPDATE_CONFIG = {
119121
- **Old Issue**: Users don't know when updates are available
120122
- **Solution**: In-app update notifications with changelog
121123

122-
## 📋 File Structure
124+
## File Structure
123125

124126
```
125127
PWA-Template/
@@ -138,7 +140,7 @@ PWA-Template/
138140
└── README.md # This file
139141
```
140142

141-
## 🔄 Update Process
143+
## Update Process
142144

143145
1. **Developer deploys** new version using `deploy.js`
144146
2. **Service worker detects** new version via `version.json`
@@ -147,7 +149,7 @@ PWA-Template/
147149
5. **Cache is cleared** and new version loads
148150
6. **App continues** with fresh content
149151

150-
## 🛡️ Cache Management
152+
## Cache Management
151153

152154
### Automatic Cache Management
153155
- **Expiration**: Cached files expire after 7 days
@@ -161,46 +163,46 @@ PWA-Template/
161163
- **Cache Information**: View cache statistics
162164
- **Update Check**: Manually check for updates
163165

164-
## 📱 Browser Support
166+
## Browser Support
165167

166168
- ✅ Chrome/Edge (Chromium-based)
167169
- ✅ Firefox
168170
- ✅ Safari (iOS 11.3+)
169171
- ✅ Samsung Internet
170172
- ⚠️ Internet Explorer (Limited support)
171173

172-
## 🤝 Contributing
174+
## Contributing
173175

174176
1. Fork the repository
175177
2. Create a feature branch
176178
3. Make your changes
177179
4. Test thoroughly
178180
5. Submit a pull request
179181

180-
## 📄 License
182+
## License
181183

182184
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
183185

184-
## 🙏 Acknowledgments
186+
## Acknowledgments
185187

186188
- Built with vanilla HTML, CSS, and JavaScript
187189
- Uses modern web APIs for PWA functionality
188190
- Inspired by the need for better PWA update management
189191

190192
A minimal, production-ready Progressive Web App template with encrypted storage and offline support.
191193

192-
## Features
194+
## Features
193195

194-
- 🚀 **Offline Support**: Service worker for caching and offline functionality
195-
- 🔐 **Encrypted Storage**: AES-256-GCM encryption with browser fallbacks
196-
- 📱 **Mobile Ready**: Responsive design for all devices
197-
- 📲 **Installable**: Native app experience
198-
- **Fast Loading**: Optimized caching strategies
199-
- 💾 **Data Management**: Save, load, export, import, and inspect data
200-
- 🎨 **Clean UI**: Minimal, modern interface
201-
- 🔧 **Zero Dependencies**: Pure HTML, CSS, and JavaScript
196+
- **Offline Support**: Service worker for caching and offline functionality
197+
- **Encrypted Storage**: AES-256-GCM encryption with browser fallbacks
198+
- **Mobile Ready**: Responsive design for all devices
199+
- **Installable**: Native app experience
200+
- **Fast Loading**: Optimized caching strategies
201+
- **Data Management**: Save, load, export, import, and inspect data
202+
- **Clean UI**: Minimal, modern interface
203+
- **Zero Dependencies**: Pure HTML, CSS, and JavaScript
202204

203-
## 📁 File Structure
205+
## File Structure
204206

205207
```
206208
PWA Template/
@@ -219,7 +221,7 @@ PWA Template/
219221
└── README.md # Documentation
220222
```
221223

222-
## 🚀 Quick Start
224+
## Quick Start
223225

224226
1. **Clone this repository**:
225227
```bash
@@ -242,12 +244,12 @@ PWA Template/
242244
3. **Open in browser**: Navigate to `http://localhost:8000`
243245

244246
4. **Test PWA features**:
245-
- 📲 Install the app (install prompt should appear)
246-
- 🔌 Toggle offline mode to test caching
247-
- 💾 Use the storage demo to save/load encrypted data
248-
- 📱 Test on mobile devices for full experience
247+
- Install the app (install prompt should appear)
248+
- Toggle offline mode to test caching
249+
- Use the storage demo to save/load encrypted data
250+
- Test on mobile devices for full experience
249251

250-
## 💾 Encrypted Storage
252+
## Encrypted Storage
251253

252254
### Basic Usage
253255

@@ -428,15 +430,15 @@ console.log(storage.encryptionMethod); // 'webcrypto' or 'simple'
428430
- ✅ Edge (full support)
429431
- ⚠️ Internet Explorer (limited support)
430432

431-
## 🚀 Deployment
433+
## Deployment
432434

433435
1. **Deploy to HTTPS** (required for PWA features)
434436
2. **Test offline functionality**
435437
3. **Verify installation** works on target devices
436438
4. **Run Lighthouse audit** for PWA compliance
437439
5. **Update cache version** in service worker when deploying changes
438440

439-
## 🧪 Development
441+
## Development
440442

441443
- **DevTools**: Use Application tab to debug PWA features
442444
- **Offline Testing**: Toggle network in DevTools
@@ -447,3 +449,4 @@ console.log(storage.encryptionMethod); // 'webcrypto' or 'simple'
447449
## License
448450

449451
This project is released into the public domain under [The Unlicense](https://unlicense.org). You are free to use, modify, distribute, or sell this software for any purpose without restriction.
452+

0 commit comments

Comments
 (0)