我开始专注于 Progressive Web App 环境，我正在使用 ASP.NET 4.6 和 MVC5 以及 Polymer Single Page App。我想知道我的 App Shell 中应该包含什么？
到目前为止，我已经包含了应用程序位置、应用程序路由、应用程序工具栏、应用程序抽屉布局，以及聚合物硫化。文件大小为 266 KB，我在第一次加载时注入了 HTML 内联。
这只会在视觉上加载导航栏。导航栏需要一个纸标签元素和我的自定义登录元素。我应该将它们包含在第一个负载中吗？
其他一切都是延迟加载的。
【问题讨论】：
标签： asp.net-mvc polymer progressive-enhancement progressive-web-apps
只需包含您将要使用的东西。如果你没有你需要的东西，那么当你意识到你需要它时就添加它。
如果你想变得更复杂，你可以使用 this.importHref 延迟加载聚合物元素。但是，在延迟加载元素时必须小心，因为它们可能依赖于最终被延迟加载的其他聚合物元素，从而产生必须加载的长链元素。
尝试保留您在应用初始加载时经常使用的元素，以及在应用的某些位置仅使用一次或两次的延迟加载元素。
【讨论】：
这是我在之前的回答中解释的一个例子。
假设您构建了一个名为 lazy-element 的元素，您想要延迟加载。它位于 http://example.com/lazy-element.html。这是您可以加载它的一种方式。
在当前元素中引用 lazy-element。
<lazy-element></lazy-element>
当您的项目加载时，该元素将不会执行任何操作，因为它尚未加载。所以，让我们创建一个函数来延迟加载它。将此函数包含在您项目的某处（可能作为我们延迟加载的元素中的私有函数）。
_loadElement: function(pathToElement) {
this.importHref(pathToElement, function() {
console.log(pathToElement + ' loaded');
}.bind(this), function() {
console.warn(pathToElement + ' failed to load');
}.bind(this));
}
现在，只要您希望 lazy-element 在项目中激活，就调用此函数加载 lazy-element。也许您希望它在项目准备好 5 秒后激活。
ready: function() {
window.setTimeout(function() {
this._loadElement('http://example.com/lazy-element.html');
}, 5000);
}
【讨论】：