Android-PWA无法在Service Worker的独立模式下打开 [英] Android - PWA does not open in standalone mode with service worker
问题描述
在开发Progressive-Web-App时出现以下问题:
While developing a Progressive-Web-App the following Problem occurred:
独立模式可以在不包括服务工作者的情况下完美运行-但不能使用.
- 没有Service-Worker a2hs(已添加到主屏幕),PWA可以在
"standalone"
-模式下正确启动. - 添加Service-Worker(已安装a2hs +/Web-APK)后,PWA在新的Chrome窗口中打开新的标签页.
- Without Service-Worker a2hs (added to Homescreen) PWA gets correctly started in
"standalone"
-Mode. - After adding the Service-Worker (a2hs + installed / Web-APK) PWA opens new Tab in new Chrome-Window.
Chrome-PWA-Audit:
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);
})
);
});
manifest.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"
}
]
}
考虑了以下问题/答案-但未找到解决方案:
The following questions / answers were considered - but no solution was found:
- PWA将无法在Android上以独立模式打开
- > WebAPK会忽略display:standalone标志以运行PWA在本地网络上
- 部署在PWA中在Android和iOS上以独立模式运行的node.js
- PWA wont open in standalone mode on android
- WebAPK ignores display:standalone flag for PWA running on local network
- PWA deployed in node.js running in Standalone mode on Android and iOS
推荐答案
技术背景
现在,您添加服务工作人员(以及所有其他PWA要求)后,您的应用就被创建为Real PWA-安装了Web-APK.
因此,您还需要使用默认HTTPS端口443-确保使用有效的HTTPS证书.
在添加Service-Worker之前,缺少此强制性要求,因此未安装PWA,因此需要较少的其他要求才能显示在"standalone-mode"
中.
可惜的是,这没有任何记载……我们不得不为自己寻找".
Technical Background
The Moment you add your Service-Worker (along all other PWA-Requirements) your App gets created as an Real PWA - with Web-APK getting installed.
Therefore you also need to use Default-HTTPS-Port 443 - make sure you use a valid HTTPS-Certificate.
Before adding the Service-Worker, this mandatory requirement was missing so your PWA was NOT installed and therefore needed less other requirements to be displayed in "standalone-mode"
.
It's just a shame that this is nowhere documented... and we had to "find out" for ourselves.
可安装的Web-APK"的强制性要求的简短列表:
(由于我们找不到完整的列表,因此我尝试包含所有要点)
Short-List of Mandatory Requirements for "Installable Web-APK":
(As we could not find a full List, i try to include all Points)
- 注册的Service-Worker(像您这样的默认实现就足够了)
- manifest.json(您有效)
- 具有有效证书的https
- https默认端口(443,例如 https://yourdomain.com/test/)
- ...,其余的只需检查chrome审核工具(提示:您不需要通过所有要求-切换到https-default-port时,您的web-apk应该可以工作)
- Registered Service-Worker (default-implementation like yours is enough)
- manifest.json (yours is valid)
- https with valid certificate
- https default-port (443, eg. https://yourdomain.com/test/)
- ... for the rest just check chrome audit tool (HINT: you don't need to pass all requirements - your web-apk should work when switching to https-default-port)
这篇关于Android-PWA无法在Service Worker的独立模式下打开的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!