Vaadin 14 - 未创建服务工作者和清单答案

【问题标题】：Vaadin 14 - Service worker and manifest is not createdVaadin 14 - 未创建服务工作者和清单
【发布时间】：2020-01-27 11:13:49
【问题描述】：

我目前正在 Vaadin14 开发 PWA。我目前的目标是在浏览器中显示安装窗口，但我根本无法获得它。

我尝试使用https://vaadin.com/pwa/learn/installing-applications 作为指导。我有一个有效的证书并在浏览器中为应用程序使用 HTTPS 连接。使用了以下@PWA注解：

@Route("main") 
@PWA(name = "Test", shortName = "Test", backgroundColor = "#227aef", themeColor = "#227aef") 
public class MainView extends AppLayout implements RouterLayout, BeforeEnterObserver {

我用 Chrome 和 Firefox 都试过了，都没有显示安装窗口。

提到Vaadin自己创建了Web App Manifest和ServiceWorker（https://vaadin.com/docs/v14/flow/pwa/tutorial-pwa-pwa-with-flow.html）

Vaadin 服务器自动为 web manifest、service worker 提供服务，图标、离线页面和安装提示，并添加必要的添加到应用程序标头。

但是，在我的项目构建后，我无法在任何地方找到这些文件。它们存储在哪里？

我在这里错过了什么？

编辑：Firefox 具有以下配置，我将其设置为 true。

如果 dom.serviceWorkers.enable，Service Worker 可能不可用首选项在 about:config 中设置为 false。

Edit2：我可以验证 Firefox 没有为我的应用程序启动 Service-Worker。

【问题讨论】：

您是否检查过 Vaadin 创建的清单是否包含下一个字段？：short_name or name, icons (192px & 512px), start_url and display (fullscreen or standalone or minimal-ui)
我到处搜索清单，但似乎它甚至没有创建。
您可以在浏览器上查看。例如在 Chrome 上：按 F12 >> 应用程序 >> 清单
您的 PWA 是否使用相同的 HTTPS 网址通过了 Chrome Lighthouse 测试？运行通常会告诉您是否有任何问题并提示如何修复。
感谢您的提示。我会在周一上班的时候试一试！

标签： java vaadin progressive-web-apps vaadin-flow vaadin14

【解决方案1】：

为了在移动设备上显示 A2HS（添加到主屏幕）对话框，您应该正确配置一个正在运行的 Service Worker 和一个 Web 清单文件。

在桌面浏览器的情况下，您不会看到弹出窗口（除非 vaadin 本身会为您打开一个，但我不使用此技术），而是在浏览器地址栏中看到一个 (+) 图标（此处为 Chrome）：

您应该首先确定是否正确生成了 Service Worker 和 Web 清单。也许它们在 /bin 文件夹中，在项目结构中有点隐藏。

【讨论】：

感谢您的帮助。我可以验证没有创建清单或 serviceworker。知道为什么吗？
不幸的是我不知道 vaadin14，因此我不知道为什么没有创建这两个文件。我快速浏览了 vaadin 文档，看来您必须为服务人员实现代码（因此他们还建议使用 Microsoft 的 PWABuilder）。因此 vaadin 为您“提供” PWA 文件，但您必须创建和引用它们。至少我们找到了您没有得到任何 A2HS 弹出对话框的原因。

【解决方案2】：

我终于能够解决这个问题。肯定花了一些时间。问题是我的自定义 VaadinServlet 无法识别我的 @PWA 注释，因此我必须手动添加它。

public class VaadinFlowServlet extends com.vaadin.flow.server.VaadinServlet {

@Override
public void init(ServletConfig servletConfig) throws ServletException {
    var registry = 
    ApplicationRouteRegistry.getInstance(servletConfig.getServletContext());
    registry.setPwaConfigurationClass(LoginView.class); // <-- contains @PWA

    super.init(servletConfig);
}

【讨论】：