Oracle APEX离线页面开发：缓存同步首页数据及Service Worker使用求助

1. 开启APEX的Service Worker支持 #

进入应用构建器 → 目标应用 → 共享组件 → 应用属性 → 用户界面，找到Service Worker区域：

• 勾选「启用Service Worker」
• 设置缓存名称（比如apex-offline-cache-v1，后续更新缓存时修改版本号，触发浏览器重新缓存）

2. 自定义Service Worker脚本 #

APEX默认的Service Worker无法满足自定义缓存需求，需上传自定义脚本：

1. 进入共享组件 → 静态文件，上传名为sw.js的脚本文件
2. 脚本核心逻辑示例（按需修改路径和规则）：

const CACHE_NAME = 'apex-offline-cache-v1';
// 缓存首页、核心静态资源和数据接口
const INITIAL_CACHE = [
    '/f?p=你的应用ID:1:SESSION::NO:', // 替换为实际首页URL
    '/i/libraries/apex/minified/apex.min.js',
    '/i/themes/theme42/css/style.min.css',
    '/ords/你的应用别名/api/home-data' // 首页动态数据接口
];

// 安装阶段：缓存初始资源
self.addEventListener('install', (event) => {
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(cache => cache.addAll(INITIAL_CACHE))
            .then(() => self.skipWaiting()) // 强制激活新Service Worker
    );
});

// 激活阶段：清理旧版本缓存
self.addEventListener('activate', (event) => {
    event.waitUntil(
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames.filter(name => name !== CACHE_NAME)
                    .map(oldCache => caches.delete(oldCache))
            );
        }).then(() => self.clients.claim()) // 控制已打开的客户端
    );
});

// 请求拦截：实现"在线更新缓存，离线读取缓存"策略
self.addEventListener('fetch', (event) => {
    const requestUrl = new URL(event.request.url);
    
    // 忽略SESSION参数，避免每个会话缓存不同首页
    requestUrl.searchParams.delete('SESSION');
    const cacheKey = new Request(requestUrl.toString(), {
        method: event.request.method,
        headers: event.request.headers
    });

    event.respondWith(
        caches.match(cacheKey).then(cachedRes => {
            // 在线时优先请求网络，更新缓存；离线时返回缓存内容
            const networkFetch = fetch(event.request)
                .then(networkRes => {
                    caches.open(CACHE_NAME).then(cache => {
                        cache.put(cacheKey, networkRes.clone());
                    });
                    return networkRes;
                });
            return cachedRes || networkFetch;
        })
    );
});

3. 配置APEX使用自定义脚本 #

回到应用属性的Service Worker区域，在「Service Worker URL」中填写静态文件路径：

• 若上传到应用静态文件：#APP_IMAGES#sw.js
• 若上传到工作区静态文件：#WORKSPACE_IMAGES#sw.js

4. 适配动态首页数据 #

如果首页包含数据库动态内容：

• 确保动态数据通过AJAX接口返回（如上面示例中的/ords/你的应用别名/api/home-data）
• 将接口URL加入INITIAL_CACHE，并在fetch拦截逻辑中处理这类请求，保证离线时能读取缓存的JSON数据

5. 测试离线功能 #

1. 打开浏览器开发者工具 → 应用 → Service Workers
2. 勾选「离线」选项，刷新首页，验证页面和数据是否从缓存加载
3. 可通过Chrome Lighthouse工具的「离线可用性」检测功能，验证离线体验

注意事项 #

• Service Worker仅支持HTTPS环境，本地localhost开发不受限制
• 更新缓存时，修改CACHE_NAME的版本号（如v2），触发浏览器重新安装脚本
• 避免缓存过多资源，定期清理旧缓存；可在应用内添加更新提示，引导用户刷新页面激活新缓存

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