标签: progressive-web-apps

我正在尝试在 Google Play 商店上发布 PWA，并在作为内部应用程序进行测试时遇到了一些令人困惑的问题。我使用PWA2APK将我的 PWA 转换为 APK。发布前报告没有发现重大问题，只有一个可访问性警告。该项目于 12 月通过了 Play 商店的所有要求。我是内部应用测试列表中的唯一用户，当我尝试通过内部应用测试链接在 Android 上安装时收到一条错误消息。当我将鼠标悬停在项目旁边的信息符号上时，我会弹出这个：

只有测试人员可以在 Google Play 上查看此列表，因为您尚未将任何 APK 上传到正式版。

但是，我在 2019 年 12 月 17 日发布了一个 APK 进行内部测试。

当我点击在 Google Play 上查看链接时，我被带到一个 URL not found 页面，其中包含以下文本：

很抱歉，在此服务器上找不到请求的 URL。

当我使用内部测试链接在我的手机上的 Play 商店中下载应用程序时，我会看到一个页面，其中包含应用程序徽标、标题和开发者名称，以及下载按钮上的价格。当我单击按钮时，我收到一条错误消息：

错误 找不到您尝试购买的项目。

我已经查看了此线程上的建议，但仍有问题。任何建议表示赞赏！

语境

作为渐进式 Web 应用程序提供的游戏，它具有计时器 ( setTimeout, setInterval) 和 websocket 连接以获得实时通信。

怎么了

只要用户留在应用程序中，一切都很好。但是当用户转到另一个选项卡、另一个应用程序或关闭屏幕（在移动设备的情况下）时，它就变成了一个“地狱般的未知世界”。

• Websockets 可能会也可能不会“暂停”或“关闭”
• 计时器看起来像是受到了限制或去抖动。

这种行为似乎取决于浏览器和平台，甚至可能取决于特定的用户行为。我猜浏览器和操作系统有自己的生命周期/机制来节省电池和/或计算。

当用户回来时，应用程序处于未知状态，我正在努力正确恢复状态。

关于 websockets 我有与socket.io和reconnecting-websocket 的自动重新连接，但这还不足以解决所有问题。

寻找答案

• 不同浏览器的“生命周期”是什么？这是记录在案吗？他们什么时候决定关闭和油门？
• 他们对 websockets 做了什么？浏览器只是断开它们？
• 他们究竟对计时器做了什么？他们扼杀他们或消除他们或其他什么？
• javascript 执行一般会发生什么？暂停/销毁/节流？
• 当它要关闭时，有没有办法挂钩某种浏览器生命周期事件？我唯一能找到的可能是可见性 API

• 有没有办法人为地重现这种行为以测试解决方案？在桌面上尤其困难。Websockets 无法关闭，并且 Chrome 开发人员似乎并不急于解决 2014 年的问题（！）：使用连接限制时不包括 websockets

• 不管上述情况，是否有实用的跨浏览器解决方案来检测/解决此问题？（例如，根据经验，与 Chrome 相比，桌面版 Firefox 的行为似乎完全不同，iPhone 断开连接的频率远高于 Android）

相关链接

• Safari 在页面未聚焦时由于不活动而丢弃 Web 套接字连接

• 我在手机的主屏幕上安装了"Progressive Web App".

• 在Facebook上的Javascript SDK它尝试使用一个登录对话框弹出窗口window.open.

• 这导致在Chrome中打开about:blank标签,从不加载,并且永远不会将用户重定向回Web应用程序.

有没有人对这个问题有任何建议或经验？我想,既然这些"Homescreen应用程序"相当新,那么这可能不是一个众所周知的问题.

嘿我正在尝试编程我的第一个pwa并遇到以下问题:

当我启动我的网络应用程序时,我收到以下错误:

无法安装站点:未检测到匹配的服务工作者.您可能需要重新加载页面,或检查当前页面的服务工作者是否也控制清单中的起始URL

我认为我的清单网址是正确的,因为这个链接

的manifest.json

"start_url": ".",
"display": "standalone",
"orientation": "portrait",
"theme_color": "#29BDBB",
"background_color": "#29BDBB"

我像这样注册我的sw:

if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('./sw.js').then(function(reg) {
    console.log('Successfully registered service worker', reg);
}).catch(function(err) {
    console.warn('Error whilst registering service worker', err);
});
}

我从这里得到了我的sw

所以我想创建一个简单的Web应用程序,我可以使用firebase托管.

有什么问题？谢谢你的帮助

正在玩渐进的网络应用程序.我试图让网络应用程序安装横幅工作,但我service worker does not successfully serve the manifest's start_url在使用Lighthouse调试后继续收到(下图).目前我正在使用azure托管我的网站.

新: 我检查了所有缓存,start_url,以及我的服务工作者,看看一切都匹配.但它仍然给我同样的错误.

我不确定这是start_url我的service-worker问题还是我的问题.以下是我的代码.

manifest.json

  {
   "short_name": "MY EXPERTS",
   "name": "MYEXPERT",
   "icons": [
    {
      "src": "Images/petronas_logo_192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "Images/petronas_logo_192.png",
      "type": "image/png",
      "sizes": "512x512"
    }
 ],

 "background_color": "#FFFFFF",
 "theme_color": "#67BCFF",
 "display": "standalone",
 "start_url": "/Home/Index"
}

AddServiceWorker.js

if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js').
    then(function (registration) {
        // Registration was successful``
        console.log('ServiceWorker registration successful with scope: ', 
registration.scope);
    }).catch(function (err) {
        // registration failed …

我正在AWS Cloud9中开发PWA,但它不允许在链接标记中包含/引用我的manifest.json.它在开发工具中说"VFS Connection不存在",好像它找不到清单,因为它在应用程序的外部.我在控制台中收到499错误.如果我停止节点http-server并重新加载预览页面,这就是我得到的相同消息,因为它没有在端口8080上提供.它可以在链接标签中找到CSS文件就好了(在同一个文件夹中) ),它是因为它是rel = manifest,还是出于安全原因或其他原因不允许包含json文件？有谁知道为什么这个文件不起作用？

<link rel="manifest" href="manifest.json" />

只有当我打开chrome时,我才会看到Chrome网页上的推送通知.我知道这个通知是通过服务工作者发送的.我想知道即使浏览器关闭或仅在打开chrome时这个后台同步是否继续,这些服务工作者同步过程才开始并开始发送推送通知.

在编写Progressive Web App(PWA)时,我正试图在我的head部分处理元数据html.通过元数据,我的意思是:

• title&descriptionmeta标签
• Atom供稿链接URL元标记
• OpenSearch元标记
• Google结构化数据
• Facebook OpenGraph
• Twitter卡片

单页App Shell

上面的所有元数据对于应用中的每个页面都是不同的.使用单个html应用程序shell将丢失以上所有内容.可能有一些迹象表明我在这里错了,搜索引擎现在执行JavaScript.如果是这样,这是如何工作的？我会在每次客户端导航时使用AJAX检索HTML头吗？这适用于所有搜索引擎吗？有什么缺点？

服务器端渲染

使用此选项,每个页面都在服务器上呈现,并具有自己的自定义head元数据.您可以使用"网络优先"或"最快速率"缓存策略.这种方法的缺点是你会失去一些性能,因为你的app shell没有缓存在客户端,也没有立即加载,让用户可以立即查看.

题？

两种选择似乎都相互对立.您可以拥有性能或良好的元数据,以提升您的SEO和页面共享体验.什么是快乐的中间地带？这两种世界的方法都是最好的吗？

更新

我从谷歌灯塔项目中发现了这个相关的GitHub问题.

我正在尝试在渐进式Web应用程序上创建“添加到主屏幕”按钮，如Chrome文档中所述。

我通常遵循规定的模式，其中有一些隐藏按钮，当Chrome beforeinstallprompt事件触发时会显示该按钮。触发事件后，我将捕获该事件，然后单击我自己的安装按钮后，使用该事件开始本机安装对话框。示例代码如下：

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can add to home screen
  btnAdd.style.display = 'block';
});

btnAdd.addEventListener('click', (e) => {
  // hide our user interface that shows our A2HS button
  btnAdd.style.display = 'none';
  // Show the prompt
  deferredPrompt.prompt();
  // Wait for the user …

我用 React js 构建了我的第一个渐进式 Web 应用程序(PWA)。当我在 DevTools 中的 Chrome 审核选项卡上单击“生成报告”时，它显示消息“灯塔正在预热”。

我的chrome版本是81。

我可以做什么来生成报告？