大家好，我一直在尝试做我的第一个PWA项目，出于某种原因，只有iPhone是不工作尝试了不同的手机和不同的操作系统的代码，我要分享的Android（Chrome和边缘），Windows PC（Chrome和边缘），Mac（Chrome），但当我尝试它在iPhone上什么也没有发生，也没有发现错误.还有一件事，我正在使用的网站是一个虚拟目录内我的域，我不能主机的文件根域
Index.htm
<html>
<head>
<link rel="manifest" href="manifest.json">
<title>Pwa 1 </title>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="module" src="https://example.com/pwa/empty.js"></script>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('https://example.com/pwa/sw.js').then(function(registration) {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
});
}
</script>
</head>
<body>
Hello
</body>
</html>manifest.json
{
"name": "My PWA Sample App",
"short_name" : "PWA",
"start_url": "https://example.com/pwa/",
"description": "test pwa.",
"scope" : "https://example.com/pwa/",
"id":"index.html",
"icons": [
{
"src": "android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffee00",
"background_color": "#ffee00",
"display": "standalone",
"orientation": "portrait"
}sw.js
var CACHE_NAME = 'my-site-cache-v1';
var urlsToCache = [
'/'
];
self.addEventListener('install', function(event) {
// Perform install steps
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
console.log('Opened cache');
return cache.addAll(urlsToCache);
})
);
});
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).then(
function(response) {
// Check if we received a valid response
if(!response || response.status !== 200 || response.type !== 'basic') {
return response;
}
// IMPORTANT: Clone the response. A response is a stream
// and because we want the browser to consume the response
// as well as the cache consuming the response, we need
// to clone it so we have two streams.
var responseToCache = response.clone();
caches.open(CACHE_NAME)
.then(function(cache) {
cache.put(event.request, responseToCache);
});
return response;
}
);
})
);
});请建议如何让它在iPhone上的chrome和safari上工作，谢谢
1条答案
按热度按时间i2loujxw1#
如果你说的是安装PWA的提示，那么iOS上不存在这样的东西。为什么？你得去问苹果。