ios - iOS 11.4 上独立模式下的 PWA 问题
问题描述
我的网络应用程序在我能找到的所有浏览器中都能正常工作。如果我在 Firefox 和 Chrome 的桌面上安装该应用程序,它在线和离线都可以正常工作。与桌面 Safari 相同。
我的问题是移动设备上的 Safari。如果我使用浏览器,一切似乎都可以在线或离线工作,没问题。但是,当我将应用程序添加到我的主屏幕时,在独立模式下至少打开一次应用程序(以启动缓存),然后关闭我的网络连接。问题是,当我尝试再次开始使用该应用程序时,我的应用程序内出现了可怕的“无连接”屏幕。
对于我的一生,我无法弄清楚为什么这不起作用,我正准备把我的电脑扔出窗外。
我目前正在使用该InjectManifest
方法workbox-webpack-plugin
将工作箱和我的预缓存清单放入我的服务工作者中。
我的清单:
{
"short_name": "React Notes",
"name": "React PWA notes",
"icons": [
{
"src": "staticAssets/favicon.png",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/png"
},
{
"src": "staticAssets/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "staticAssets/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "./index.html",
"scope":"/",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
我的服务人员:
self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.suppressWarnings();
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
// Cache hit - return response
if (response) {
return response;
}
return fetch(event.request);
}
)
);
});
我的 index.html 的头
...
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover">
<meta name="theme-color" content="#000000">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="manifest" href="/manifest.json">
...
<!-- here be apple specific icon stuff -->
我的工作箱 webpack 插件配置
new workboxPlugin.InjectManifest({
swSrc: './src/sw.js',
swDest: 'service-worker.js',
importWorkboxFrom: 'local'
})
我有一半期望它与我的 index.html 或清单有关,但我所做的任何更改都不起作用。
有人知道吗?
解决方案
您的问题可能是由于工作箱使用 importScripts 并且当前 iOS 没有正确缓存导入的脚本。这是即将到来的修复。
尝试直接引用所有工作箱文件,然后在主工作箱 JavaScript 中注释掉导入脚本行。
推荐阅读
- python-sphinx - 在呼吸/呼气/狮身人面像中使用带有参数的 doxygen 别名
- python - pymongo以有效的方式查询字典
- speech-recognition - SpeechRecognizer 有个别错误,因为检测到它不是意思词?
- c# - 我的 .NET 5.0 C# 项目中的循环依赖 - 我该如何解决?
- python - 使用 for 循环时 Python Selenium 上的 StaleElementReferenceException
- python - 在 AWS S3 中以编程方式移动/重命名/处理文件
- http-proxy - 无法在代理端口上捕获 http url 的流量
- apache-flink - Flink 中的 TaskManager 缩放
- selenium-webdriver - 如何使用 Bing 缓存页面进行爬网
- json - 如何通过切片字符串路径创建分层 json 结构