Service Worker i manifest oraz różne przeglądarki problem

Question

Siema,

chcę podpiąć service worker'a i manifest.json pod swoją aplikację, żeby to było PWA.

1. Zaczynając od manifest.json:

{
    "name": "name",
    "short_name": "nameee",
    "icons": [{
      "src": "img/pwa/thumbnail.png",
      "sizes": "192x192",
      "type": "image/png"
    },

    {
      "src": "img/pwa/thumbnail-big.png",
      "sizes": "512x512",
      "type": "image/png"
    }],

    "theme_color": "rgb(10, 121, 201)",
    "background_color": "rgb(10, 121, 201)",
    "display": "standalone"
}

Tu jest spoko, bo wszystko działa, pobrałem sobie na androida na telefon i jest super , tylko jedynym problemem jest zdjęcie, włączam aplikację i później jest taka sekunda takiego ekranu ,,startowego" (każda aplikacja praktycznie to ma) i tu też mam tą samą ikonę co na pulpicie, tylko ona jest dla mnie za mała (prawdopodobnie ma rozmiary 192x192 , a ja bym chciał tą 512x512), jak to zrobić, żeby ta na pulpicie była mała, a kolejna robiła się większa?

 

2. Teraz service worker:

const CACHE_NAME = 'Your cache';

let filesToCache = [
    '/*'
];


self.addEventListener('install', function (evt) {
    evt.waitUntil(
        caches.open(CACHE_NAME).then(function (cache) {
            return cache.addAll(filesToCache);
        }).catch(function (err) {
        })
    );
});

self.addEventListener('fetch', function (evt) {
    evt.respondWith(
        fetch(evt.request).catch(function () {
            return caches.match(evt.request);
        })
    );
});

 

const PATH = '/service-worker.js';

                    let isServiceWorkersSupport = ('serviceWorker' in navigator);

                    if (isServiceWorkersSupport) {
                        navigator.serviceWorker.register(PATH).then(function () {
                        }).catch(function (err) {
                        });
                    }

Zrobiłem to tak: mam dwa pliki service-worker.js (kod:1) i service-worker-main.js (kod:2), oba są w folderze głównym, a service-worker-main.js jest podpięty do wszystkich plików html. Chcę, żeby pobierało do cacha całą aplikacje, wszystkie pliki , style, zdjęcia itp. bo wszystko jest potrzebne jakby nie patrząc(poniżej 0,5mb wszystko). Jednak to mi nie działa w trybie offline i w tym jest problem.

 

3. Trzecim problemem jest to, że mam aplikację i w Mozilli włączam sobie tryb mobile np. 360px szerokość i wszystko jest idealnie co do pixela jak powinno w Mozilli (Bootstrap tam użyłem) i teraz włączam sobie to samo i taką samą szerokość i tak kompletnie rozjechane wszystko. Da się to jakoś szybko zmienić czy muszę wszystko jakoś kombinować? 

+ Jaka waszym zdaniem powinna być główna przeglądarka do poglądu mobile i dlaczego?

 

Z góry dziękuję za odwiedzi pod tym tematem.

Answer 1

@refresh