如何让“添加到主屏幕”横幅显示在我的 PWA 的移动浏览器上？答案

【问题标题】：How to get "add to homescreen" banner to display on mobile browsers for my PWA?如何让“添加到主屏幕”横幅显示在我的 PWA 的移动浏览器上？
【发布时间】：2018-04-15 15:30:37
【问题描述】：

我一直在尝试获得一个非常基本的 PWA，它可以与 api 一起工作。

虽然 PWA 在我的笔记本电脑上按预期工作（包括添加到主屏幕时离线工作）， 在移动设备上看不到安装/添加到主屏幕提示/横幅。

该应用程序也无法在移动设备上离线运行

这是服务工作者代码：

const cacheName = 'news';

const staticAssets = [
  './',
  './app.js',
  './styles.css',
  './fallback.json',
];

self.addEventListener('install', async function () {
  const cache = await caches.open(cacheName);
  cache.addAll(staticAssets);
});

self.addEventListener('activate', event => {
  event.waitUntil(self.clients.claim());
});

self.addEventListener('fetch', event => {
  const request = event.request;
  const url = new URL(request.url);
  if (url.origin === location.origin) {
    event.respondWith(cacheFirst(request));
  } else {
    event.respondWith(networkFirst(request));
  }
});

async function cacheFirst(request) {
  const cachedResponse = await caches.match(request);
  return cachedResponse || fetch(request);
}

async function networkFirst(request) {
  const dynamicCache = await caches.open('news-dynamic');
  try {
    const networkResponse = await fetch(request);
    dynamicCache.put(request, networkResponse.clone());
    return networkResponse;
  } catch (err) {
    const cachedResponse = await dynamicCache.match(request);
    return cachedResponse || await caches.match('./fallback.json');
  }
}

这是 manifest.json 文件：

{
  "name": "News",
  "short_name": "News",
  "theme_color": "#2196f3",
  "background_color": "#2196f3",
  "display": "standalone",
  "Scope": "/",
  "start_url": ".",
  "icons": [
    {
      "src": "images/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash_pages": null
}

知道如何让它在移动设备上按预期工作吗？

【问题讨论】：

您是否针对lighthouse 运行您的应用程序？
@adelura 当我审核 heroku 托管版本时，我收到审核错误：在跟踪中找不到 navigationStart。但是，当我在我的 xampp 上运行时，我没有看到这个错误
如果您的范围是“/”，为什么要列出以点开头的所有资产？为什么不把它排除在外？当然，这不应该有任何改变任何东西的理由，但你真的不需要那里的点。另外：在您的 manifest.json 中，使用小写 S 编写范围，如果您的 start_url 是索引，请使用“/”而不是“.”。

标签： javascript service-worker progressive-web-apps

【解决方案1】：

您可以在github forum 上关注此问题。建议的解决方案之一是禁用 Adblock。

确认，如果我告诉 Adblock 不要在页面上运行，它会起作用。

【讨论】：