fix image shared with web share

src/views/SharedPhotoView.vue

@@ -48,6 +48,15 @@
     </div>
     <div v-else class="text-center mb-4">
       <p>No image found.</p>
+      <p class="mt-4">
+        If you shared an image, the cause is usually that you do not have the
+        recent version of this app, or that the app has not refreshed the
+        service code underneath. To fix this, first make sure you have latest
+        version by comparing your version at the bottom of "Help" with the
+        version at the bottom of https://timesafari.app/help in a browser. After
+        that, it may eventually work, but you can speed up the process by clearing
+        your data cache (in the browser on mobile, even if you installed it) and/or
+        reinstalling the app (after backing up all your data, of course).</p>
     </div>
   </section>
 </template>

sw_scripts/safari-notifications.js

@@ -566,14 +566,27 @@ async function getNotificationCount() {
   return result;
 }
 
+export async function blobToBase64String(blob) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => resolve(reader.result); // potential problem if it returns an ArrayBuffer?
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+}
+
 // Store the image blob and go immediate to a page to upload it.
 // @param photo - image Blob to store for later retrieval after redirect
 async function savePhoto(photo) {
   try {
+    const photoBase64 = await blobToBase64String(photo);
     const db = await openIndexedDB("TimeSafari");
     const transaction = db.transaction("temp", "readwrite");
     const store = transaction.objectStore("temp");
-    await updateRecord(store, { id: "shared-photo", blob: photo });
+    await updateRecord(store, {
+      id: "shared-photo-base64",
+      blobB64: photoBase64,
+    });
     transaction.oncomplete = () => db.close();
   } catch (error) {
     console.error("safari-notifications logMessage IndexedDB error", error);