Catch POST in service worker, not by rewriting button.

mysociety · Feb 14, 2020 · d42ce1b · d42ce1b
1 parent 4cb4248
commit d42ce1b
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 25 deletions.
diff --git a/templates/web/base/offline/service_worker.html b/templates/web/base/offline/service_worker.html
@@ -6,6 +6,8 @@
 
 ~%]
 
+importScripts('https://cdn.jsdelivr.net/npm/idb-keyval@3/dist/idb-keyval-iife.min.js');
+
 const requiredOffline = [
  "[% version('/cobrands/' _ c.cobrand.asset_moniker _ '/base.css') %]",
  "[% version('/cobrands/' _ c.cobrand.asset_moniker _ '/layout.css') %]",
@@ -37,7 +39,39 @@
  const request = fetchEvent.request;
  const url = new URL(request.url);
 
- if (request.method !== "GET" || url.origin !== location.origin) {
+ if (url.origin !== location.origin) {
+ return;
+ }
+
+ // Handle inspection form submission if offline...
+ if (request.method === 'POST' && RegExp('/report/\\d+$').test(url)) {
+ fetchEvent.respondWith(async function() {
+ const fetchPromise = fetch(request.clone());
+ try {
+ return await fetchPromise;
+ }
+ catch {
+ fetchEvent.waitUntil(async function() {
+ var text = await request.text();
+ let formData = new URLSearchParams(text);
+ formData.set('save', 2);
+ formData.set('saved_at', Math.floor(+new Date() / 1000));
+ formData = formData.toString();
+
+ var data = await idbKeyval.get('offlineData') || { cachedReports: {}, forms: [] };
+ var forms = data.forms;
+ if (!forms.length || formData != forms[forms.length - 1][1]) {
+ forms.push([request.url, formData]);
+ }
+ return idbKeyval.set('offlineData', data);
+ }());
+
+ return Response.redirect('/my/planned?saved=1');
+ };
+ }());
+ }
+
+ if (request.method !== "GET") {
  return;
  }
 
@@ -67,4 +101,4 @@
 });
 
 var offlineResponse = () =>
- new Response('Service Unavailable', { status: 503, statusText: 'Service Unavailable', headers: { 'Content-Type': 'text/html' }});
+ new Response('Service Unavailable', { status: 503, statusText: 'Service Unavailable', headers: { 'Content-Type': 'text/html' }});
diff --git a/web/cobrands/fixmystreet/offline.js b/web/cobrands/fixmystreet/offline.js
@@ -146,15 +146,6 @@ fixmystreet.offlineData = (function() {
  getForms: function() {
  return getData().then(function(data) { return data.forms; });
  },
- addForm: function(action, formData) {
- updateData(function(data) {
- var forms = data.forms;
- if (!forms.length || formData != forms[forms.length - 1][1]) {
- forms.push([action, formData]);
- }
- fixmystreet.offlineBanner.update();
- });
- },
  shiftForm: function(idx) {
  updateData(function(data) {
  data.forms.shift();
@@ -329,20 +320,6 @@ fixmystreet.offline = (function() {
  });
  }
  });
-
- // If we catch the form submit, e.g. Chrome still seems to
- // try and submit and we get the Chrome offline error page
- var btn = $('#report_inspect_form input[type=submit]');
- btn.click(function() {
- var form = $(this).closest('form');
- var data = form.serialize() + '&save=1&saved_at=' + Math.floor(+new Date() / 1000);
- fixmystreet.offlineData.addForm(form.attr('action'), data);
- location.href = '/my/planned?saved=1';
- return false;
- });
- btn[0].type = 'button';
-
- return true;
  }
 
  return {