多页 PWA 离线答案

【问题标题】：multi pages PWA offline多页 PWA 离线
【发布时间】：2020-06-19 13:37:38
【问题描述】：

我在不同的文件夹中缓存了 2 个网页来制作 PWA，（它们是链接页面）但是当我离线工作时，它只加载了第一个页面。编码页面、manifest 和 service worker 如下：

Page A => 这是应用的主页面：

<head>
<link rel="manifest" href="/Folder1/manifest.json">
</head>
<body>
    <script>
        if('serviceWorker' in navigator){
            try{
                navigator.serviceWorker.register('sw.js').then(function(reg) {
                console.log("SW registered for scope: " + reg.scope);
                });
            } catch ( error ) {
                console.log('SW reg failed');
            }
        }
    </script>
    <a href="../Folder2/Page B">Page B</a><br>
</body>

Page B => 这是不同文件夹中的子页面，但不是唯一的：

<head>
<link rel="manifest" href="../Folder1/manifest.json">
</head>
<body>
    <script>
        if('serviceWorker' in navigator){
            try{
                navigator.serviceWorker.register('../Folder1/sw.js');
                console.log('SW registered2');
            } catch ( error ) {
                console.log('SW reg failed2');
            }
        }
    </script>
    <h1>Content</h1>
</body>

清单文件 => 位于页面 A 文件夹中：

{
  "name": "Web Outline Work",
  "short_name": "WOW",
  "theme_color": "#2196f3",
  "background_color": "#2196f3",
  "display": "standalone",
  "scope": "/",
  "start_url": ".",
  "icons": [
    {
      "src": "images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash_pages": null
}

剂量范围是什么意思，我应该在其中添加什么？

Service Worker File => 位于清单文件中

const cachedData = [
    './',
    '../Folder2/Page B'
];


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

self.addEventListener('fetch', event => {
    const req = event.request;
    const url = new URL(req.url);
    if(url.origin === location.origin){
        event.respondWith(cacheFirest(req));
    } else {
        event.respondWith(networkFirest(req));
    }

});

async function cacheFirest(req){
    const cacheResp = await caches.match(req);
    return cacheResp || fetch(req);
}

async function networkFirest(req){
    const cache = await caches.open('app-dynamic');
    try{
        const res = await fetch(req);
        cache.put(req, res.clone());
        return res;
    } catch ( error ) {
        return await cache.match(req);
    }
}

【问题讨论】：

您是否尝试返回范围？ "scope": "../",
@Ifaruki 是的，仍然无法在离线状态下从缓存中加载页面 b
我正在开发一个小型库，可以帮助人们构建 pwa。 github.com/ilijanovic/serviceHelper/blob/master/…。它目前没有那么多功能。它注册了您的软件，您可以执行installApp 方法以显示提示并收听notinstalled 如果未安装。订阅推送 nessages 等功能即将推出，如果您愿意，可以评价一下
@ifaruki 我会检查它，有没有办法回调缓存页面并从缓存中离线打开它？（确定不是原始页面=>页面a）
@maxischl 嗨，我阅读了您对 PWA stackoverflow.com/questions/56171281/… 的评论，我在缓存中添加了 sw.js，但仍然没有在离线状态下在移动设备上打开，您能帮忙吗？代码在那里

标签： javascript html progressive-web-apps

【解决方案1】：

您的范围需要包含这两个文件夹。看看这个article

范围属性可以是相对路径 (../) 或任何更高级别路径（/），这将允许增加导航的覆盖范围在您的网络应用中。

希望这会有所帮助！

【讨论】：