android - Android - PWA 无法在独立模式下与服务工作者一起打开

问题描述

在开发 Progressive-Web-App 时出现以下问题：

独立模式可以在不包括 service worker 的情况下完美运行 - 但不能使用。

如果没有 Service-Worker a2hs（添加到主屏幕），PWA 会在"standalone"-Mode 下正确启动。
添加 Service-Worker（a2hs + 已安装/Web-APK）后，PWA 在新 Chrome 窗口中打开新选项卡。

Chrome-PWA 审计：

login_mobile_tablet.jsf / 包括服务工作者：

<script>
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('../serviceWorker.js', {scope: "/application/"})
          /* also tried ".", "/", "./" as scope value */
            .then(function(registration) {
                console.log('Service worker registration successful, scope is: ', registration.scope);
            })
            .catch(function(error) {
                console.log('Service worker registration failed, error: ', error);
            });
    }
</script>

serviceWorker.js：

var cacheName = 'pwa-cache';

// A list of local resources we always want to be cached.
var filesToCache = [
    'QS1.xhtml',
    'pdf.xhtml',
    'QS1.jsf',
    'pdf.jsf',
    'login_pages/login_mobile_tablet.jsf',
    'login_pages/login_mobile_tablet.xhtml'
];

// The install handler takes care of precaching the resources we always need.
self.addEventListener('install', function(event) {

    event.waitUntil(
        caches.open(cacheName).then(function(cache) {
            return cache.addAll(filesToCache);
        })
    );
})

// The activate handler takes care of cleaning up old caches.
self.addEventListener('activate', event => {
    event.waitUntil(self.clients.claim());
});

// The fetch handler serves responses for same-origin resources from a cache.
self.addEventListener('fetch', event => {

    // Workaround for error:
    // TypeError: Failed to execute 'fetch' on 'ServiceWorkerGlobalScope': 'only-if-cached' can be set only with 'same-origin' mode
    // see: https://stackoverflow.com/questions/48463483/what-causes-a-failed-to-execute-fetch-on-serviceworkerglobalscope-only-if
    if (event.request.cache === 'only-if-cached' && event.request.mode !== 'same-origin')
        return;

    event.respondWith(
        caches.match(event.request, {ignoreSearch: true})
            .then(response => {
                return response || fetch(event.request);
            })
    );
});

清单.json：

{
   "name":"[Hidden]",
   "short_name":"[Hidden]",
   "start_url":"/application/login_pages/login_mobile_tablet.jsf",
   "scope":".",
   "display":"standalone",
   "background_color":"#4688B8",
   "theme_color":"#4688B8",
   "orientation":"landscape",
   "icons":[
      {
         "src":"javax.faces.resource/images/icons/qsc_128.png.jsf",
         "sizes":"128x128",
         "type":"image/png"
      },
      {
         "src":"javax.faces.resource/images/icons/qsc_144.png.jsf",
         "sizes":"144x144",
         "type":"image/png"
      },
      {
         "src":"javax.faces.resource/images/icons/qsc_152.png.jsf",
         "sizes":"152x152",
         "type":"image/png"
      },
      {
         "src":"javax.faces.resource/images/icons/qsc_192.png.jsf",
         "sizes":"192x192",
         "type":"image/png"
      },
      {
         "src":"javax.faces.resource/images/icons/qsc_256.png.jsf",
         "sizes":"256x256",
         "type":"image/png"
      },
      {
         "src":"javax.faces.resource/images/icons/qsc_512.png.jsf",
         "sizes":"512x512",
         "type":"image/png"
      }
   ]
}

考虑了以下问题/答案 - 但没有找到解决方案：

标签： androidgoogle-chromeservice-workerprogressive-web-appsmanifest.json

技术背景
在您添加 Service-Worker（以及所有其他 PWA 要求）的那一刻，您的应用程序被创建为真正的 PWA - 安装了 Web-APK。因此，您还需要使用 Default-HTTPS-Port 443 - 确保使用有效的 HTTPS 证书。
在添加 Service-Worker 之前，缺少此强制性要求，因此您的 PWA 未安装，因此需要较少的其他要求显示在"standalone-mode".
遗憾的是，这在任何地方都没有记录……我们不得不自己“找出来”。

“可安装的 Web-APK”的强制性要求短名单：（
由于我们找不到完整的列表，我尝试包括所有点）

注册服务工作者（像你这样的默认实现就足够了）
manifest.json （你的有效）
带有有效证书的 https
https 默认端口（443，例如https://yourdomain.com/test/）
...其余的只需检查 chrome 审核工具（提示：您不需要通过所有要求 - 您的 web-apk 应该在切换到 https-default-port 时工作）

android - Android - PWA 无法在独立模式下与服务工作者一起打开

问题描述

解决方案

推荐阅读