Android PWA 如何处理清单和服务人员？

Question

我有一个网络应用程序，我想在 Android 上查看时通知用户下载。我使用 PWA Builder 构建了我的服务工作者和清单：https://www.pwabuilder.com/

我现在有一个清单文件，我只是将它上传到我的根目录吗？

清单：

{
    "dir": "ltr",
    "lang": "en",
    "name": "Seek Adventure",
    "scope": "/",
    "display": "browser",
    "start_url": "https://www.seekadventure.net/",
    "short_name": "SeekAdventure",
    "theme_color": "#ff8040",
    "description": "An #optoutside forum for anyone looking for help planning there next outdoor adventure or wants to share their adventures with others!",
    "orientation": "any",
    "background_color": "transparent",
    "related_applications": [],
    "prefer_related_applications": false,
    "icons": [
        {
            "src": "/images/assets/favicon-glzu44cb.png",
            "type": "image/png",
            "sizes": "64x64"
        },
        {
            "src": "/images/c52cd81f-b772-8db2-4964-5780e9748729.webPlatform.png",
            "sizes": "44x44",
            "type": "image/png"
        },
        {
            "src": "/images/3fd8d17f-4da0-000c-0914-88f09a62a071.webPlatform.png",
            "sizes": "48x48",
            "type": "image/png"
        },
        {
            "src": "/images/fdf7841f-c005-e322-4e41-d9b997beb0d2.webPlatform.png",
            "sizes": "1240x600",
            "type": "image/png"
        },
        {
            "src": "/images/1b53345e-9214-10f9-3b27-d9a11d1a6362.webPlatform.png",
            "sizes": "300x300",
            "type": "image/png"
        },
        {
            "src": "/images/dc7a39e4-e3ad-9489-5fe1-65f029c4f5a8.webPlatform.png",
            "sizes": "150x150",
            "type": "image/png"
        },
        {
            "src": "/images/934dcf12-e11d-2f60-17a4-cf7529240c69.webPlatform.png",
            "sizes": "88x88",
            "type": "image/png"
        },
        {
            "src": "/images/85b5b747-256b-049a-425b-f8d57c110834.webPlatform.png",
            "sizes": "24x24",
            "type": "image/png"
        },
        {
            "src": "/images/0f323aec-4450-d0c3-623c-f35c9edcdd08.webPlatform.png",
            "sizes": "50x50",
            "type": "image/png"
        },
        {
            "src": "/images/03236d66-5cdf-a8a6-73f9-ecfe05b08fcc.webPlatform.png",
            "sizes": "620x300",
            "type": "image/png"
        },
        {
            "src": "/images/2a1f7b69-0b45-32d9-ec15-a9ec2de16a35.webPlatform.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/images/5585e3aa-2696-082b-804b-f087d8923570.webPlatform.png",
            "sizes": "144x144",
            "type": "image/png"
        },
        {
            "src": "/images/c1943668-4dcf-fe5b-6ae4-a6ebc4f9f99b.webPlatform.png",
            "sizes": "96x96",
            "type": "image/png"
        },
        {
            "src": "/images/f37abd30-b572-4008-f307-8c0c674972ec.webPlatform.png",
            "sizes": "72x72",
            "type": "image/png"
        },
        {
            "src": "/images/737282cf-e911-bd86-39dc-87b45b7a3a5b.webPlatform.png",
            "sizes": "36x36",
            "type": "image/png"
        },
        {
            "src": "/images/dd79a596-ca4f-6a28-9c00-8b8038a8fa88.webPlatform.png",
            "sizes": "1024x1024",
            "type": "image/png"
        },
        {
            "src": "/images/3be7d34f-ba7b-ecb5-579d-467cacd866c4.webPlatform.png",
            "sizes": "180x180",
            "type": "image/png"
        },
        {
            "src": "/images/51578c8b-2898-5b6c-f935-21dea3f1cbf5.webPlatform.png",
            "sizes": "152x152",
            "type": "image/png"
        },
        {
            "src": "/images/535b042a-2502-3835-765b-923293ac8bbd.webPlatform.png",
            "sizes": "120x120",
            "type": "image/png"
        },
        {
            "src": "/images/f0ab6a28-2fdd-3ca9-6882-5d512562629d.webPlatform.png",
            "sizes": "76x76",
            "type": "image/png"
        }
    ]
}

它还在下面给了我几个 service worker 文件。

pwabuilder-sw.js：

//This is the "Offline page" service worker

//Install stage sets up the offline page in the cache and opens a new cache
self.addEventListener('install', function(event) {
  var offlinePage = new Request('offline.html');
  event.waitUntil(
    fetch(offlinePage).then(function(response) {
      return caches.open('pwabuilder-offline').then(function(cache) {
        console.log('[PWA Builder] Cached offline page during Install'+ response.url);
        return cache.put(offlinePage, response);
      });
  }));
});

//If any fetch fails, it will show the offline page.
//Maybe this should be limited to HTML documents?
self.addEventListener('fetch', function(event) {
  event.respondWith(
    fetch(event.request).catch(function(error) {
      console.error( '[PWA Builder] Network request Failed. Serving offline page ' + error );
      return caches.open('pwabuilder-offline').then(function(cache) {
        return cache.match('offline.html');
      });
    }
  ));
});

//This is a event that can be fired from your page to tell the SW to update the offline page
self.addEventListener('refreshOffline', function(response) {
  return caches.open('pwabuilder-offline').then(function(cache) {
    console.log('[PWA Builder] Offline page updated from refreshOffline event: '+ response.url);
    return cache.put(offlinePage, response);
  });
});

pwabuilder-sw-register.js:

//This is the "Offline page" service worker

//Add this below content to your HTML page, or add the js file to your page at the very top to register service worker
if (navigator.serviceWorker.controller) {
  console.log('[PWA Builder] active service worker found, no need to register')
} else {
  //Register the ServiceWorker
  navigator.serviceWorker.register('pwabuider-sw.js', {
    scope: './'
  }).then(function(reg) {
    console.log('Service worker has been registered for scope:'+ reg.scope);
  });
}

如果清单被上传到我的网络服务器的根目录，我是否也将这两个 javascript 文件上传到根目录？

如果是这样，我是否只需编辑我的 html 文件中的标题并包含这两行以指向 javascript 文件？

<script src="pwabuilder-sw.js"></script> 
<script src="pwabuilder-sw-register.js"></script> 

Answer 1

其实你可以把manifest放到根目录，在每个app页面展示，也可以只放到你想展示的路径。

关于最后一个问题，如果您需要将 .js 文件添加到服务器，请确保它们不在其他 .js 文件所在的位置。