You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
4
6
5
-
## ✨ Features
7
+
## Features
6
8
7
-
### 🔄 Auto-Updater & Cache Management
9
+
### Auto-Updater & Cache Management
8
10
-**Automatic Update Detection**: Checks for new versions every 30 minutes
9
11
-**Smart Cache Management**: Intelligent caching strategies with expiration
10
12
-**Force Update Capability**: Manual cache clearing and app refresh
11
13
-**Update Notifications**: User-friendly update prompts with changelog
12
14
-**Version Control**: Automatic version tracking and management
13
15
14
-
### 📱 PWA Features
16
+
### PWA Features
15
17
-**Offline Support**: Works without internet connection
16
18
-**Installable**: Can be installed on mobile and desktop
17
19
-**Responsive Design**: Works on all device sizes
18
20
-**Encrypted Storage**: Secure local data storage with encryption
19
21
-**Push Notifications**: Support for push notifications (when configured)
20
22
21
-
### 🛠️ Developer Tools
23
+
### Developer Tools
22
24
-**Cache Management UI**: Visual cache information and controls
23
25
-**Deployment Script**: Automated version management for deployments
24
26
-**Debug Information**: Detailed logging and status reporting
25
27
-**Cross-Platform**: Works on all modern browsers
26
28
27
-
## 🚀 Quick Start
29
+
## Quick Start
28
30
29
31
1.**Clone or download** this template
30
32
2.**Serve locally** using a web server (required for service worker)
@@ -46,7 +48,7 @@ php -S localhost:8000
46
48
47
49
Then visit `http://localhost:8000` in your browser.
-**Old Issue**: Users don't know when updates are available
120
122
-**Solution**: In-app update notifications with changelog
121
123
122
-
## 📋 File Structure
124
+
## File Structure
123
125
124
126
```
125
127
PWA-Template/
@@ -138,7 +140,7 @@ PWA-Template/
138
140
└── README.md # This file
139
141
```
140
142
141
-
## 🔄 Update Process
143
+
## Update Process
142
144
143
145
1.**Developer deploys** new version using `deploy.js`
144
146
2.**Service worker detects** new version via `version.json`
@@ -147,7 +149,7 @@ PWA-Template/
147
149
5.**Cache is cleared** and new version loads
148
150
6.**App continues** with fresh content
149
151
150
-
## 🛡️ Cache Management
152
+
## Cache Management
151
153
152
154
### Automatic Cache Management
153
155
-**Expiration**: Cached files expire after 7 days
@@ -161,46 +163,46 @@ PWA-Template/
161
163
-**Cache Information**: View cache statistics
162
164
-**Update Check**: Manually check for updates
163
165
164
-
## 📱 Browser Support
166
+
## Browser Support
165
167
166
168
- ✅ Chrome/Edge (Chromium-based)
167
169
- ✅ Firefox
168
170
- ✅ Safari (iOS 11.3+)
169
171
- ✅ Samsung Internet
170
172
- ⚠️ Internet Explorer (Limited support)
171
173
172
-
## 🤝 Contributing
174
+
## Contributing
173
175
174
176
1. Fork the repository
175
177
2. Create a feature branch
176
178
3. Make your changes
177
179
4. Test thoroughly
178
180
5. Submit a pull request
179
181
180
-
## 📄 License
182
+
## License
181
183
182
184
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
183
185
184
-
## 🙏 Acknowledgments
186
+
## Acknowledgments
185
187
186
188
- Built with vanilla HTML, CSS, and JavaScript
187
189
- Uses modern web APIs for PWA functionality
188
190
- Inspired by the need for better PWA update management
189
191
190
192
A minimal, production-ready Progressive Web App template with encrypted storage and offline support.
191
193
192
-
## ✨ Features
194
+
## Features
193
195
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
202
204
203
-
## 📁 File Structure
205
+
## File Structure
204
206
205
207
```
206
208
PWA Template/
@@ -219,7 +221,7 @@ PWA Template/
219
221
└── README.md # Documentation
220
222
```
221
223
222
-
## 🚀 Quick Start
224
+
## Quick Start
223
225
224
226
1.**Clone this repository**:
225
227
```bash
@@ -242,12 +244,12 @@ PWA Template/
242
244
3.**Open in browser**: Navigate to `http://localhost:8000`
243
245
244
246
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
249
251
250
-
## 💾 Encrypted Storage
252
+
## Encrypted Storage
251
253
252
254
### Basic Usage
253
255
@@ -428,15 +430,15 @@ console.log(storage.encryptionMethod); // 'webcrypto' or 'simple'
428
430
- ✅ Edge (full support)
429
431
- ⚠️ Internet Explorer (limited support)
430
432
431
-
## 🚀 Deployment
433
+
## Deployment
432
434
433
435
1.**Deploy to HTTPS** (required for PWA features)
434
436
2.**Test offline functionality**
435
437
3.**Verify installation** works on target devices
436
438
4.**Run Lighthouse audit** for PWA compliance
437
439
5.**Update cache version** in service worker when deploying changes
438
440
439
-
## 🧪 Development
441
+
## Development
440
442
441
443
-**DevTools**: Use Application tab to debug PWA features
442
444
-**Offline Testing**: Toggle network in DevTools
@@ -447,3 +449,4 @@ console.log(storage.encryptionMethod); // 'webcrypto' or 'simple'
447
449
## License
448
450
449
451
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.
0 commit comments