iPhone/iPad端PWA文件缓存问题及解决思路问询

我开发了一款可在Android和iOS运行的Progressive Web App（PWA），需支持离线运行——这是PWA借助Service Worker实现的核心优势之一，但在苹果设备上遇到问题：新用户首次将应用「安装」到iPhone/iPad后，无法立即离线使用，必须先联网打开一次才能离线运行。

推测原因是Service Worker并非在「安装」时创建缓存，而是仅在应用打开时执行。我了解苹果对PWA的支持远不及谷歌，猜测iOS未执行self.addEventListener("install", (e) => {逻辑——iOS并非真正「安装」应用，仅在主屏幕创建快捷方式。

当前使用的Service Worker代码 #

const cacheName = 'v0.54';
const contentToCache = [
    'index.html',
    'before.html',
    'scoring.html',
    'check.html',
    'correction.html',
    'after.html',
    'help.html',
    'register.js',
    'manifest.json',
    'css/style.min.css',
    'css/ace-responsive-menu.min.css',
    '/js/ace-responsive-menu.min.js',
    '/js/jquery.js',
    '/fonts/Merriweather-Regular.woff',
    '/fonts/Merriweather-Bold.woff',
    '/images/bike.png',
    '/images/littlehotels.png',
    '/images/share.svg',
    '/fav/apple-touch-icon.png',
    '/fav/browserconfig.xml',
    '/fav/favicon-32x32.png',
    '/fav/favicon-16x16.png',
    '/fav/favicon.ico',
    '/fav/safari-pinned-tab.svg',
    '/fav/maskable_icon.png',
    '/fav/android-chrome-192x192.png',
    '/fav/android-chrome-512x512.png'
];


/* Start the service worker and cache all of the app's content */
self.addEventListener("install", (e) => {
    console.log("[Service Worker] Install");
    e.waitUntil(
    (async () => {
        const cache = await caches.open(cacheName);
        console.log("[Service Worker] Caching all: app shell and content");
        await cache.addAll(contentToCache);
    })()
    );
});

/* Clear any old caches */
self.addEventListener("activate", (e) => {
    e.waitUntil(
    caches.keys().then((keyList) => {
        return Promise.all(
        keyList.map((key) => {
            if (key === cacheName) {
                return;
            }
            return caches.delete(key);
        })
        );
    })
    );
});

/* Serve cached content when offline */
self.addEventListener("fetch", (e) => {
    e.respondWith(
    (async () => {
        const r = await caches.match(e.request);
        console.log(`[Service Worker] Fetching resource: ${e.request.url}`);
        if (r) {
            return r;
        }
        const response = await fetch(e.request);
        const cache = await caches.open(cacheName);
        console.log(`[Service Worker] Caching new resource: ${e.request.url}`);
        cache.put(e.request, response.clone());
        return response;
    })()
    );
});

尝试的WebShare API方案 #

我曾尝试用WebShare API在苹果设备实现添加至主屏幕功能，在页面添加按钮并编写如下实验性代码，原本希望借此触发缓存逻辑，但未成功：

const shareButton = document.querySelector('.ios-prompt');
shareButton.addEventListener('click', event => {
    if (navigator.share) {
        navigator.share({
            title: 'Trial Observer Scoresheet',
            url: 'https://mototrial.co.uk/observer/'
        });
    } else {
        // fallback
    }
});

实际运行后，navigator.share虽能正常调用，但分享选项大幅减少，尤其缺少「添加至主屏幕」选项，无法达到预期效果。

核心疑问 #

是否有替代事件监听器或方案，能让iOS在用户将PWA添加至主屏幕时就生成缓存，而无需用户先联网打开一次应用？

内容的提问来源于stack exchange，提问作者TrapezeArtist