问：Service Worker 在浏览器中工作，但不能作为 PWA答案

【问题标题】：Q: Service Worker works in browser but not as PWA问：Service Worker 在浏览器中工作，但不能作为 PWA
【发布时间】：2018-09-13 12:10:48
【问题描述】：

我正在开发我的第一个 PWA，并从头开始。当我在 Chrome 中启动它时，它可以正常工作并缓存所有静态文件，当我离线时它仍然可以工作。我的问题是当我下载 pwa 然后离线时，由于某种原因它没有缓存它。我真的找不到解决方案，所以我尝试从这里获得一些见解。

这是我的代码：

const CACHE_NAME = 'static_cache_v1'
const staticAssets = [
    './',
    './style.css',
    './main.js'
];
self.addEventListener('install', async event => {
    const cache = await caches.open(CACHE_NAME);
    cache.addAll(staticAssets);
});
self.addEventListener('fetch', async event => {
    const req = event.request;
    event.respondWith(cacheFirst(req));
});
async function cacheFirst(req) {
    const cachedResponse = await caches.match(req);
    return cachedResponse || fetch(req);
}
self.addEventListener('activate', async event => {

});

您可以在此处查看我的示例： pwa

【问题讨论】：

您好，您的问题对我来说不是很清楚，无法理解，请您详细说明
您好 Aji，我的问题是我的代码中缺少什么以使其在移动设备上作为 PWA 和浏览器离线工作，而不仅仅是浏览器。安装在我的手机上时好像没有缓存。
它在 Desktop 中工作正常吗，您是否尝试添加 PWA 并安装到 desktopn 并尝试离线

标签： javascript android google-chrome progressive-web-apps

【解决方案1】：

试试这个代码，我已经实施并且工作正常

确保您添加的 Service Worker 位于根路径中
确保您的应用程序是 https （本地主机也可以正常工作），没有 http 站点将具有 Service Worker 功能

var cacheName = 'bemna-LAstLAP-2013';


self.addEventListener('install', function (event) {
    event.waitUntil(
        caches.open('v1').then(function (cache) {
            return cache.addAll([
                '/',
               // all file which you need to cache at start - static caching 
            ]);
        })
    );
});

// To delete the old chache if name changed it will delete old chache 
self.addEventListener('activate', (event) => {
    console.info('Event: Activate');
    event.waitUntil(
        caches.keys().then((cacheNames) => {
            return Promise.all(
                cacheNames.map((cache) => {
                    if (cache !== cacheName) {
                        return caches.delete(cache);
                    }
                })
            );
        })
    );
});

self.addEventListener('fetch', function (event) {
                event.respondWith(
                    // Cache first approch 
                    caches.open(cacheName).then(function (cache) {
                        return cache.match(event.request).then(function (response) {
                            return response || fetch(event.request).then(function (response) {
                                cache.put(event.request, response.clone());
                                return response;
                            });
                        });
                    })
                );

});

self.addEventListener('sync', function (event) {
    if (event.tag == 'myFirstSync') {
        console.log("synching")

    }
    console.log("test");
});

现在在应用程序中设置manifest文件，设置manifest时请交叉检查Scope和start_url是否正确
Destop PWA 安装将支持（版本 69.0.3497.92（官方构建）（64 位）我在此尝试过

{
    "short_name": "Chat",
    "name": "Chat App",
    "icons": [
      {
        "src": "images/web_application.png",
        "type": "image/png",
        "sizes": "192x192"
      },
      {
        "src": "images/web_application.png",
        "type": "image/png",
        "sizes": "512x512"
      }
    ],
    "start_url": "./#comments",
    "background_color": "#3367D6",
    "display": "standalone",
    "scope": "/",
    "theme_color": "#3367D6"
  }

设置清单以获取安装选项横幅后，您必须在 chrome 中启用一些功能。

在 chrome 中打开一个新标签并在浏览器中输入 chrome://flags/
搜索 Desktop PWAs 和 App Banners 并同时启用
启用后重新启动浏览器并刷新页面
如果您没有看到选项面板（最右侧的 3 个点），您会在顶部看到一条横幅，要求将应用程序安装到桌面，您可以看到安装网站的选项。

现在就是这样，您的应用程序将有一个图标来启动，它将作为本机/桌面应用程序工作

希望这对你有用。

【讨论】：