PWA: загрузить только необходимый экран заставки для лучшей производительности - PullRequest
Новая
       38

PWA: загрузить только необходимый экран заставки для лучшей производительности

0 голосов
/ 17 мая 2019

My PWA загружает соответствующий заставочный экран iOS, идентифицируемый тегами ссылки в элементе head (обычная практика).Следовательно, определенное устройство всегда будет использовать только один из этих файлов PNG.

Но мой serviceWorker кэширует все изображения в папке изображений, независимо от размера экрана.

sw.js : 

const staticAssets = [
    './',
    './styles.css',
    './app.js',
    './images',
    './fallback.json',
    './images/system/offline.png',
    'sw.js'
]

self.addEventListener('install', async event => {
    const cache = await caches.open('static-assets');
    cache.addAll(staticAssets);
});

Как я могу сказать своему сервисному работнику кэшировать только требуемый заставочный экран или нет, если телефон Android и т. д. сохраняет PWA?

извлечение из index.html head: 

<!-- iPhone Xs Max                              (1242px x 2688px) --> 
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)" href="images/splash/apple-launch-1242x2688.png"> 
<!-- iPhone Xr                                  (828px x 1792px) --> 
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" href="images/splash/apple-launch-828x1792.png"> 
<!-- iPhone X, Xs                               (1125px x 2436px) --> 
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" href="images/splash/apple-launch-1125x2436.png"> 
<!-- iPhone 8 Plus, 7 Plus, 6s Plus, 6 Plus     (1242px x 2208px) --> 
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3)" href="images/splash/apple-launch-1242x2208.png"> 
<!-- iPhone 8, 7, 6s, 6                         (750px x 1334px) --> 
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="images/splash/apple-launch-750x1334.png">  
<!-- iPhone 5s, SE                              (640px x 1136px)-->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="images/splash/apple-launch-640x1136.png">
<!-- iPad Pro 12.9"                             (2048px x 2732px) --> 
<link rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" href="images/splash/apple-launch-2048x2732.png"> 
<!-- iPad Pro 11”                               (1668px x 2388px) --> 
<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)" href="images/splash/apple-launch-1668x2388.png"> 
<!-- iPad Pro 10.5"                             (1668px x 2224px) --> 
<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" href="images/splash/apple-launch-1668x2224.png"> 
<!-- iPad Mini, Air                             (1536px x 2048px) --> 
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" href="images/splash/apple-launch-1536x2048.png">
...