问题标签 [app-shell]

因此，假设您有一个基于 React 的移动 Web 应用程序，它利用服务器端渲染的初始视图（出于速度 + SEO 原因）。没有“index.html”文件——索引文件是在服务器端动态构建的，并在初始响应中返回。

现在假设您想向该应用程序添加 PWA 功能。你连接一个服务工作者来缓存资产等。

PWA 的核心租户之一是它们提供离线体验。假设我们只想显示一个刷新页面，“你离线，点击这里刷新”，当 service worker 检测到用户离线时。

google 提供的在线示例讨论了使用 App Shell —— 一个静态 HTML 文件，服务工作者可以在初次访问时对其进行缓存，这将是您的 react 应用程序所在的“shell”。该外壳与显示“离线”视图有关。

这如何与服务器端渲染一起工作，没有“shell” html 文件，并且每个路由都可能返回不同的 index.html 文件？

在野外有这个功能的演示或示例吗？

我正在实现一个服务工作者，它缓存并为我网站上的某些路由提供应用程序外壳。

我遇到了一个问题，即路由有时（例如，基于查询参数）会导致服务器端重定向。但是，一旦为用户提供了应用程序外壳，他们就再也不会真正访问服务器，并且重定向也不会发生。

这似乎是应用程序外壳固有的问题。寻求处理此类案件的想法和指导。

为清楚起见的其他详细信息：

1. 用户点击https://www.example.com
2. 安装 Service Worker，随后为/路由提供应用程序外壳
3. 一段时间后，用户再次访问该站点，但他们的帐户已被标记为进行安全审查。通常，服务器会处理此重定向，将用户重定向到，例如，https://www.example.com/account/security
4. 但是，由于应用程序外壳的存在，服务器没有机会执行这样的重定向。

我有一个标准的 angular-cli 生成项目。为它创建一个应用程序外壳并将其与 ng-universal 的服务器渲染技术相结合是否有意义？

如果是这样，那么最好的方法是什么？

我在网上看到了很多关于应用程序外壳及其使用方式的文章，但在Angular Universirty的一篇非常清晰的文章之后，它似乎对我不起作用我收到以下错误

从一开始就创建 Angular 应用程序时，大多数其他教程总是需要 --mobile 。如果我能获得有关渲染应用程序外壳的最新且有用的信息，我将不胜感激

我正在尝试将 App-Shell 添加到我的应用程序中。由于通配符重定向，我有一个在服务器构建过程中被触发的路由保护。

路由器模块

app.server.module

有没有办法让服务器构建忽略来自客户端 AppRouterModule 的通配符重定向？

我需要在我的 Angular 应用程序中进行服务器端渲染以获得两者的好处SEO并增加我的应用程序的加载时间，但我对appShell

当我阅读时，我发现它Angular Universal可以解决我的问题，那appShell是为了什么？

我正在使用带有按钮导航的 Shell，并希望能够将其中一个选项卡作为 TabbedPage。此外，我在 Shell 中的一个内容页面有一个工具栏项，它通向一个标签页，这在 iOS 中也不起作用，但在 Android 中都可以正常工作。

我所说的不工作的意思是，即使我将背景颜色设置为白色，我也只是得到一个黑色的“空白屏幕”，我什么也看不到。

我尝试创建一个新的 TabbedPage，同样的问题，尝试了最新的 3.6 表单版本以及 4.0 beta 9pre 版本，仍然是同样的问题。

更新

这是我的标签页：

这是我加载它的地方：

listview 和 contentPage 工作正常。TabbedPage 从上到下都是黑色的。

我无法让 Angular App Shell 正常工作。所以我按照说明配置了通用项目。然后我也设置了App Shell，可以看到我的angular.json底部的配置不错。但现在当我跑步时

我得到窗口未定义的错误。该错误是有道理的，因为我使用了直接使用窗口的第三方库（在本例中为 ckeditor），但无法从服务器端 Node.js 环境访问窗口。

但是我不确定为什么我会收到这个错误，因为 ckeditor 是在一个不同的组件中使用的，它不应该是 app-shell 的一部分。

这是我的 app.component.html

app-nav-menu、app-sidebar 和 ngx-spinner 组件都没有使用 ckeditor！ckeditor 在我在 app.module.ts 中导入的 ElementsModule 中的 text-element-component 内部使用

但是为什么我的 app-shell 构建失败了，它不应该使用 app.module.ts，而是 app.server.module.ts，对吧？我在这里缺少什么吗？

我将视图模型中的文本属性绑定到 App Shell 滑出菜单的 FlyoutHeader 视图

初始化应用程序时，所有更新事件都会正确触发，但是用户可以访问一个页面来更新他们的信息

我遇到的问题是当您导航到此页面并执行更新时，FlyoutHeader 视图没有更新以响应视图模型

滑出菜单是否有特定的东西，这意味着一旦加载它，它就不会响应 onpropertychanged ... 而改变？似乎不对

来自 AppShell xaml

来自 Flyoutheader 代码后面

用户通过 FlyoutHeader 视图中的按钮导航到“更改位置”页面，调用方式如下

在我的调试日志中，我可以看到 LocationsViewModel 中的绑定对象“用户”确实触发了 OnPropertyChanged 以响应在此页面上所做的更改，但随后“返回”并打开弹出菜单没有任何改变，我可以看到 PropertyChanged 没有不为那个观点开火吗？

我认为 OnPropertyChanged 绑定的全部意义在于即使加载了视图，也会发生更新以导致视图响应？

我的应用程序的设计要求我在 Flyout Header 中有一个按钮，一个单独的视图，它导航到一个页面

与弹出项目本身不同，当我单击按钮时，页面会在保持打开的弹出标题下加载

有没有办法让按钮准确地模仿在弹出内容本身中导航时发生的情况？

我尝试导航到的页面在 AppShell 中注册为路由

FlyoutHeader 中引用的视图中的代码从按钮单击中调用它，如下所示

如上所述，弹出菜单此时打开以访问按钮，但单击时会加载所需的页面，但我希望它自动关闭菜单

请问有没有办法做到这一点？