node.js - 为我的 Service Worker 构建一个 App Shell 以使用 Handlebars 进行缓存

Question

我正在使用 express-handlebars 构建 PWA。我正在尝试遵循 Google 设计实践并构建一个应用程序外壳，以便与服务人员一起缓存。但是，我有点难过，因为 Handlebars 是一个生成 html 的模板引擎。有没有更好的方法来构建一个用于服务工作者缓存的 express 应用程序外壳？示例将不胜感激。

标签： node.jsexpressservice-workerprogressive-web-appsexpress-handlebars

Answer 1

“有没有更好的方法”取决于您项目中的许多变量，并且确实没有答案。

至少在我看来，这里更重要的是了解应用程序外壳的基本概念。当您意识到您将能够调整变量并自由选择正确的技术时。如果它适合您的应用程序，则使用 Handlebars 生成 HTML 是完全可以的。HTML 对于浏览器来说是快速渲染的（相对于 JS 重的东西），所以它完全符合 shell 的想法。

使用应用程序外壳，您的应用程序的结构不是不断变化的静态（ish）布局（菜单、页眉、页脚等）和动态部分。通过这种分离，app shell 的想法可以这样使用 Service Worker：

1. 服务器提供应用程序外壳（通常只有 HTML/CSS）
2. 浏览器渲染速度非常快，并通过 Service Worker 将其缓存以供离线使用
3. 显示外壳后，JS 接管并开始获取动态内容（外壳“内部”显示的内容）
4. 浏览器使用一些 JS 框架渲染动态部分（通常）

这些单独的部分可能非常松散耦合。您可以使用任何您想要创建应用程序外壳的方式和完全不同的方式来创建动态部分。或者，您可以使用相同的前端框架来实现它们。从应用程序外壳架构的角度来看，这并不重要。关键是，shell 应该可以超快速地使用，当您只发布 HTML/CSS 时，您将更容易实现这一点。