构建一个离线友好的图像上传系统
Poor internet connectivity doesn’t have to mean poor UX. With PWA technologies like IndexedDB, service workers, and the Background Sync API, you can build an offline-friendly image upload system that queues uploads and retries them automatically — so your users can upload stress-free, even when offline.
糟糕的互联网连接并不意味着糟糕的用户体验。借助 PWA 技术，如 IndexedDB、服务工作者和后台同步 API，你可以构建一个离线友好的图像上传系统，该系统会排队上传并自动重试——这样你的用户即使在离线时也可以无压力地上传。
So, you’re filling out an online form, and it asks you to upload a file. You click the input, select a file from your desktop, and are good to go. But something happens. The network drops, the file disappears, and you’re stuck having to re-upload the file. Poor network connectivity can lead you to spend an unreasonable amount of time trying to upload files successfully.
所以，你正在填写一个在线表单，它要求你上传一个文件。你点击输入框，从桌面选择一个文件，然后就可以开始了。但发生了一些事情。网络中断，文件消失了，你不得不重新上传文件。网络连接不良可能会让你花费不合理的时间来成功上传文件。
What ruins the user experience stems from having to constantly check network stability and retry the upload several times. While we may not be able to do much about network connectivity, as developers, we can always do something to ease the pain that comes with this problem.
破坏用户体验的原因在于必须不断检查网络稳定性并多次重试上传。虽然我们可能无法对网络连接做太多，但作为开发者，我们总能做一些事情来缓解这个问题带来的痛苦。
One of the ways we can solve this problem is by tweaking image upload systems in a way that enables users to upload images offline — eliminating the need for a reliable network connection, and then having the system retry the upload process when the network becomes stable, without the user intervening.
我们可以通过调整图像上传系统的方式来解决这个问题，使用户能够离线上传图像——消除对可靠网络连接的需求，然后在网络稳定时让系统重试上传过程，而无需用户干预。
This article is going to focus on explaining how to build an offline-friendly image upload system using PWA (progressive web application) technologies such as IndexedDB, service workers, and the Background Sync API. We will also briefly cover tips for improving the user experience for this system.
本文将重点解释如何使用 PWA（渐进式网络应用）技术构建 一个离线友好的图像上传系统，例如 IndexedDB、服务工作者和后台同步 API。我们还将简要介绍改善该系统用户体验的技巧。