代码之家 › 专栏 › 技术社区 › David

PWA不会在android上以独立模式打开

manifest.json progressive-web-apps google-chrome android

David · 技术社区 · 8 年前

我正在尝试在最新的Chrome&上实现添加到主屏幕;Android(7)。我在清单文件中指定了“standalone”,但应用程序仅在浏览器中打开。我以前在同一台设备上获得过想要的行为,但似乎无法重现。

this question . 我遵循了建议的解决方案-使用Lighthouse验证PWA属性-但即使有完美的100 Lighthouse分数,我仍然无法让应用程序以独立模式打开。

有什么想法吗?

我的代码供参考(也在 GitHub & hosted on GitHub Pages ):

指数html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>A2HS Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#0077c2"/>
    <link rel="manifest" href="manifest.json">
  </head>
  <body>
    <p>Add To Home Screen</p>
    <script>
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('sw.js')
        .then(reg => console.log('Registration success. Scope is ', reg.scope))
        .catch(err => console.log('Registration failed. ', err));
      }
    </script>
  </body>
</html>

const cacheName = 'a2hs-test';
const resourcesToCache = [
  'index.html',
  'manifest.json',
  'icons/icon-512.png',
  'icons/icon-256.png',
  'icons/icon-96.png',
];

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(cacheName).then(function(cache) {
      return cache.addAll(resourcesToCache);
    })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});

显示json

{
  "short_name": "A2HS",
  "name": "Add To Home Screen",
  "theme_color": "#0077c2",
  "background_color": "#42a5f5",
  "start_url": "index.html",
  "display": "standalone",
  "icons": [
    {
      "src": "icons/icon-96.png",
      "sizes": "96x96"
    },
    {
      "src": "icons/icon-256.png",
      "sizes": "256x256"
    },
    {
      "src": "icons/icon-512.png",
      "sizes": "512x512"
    }
  ]
}

编辑:

我在v63上再次遇到了类似的问题;Canary v66,使用localhost似乎也导致了同样的问题-无法在独立模式下启动。托管完全相同的代码并访问HTTPS站点允许我独立启动。

2 回复 | 直到 8 年前

David 8 年前

根据评论,这似乎只是Chrome63+中修复的一个bug。

编辑:

请参阅上面的编辑-通过HTTPS托管也为我在v63和Canary v66上解决了相同的问题。Localhost可能不足以允许应用以独立模式启动。

Shnigi 8 年前

我发现的一个解决方案是使用远程设备下开发人员工具的代理。您必须使用USB电缆连接设备并代理应用程序,这样您也可以使用localhost。

推荐文章

somnathchakrabarti · 从Kotlin 2.0开始,启用Compose时需要Compose编译器Gradle插件

1 年前

Para1life · 解组时找不到类:com.google.firebase。时间戳,

1 年前

Murilo · Jetpack编写导航栏项目图标

1 年前

Santhosh Kumar · 当应用程序在Android 15 Pixel 9中重新启动时,Room DB被破坏

1 年前

KolaYAndr · 活动RESULT_OK似乎从未发生过

1 年前

Rashid Bilal · 主题更改时Android应用程序区域设置更改回英语

1 年前

Ruben P. Grady · 每种架构都有单独的构建,但生成的APK文件是相同的吗?

1 年前

psycho_pat · Android应用程序中的权限

1 年前

FarazFiroz · 如何将argb转换为描述性文本颜色

1 年前

Daniel · Unity Android游戏支持的设备数量太少

1 年前