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:
2026-03-29 20:22:25 -06:00
parent 6577a733c6
commit b20e118def
4 changed files with 237 additions and 1 deletions
+6
View File
@@ -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 &mdash; 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) {
+6
View File
@@ -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&rsquo;re currently offline &mdash; 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 () {