个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-03 10:35:26 25 4
gpt4 key购买 nike

我正在尝试在最新的 Chrome 和 Android (7) 上实现“添加到主屏幕”。我在 list 文件中指定了“独立”，但该应用程序仅在浏览器中打开。我之前在同一台设备上获得了所需的行为，但似乎无法重现它。

我看到有人在 this question 中遇到过类似的问题.我遵循了建议的解决方案——使用 Lighthouse 验证 PWA 属性——但即使 Lighthouse 得分达到完美的 100，我仍然无法让应用程序以独立模式打开。

有什么想法吗？

我的引用代码(也在 GitHub & hosted on GitHub Pages 上):

Index.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>

sw.js

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);
    })
  );
});

list .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 站点使我能够独立启动。

最佳答案

根据评论，这似乎只是一个已在 Chrome 63+ 中修复的错误。

编辑:

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

关于android - PWA 不会在 android 上以独立模式打开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46941802/

25 4 0
文章推荐： android - 我的应用程序自行重启，日志显示 ChimeraModuleLdr : Module config changed, 由于模块而强制重启
文章推荐： c# - Windows 手机 8 : C# XAML how to detect shape collisions
文章推荐： java - getObject(index, Long) 为 null 返回 0
文章推荐： C++:为什么我的结构 vector 充当一个结构？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com