Question

我关注了此链接https://www.youtube.com/watch?v=gcx-3qi7t7c中的视频，并构建了一个简单的应用程序。但是当我访问该应用程序时，它看起来不像pwa，保存后在应用程序图标上方显示chrome图标，保存时询问图标的尺寸。所以我很困惑我是否错过了一些东西。看起来不像Flipkart lite那样。

当它部署到Firebase而不是tomcat或nginx等本地服务器上时，它就像Flipkart灯一样。

需要一些帮助来识别我所缺少的东西...

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调用服务工作者

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会被卸载）

Answer 1

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

创建渐进式Web应用程序

1 个答案: