examples

Veridock PWA.SVG Applications

A collection of Progressive Web Applications (PWAs) built entirely within SVG files. Each application is a single, self-contained .svg file that includes HTML, CSS, and JavaScript.

plik #SVG + funkcje #PWA = #veriDock - Kompaktowa aplikacja w jednym pliku SVG

Dzięki temu rozwiązaniu użytkownicy nie muszą pobierać dodatkowych zasobów z zewnętrznych serwerów, co przyspiesza ładowanie aplikacji.

Pełna funkcjonalność PWA

Integracja z funkcjami Progressive Web App (PWA), w tym Service Worker (offline, cache), App Manifest (instalacja, ikony, skróty), powiadomienia, wskaźniki online/offline oraz wsparcie dla funkcji takich jak Wake Lock i Badging API.

Umożliwia instalację aplikacji na urządzeniach mobilnych, automatyczne działanie offline, przechowywanie stanu aplikacji między sesjami oraz otrzymywanie powiadomień systemowych.

Zaawansowane funkcje interaktywne i analityczne Wbudowane animacje SVG, efekty hover, skróty klawiaturowe, śledzenie użytkowania (Analytics), eksportowanie wyników oraz monitorowanie wydajności aplikacji.

Obsługuje dynamiczne aktualizacje w czasie rzeczywistym, responsywny design, przywracanie stanu po restarcie oraz wymianę danych z innymi aplikacjami.

1. 📝 Notes App

A simple note-taking application with auto-save functionality and local storage.

2. 🔳 QR Code Generator

Generate and customize QR codes from text or URLs with real-time preview.

3. ⏱️ Basic Stopwatch

A simple stopwatch with second-precision timing and clean interface.

4. ⏱️ Enhanced Stopwatch (PWA)

Feature-rich stopwatch with millisecond precision and PWA capabilities.

5. ⏱️ Premium Stopwatch (Advanced)

Advanced stopwatch with additional features for power users.

🚀 Getting Started

Prerequisites

Running Locally

  1. Clone the repository:
    git clone https://github.com/yourusername/veridock.git
    cd veridock
    
  2. Start a local server:
    python3 -m http.server 8000
    
  3. Open any application in your browser:
    http://localhost:8000/examples/note/note.pwa.svg
    http://localhost:8000/examples/qrgen/qrgen.pwa.svg
    http://localhost:8000/examples/stoper/stoper.pwa.svg
    http://localhost:8000/examples/stoper2/stoper.pwa.svg
    http://localhost:8000/examples/stoper3/stoper.pwa.svg
    

🧪 Testing

Unit Tests

Run unit tests for a specific application:

# Run tests for all applications
cd examples/note && node test.js
cd examples/qrgen && node test.js
cd examples/stoper && node test.js
cd examples/stoper2 && node test.js
cd examples/stoper3 && node test.js

# Or run all tests from the root directory
make test

End-to-End Testing

Run Playwright tests:

cd tests/e2e
npm install
npm test

🛠️ Development

Project Structure

veridock/
├── examples/           # Example PWA.SVG applications
│   ├── note/           # 📝 Notes application
│   ├── qrgen/          # 🔳 QR Code Generator
│   ├── stoper/         # ⏱️ Basic Stopwatch
│   ├── stoper2/        # ⏱️ Enhanced Stopwatch with PWA features
│   └── stoper3/        # ⏱️ Premium Stopwatch with analytics
├── tests/              # Test files
├── docs/               # Documentation
└── CONTRIBUTING.md     # Contribution guidelines

Creating a New PWA.SVG App

  1. Create a new directory in examples/
  2. Create your .pwa.svg file with the following structure:
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 600">
      <!-- SVG content -->
      <foreignObject width="100%" height="100%">
        <xhtml:div>
          <!-- Your HTML/CSS/JS here -->
        </xhtml:div>
      </foreignObject>
      <script><![CDATA[
        // Your JavaScript here
      ]]></script>
    </svg>
    
  3. Add tests in a test.js file
  4. Update this README with your new application

🤝 Contributing

Contributions are welcome! Please read our Contributing Guidelines for details on how to contribute to this project.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

📬 Contact

For questions or feedback, please open an issue on GitHub.


https://www.pwabuilder.com/imagegenerator

Built with ❤️ by the Veridock Team