PWA «Добавить на домашний экран» не работает на домашней странице и работает нормально на внутренних страницах

Question

Я реализую PWA в проекте MVC, он отлично работает на моих внутренних страницах, но не на домашней странице! Я могу предположить, что проблема в "start_url" в манифесте, но я не знаю, что с ним не так. Обратите внимание: на моей домашней странице / затем указана культура "ar | en | fr"

master.cshtml - Head

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

master.cshtml - Body

<script>
(function e() {
        "use strict";
        if ("serviceWorker" in navigator) {
            window.addEventListener("load", function () {
                navigator.serviceWorker.register("/sw.js").then(function (e) {
                    console.log("ServiceWorker registration successful with scope: ", e.scope);
                    e.onupdatefound = function () {
                        var t = e.installing;
                        t.onstatechange = function () {
                            switch (t.state) {
                                case "installed":
                                    if (navigator.serviceWorker.controller) {
                                        //console.log("new update available");
                                        location.reload(true)
                                    }
                                    break;
                                default:
                            }
                        }
                    }
                }).catch(function (e) {
                    console.log("ServiceWorker registration failed: ", e)
                })
            })
        }
    })();
</script>

sw.js

'use strict';

// Incrementing CACHE_VERSION will kick off the install event and force previously cached
// resources to be cached again.
const CACHE_VERSION = 1;
let CURRENT_CACHES = {
    offline: 'offline-v' + CACHE_VERSION
};
const OFFLINE_URL = 'offline.html';

function createCacheBustedRequest(url) {
    let request = new Request(url, { cache: 'reload' });

    if ('cache' in request) {
        return request;
    }

    let bustedUrl = new URL(url, self.location.href);
    bustedUrl.search += (bustedUrl.search ? '&' : '') + 'cachebust=' + Date.now();
    return new Request(bustedUrl);
}

self.addEventListener('install', event => {
    event.waitUntil(
        fetch(createCacheBustedRequest(OFFLINE_URL)).then(function (response) {
            return caches.open(CURRENT_CACHES.offline).then(function (cache) {
                return cache.put(OFFLINE_URL, response);
            });
        })
    );
});

self.addEventListener('activate', event => {
    let expectedCacheNames = Object.keys(CURRENT_CACHES).map(function (key) {
        return CURRENT_CACHES[key];
    });

    event.waitUntil(
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames.map(cacheName => {
                    if (expectedCacheNames.indexOf(cacheName) === -1) {
                        //console.log('Deleting out of date cache:', cacheName);
                        return caches.delete(cacheName);
                    }
                })
            );
        })
    );
});

self.addEventListener('fetch', event => {
    if (event.request.mode === 'navigate' ||
        (event.request.method === 'GET' &&
            event.request.headers.get('accept').includes('text/html'))) {
        //console.log('Handling fetch event for', event.request.url);
        event.respondWith(
            fetch(event.request).catch(error => {
                //console.log('Fetch failed; returning offline page instead.', error);
                return caches.match(OFFLINE_URL);
            })
        );
    }
});

manifest.webmanifest.json

{
  "lang": "en-US",
  "name": "app name",
  "scope": "./",
  "display": "standalone",
  "start_url": "/",
  "short_name": "app name",
  "theme_color": "#227194",
  "description": "This is pwa for app",
  "orientation": "any",
  "background_color": "#227194",
  "related_applications": [],
  "prefer_related_applications": false,
  "icons": [
    {
      "src": "/Assets/Images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },

    {
      "src": "/Assets/Images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "/Assets/Images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/Assets/Images/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/Assets/Images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    },

    {
      "src": "/Assets/Images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/Assets/Images/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/Assets/Images/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    }
  ]
}

Answer 1

Надеюсь, вы смогли решить вашу проблему.Существует средство проверки манифеста , которое можно использовать для проверки правильности формирования веб-манифеста.

Я также написал статью об установке PWA на экране пользователя,может быть, это все еще может быть полезно для вас или любого другого приземления здесь.