Question

我的PWA加载由head元素中的链接标签标识的匹配的iOS启动屏幕（通常做法）。因此，特定设备将始终仅使用这些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 头中提取：

<!-- 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">

PWA：仅加载所需的初始屏幕以实现更好的性能

0 个答案: