👨‍🚀 仅限客户端！我们能做到什么程度？👩‍🚀

简而言之，无服务器意味着使用别人的服务器，我觉得这个名字很不幸，因为 PWA 这个术语也被误用了，它以前被称为离线优先，至少在一切都以离线为先的时候是这样。

• 移动优先
• 桌面优先
• 内容优先
• 离线优先

讽刺的是，参与的人都是赢家，而且他们都获得了第一名，干得好，五星好评！🌟

好了，我的小抱怨就到此为止。无服务器架构的真正含义应该是通过
将所有东西都移到“边缘”以外的地方，也就是所有东西都本地化，来减少对服务器的需求（从技术上讲，这简直是在走下坡路）。

你在说什么？

静态网站之所以流行，不是因为它们简单，而是因为它们无需调用速度慢的后端和数据库，它们发出请求，有时还会提供基于 SPA 或前端框架的 UI，以增加动态的用户体验。

但如果我告诉你，你所知道的一切都是谎言，🕵️我们不需要服务器来加载网页……如果我告诉你，你可以在离线状态下将数据持久化到数据库中呢？

无需服务器即可进行网页导航

⚠️注意： Dev markdown 对下面的示例出现错误，地址需要将L（小写）重新添加到 data / htm 中l。

读完以上内容后，从黄色的 href 属性中获取地址，不要忘记删除外面的引号，然后将其粘贴到浏览器地址栏中，然后惊叹一声，回来找我，我懂你 🤗。

<a href="data:text/htm,<h1>This is your browser talking</h1>">just a normal link</a>

好吧，这是怎么回事？
地址可以包含data:或javascript:包含链接，而链接则需要使用不同的上下文，而不是像 https 这样的协议。
事实上，Base64 编码的字符串（例如图像、SVG 等）就是这样处理的，显然 HTML 也可以用类似的方式加载（无论是否编码）。浏览器会展开接收到的字符串，并将其返回以进行渲染等操作。我怀疑数据类似于预处理内容，无需 GET 请求即可返回。对于 HTML 来说，这将启动 DOM 渲染过程。我们已经为浏览器完成了所有繁重的工作，结果是速度飞快！

好了，我已经演示了如何在不使用服务器的情况下，仅用一个字符串渲染一个 HTML 文档。你可能会问，这里没有 CSS，也没有 JavaScript？其实，在这个超长的字符串中，script 和 style 标签都能正常工作。

所以你想用一个字符串创建一个包含 4 页的网站？嗯，或许这个字符串可以包含指向其他数据的链接：使用相同技术的 URI？结果将是一个包含 4 个元素的超长字符串。

编辑：这并不完全正确。
尽管我之前提到过四页网站，但Chrome和Firefox会使用不同的data:url禁用导航，这意味着导航的唯一途径实际上是通过单页应用（SPA），或许还可以通过Portal或iframe。我并不介意自己犯错，这只是个无关紧要的帖子。不过，我确信有办法关闭网页安全功能，我也确信在Electron风格的应用中，这个功能也可以关闭。

现在你手里拿着一个非常非常长的字符串，我们来考虑一下如何把它变成一个带有路由的 React 应用。现在我们手里拿着一个非常非常非常长的字符串，你应该明白我的意思了。除非你打算手动编写这个字符串，否则我建议你还是省省力气吧。我建议你考虑使用 Webpack 工具，它可以将所有内容内联，并为你提供一个可以统领一切的字符串。

⚠️ 由于字符串连接问题，您需要使用编码和方括号来解决此问题。

嗯，现在我们需要一个数据库？那就用 IndexedDB 吧。当然，你也可以用本地存储或会话存储，但这还不够酷。我个人建议你把 PouchDB 库塞进你的 megastring 里，这样使用 IndexedDB 会更有乐趣。

但是我们如何备份这个网站呢？当然是用U盘啦！

好吧，所以实际上我们可以在没有服务器的情况下做很多事情，这可行吗？也许用合适的工具可以实现，但你肯定无法在客户端运行商店或进行任何身份验证（也许吧，我对客户端加密了解不够，不敢完全信任）。迟早你都需要请求一些资源，这在现代网络上是根本不可能的。尽管如此，关于瘦客户端和胖客户端的这个思想实验还是很有意思的，我鼓励你们去探索一下。如果你做出了什么很棒的东西，请回来给我看看♥️你的反馈！

额外内容：这里有一些关于 PWA 的技巧，这些技巧早在 PWA 出现 10 年前就出现了。https ://hacks.mozilla.org/2010/01/offline-web-applications/