mirror of
https://github.com/tmdinosaurcenter/kiosk-guestbook.git
synced 2026-06-03 23:09:35 -06:00
feat: add offline queue for kiosk form submissions
Intercepts form submit via fetch and stores failed submissions in IndexedDB when offline. Replays queued entries on the online event and on each page load. Shows an offline banner on the form page and a sync-pending message on the thank-you page. Service worker bumped to guestbook-v2 to pre-cache offline-queue.js so the script is available when the kiosk has no network.
This commit is contained in:
@@ -89,6 +89,10 @@
|
||||
Providing your email is optional, but it helps us follow up if needed.
|
||||
</div>
|
||||
|
||||
<div id="offline-indicator" class="alert alert-warning d-none" role="status">
|
||||
No internet connection — your entry will be saved and submitted automatically when reconnected.
|
||||
</div>
|
||||
|
||||
{% if error %}
|
||||
<div class="alert alert-danger" role="alert">
|
||||
{{ error }}
|
||||
@@ -199,6 +203,8 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
|
||||
|
||||
<script src="/static/offline-queue.js"></script>
|
||||
|
||||
<!-- Service worker registration -->
|
||||
<script>
|
||||
if ('serviceWorker' in navigator) {
|
||||
|
||||
@@ -76,7 +76,11 @@
|
||||
<div class="text-center mt-5">
|
||||
<div class="alert alert-success py-4" role="alert">
|
||||
<p class="thank-you-message mb-1">Thanks, {{ name }}!</p>
|
||||
{% if offline %}
|
||||
<p class="mb-0">You’re currently offline — your entry has been saved and will sync automatically when reconnected.</p>
|
||||
{% else %}
|
||||
<p class="mb-0">Your visit has been recorded.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<p class="text-muted mt-3">
|
||||
Returning to the form in <span id="countdown">4</span>...
|
||||
@@ -128,6 +132,8 @@
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script src="/static/offline-queue.js"></script>
|
||||
|
||||
<script>
|
||||
if ('serviceWorker' in navigator) {
|
||||
window.addEventListener('load', function () {
|
||||
|
||||
Reference in New Issue
Block a user