创建渐进式 Web 应用程序答案

【问题标题】：Creating Progressive Web application创建渐进式 Web 应用程序
【发布时间】：2018-12-23 22:14:19
【问题描述】：

我按照此链接中的视频https://www.youtube.com/watch?v=gcx-3qi7t7c 构建了一个简单的应用程序。但是当我访问应用程序时，它看起来不像 pwa，保存后它在应用程序图标上方显示 chrome 图标，保存时询问图标的尺寸。所以我有点困惑我错过了什么。看起来 Flipkart lite 不起作用。

当它被部署到 firebase 时，它就像 Flipkart light 一样工作，但不能在本地服务器上，如 tomcat 或 nginx。

需要一些帮助来确定我缺少什么...

manifest.json

{
    "name": "Progressive Web Application",
    "short_name": "PWA",
    "theme_color": "#000000",
    "background_color": "#80bde4",
    "display": "standalone",
    "start_url": "/",
    "icons": [
        {
            "src": "images/icons/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "images/icons/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

service-worker.js

const staticAssets = [
    '/',
    '/style.css',
    '/app.js'
]
self.addEventListener('beforeinstallprompt', e => {
    e.preventDefault();
  deferredPrompt = e;
  // Update UI notify the user they can add to home screen
    btnAdd.style.display = 'block';
})
self.addEventListener('install', async e => {
    console.log('Install...');
    const cacheData = await caches.open('PWA Application');
    cacheData.addAll(staticAssets);
});
self.addEventListener('fetch', event => {
    console.log('Fetch.....');
    const req = event.request;
    event.respondWith(cacheFirst(req));
});

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

我已在 HTML 中链接清单，如下所示

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

并使用下面的 app.js 从 app.js 调用服务工作者

if ('serviceWorker' in navigator) {
        try {
            navigator.serviceWorker.register('service-worker.js');
            console.log("SW Registered");
        } catch (error) {
            console.log("SW reg failed");
        }
    }

我注意到下面的事情： 1.应用程序图标上方的Chrome图标（保存到主页后） 2. 删除时我得到删除（但 Flipkart 得到卸载）

【问题讨论】：

您需要特别说明您的应用程序中缺少哪些内容，对于一个基本应用程序，您需要做两件事，创建清单文件和注册服务工作者。您可以在开发者工具的应用程序选项卡中查看状态。
@asifsaho 我添加了清单和服务工作者代码。并且还提到了我在申请中注意到的内容。

标签： javascript user-interface user-experience pwa

【解决方案1】：

部署在 firebase 上，工作正常。假设服务器有一些将 PWA 转换为 Web 应用程序的库。

【讨论】：