PWA项目,从小米浏览器添加到桌面的应用中,打不开系统相册
将现有的项目,改成PWA项目,项目中有一处应用到
<input type="file" name="file" id="imagefile" accept="image/*">
在微信,手机浏览器中,均可以正常操作,调用系统相册选择照片
甚至从google浏览器添加到桌面的应用也可以打开
唯独小米浏览器添加到桌面的就不可以
同时因为无法查看控制台,无从查起,尝试修改了样式也没有作用
贴上serviese-worker.js
// 定义名称,后期更新该参数,达到更新缓存的目的
const CACHE_NAME = 'autocloudproV2.0'
// 在app被安装时触发。它经常用来缓存必要的文件。缓存通过 Cache API来实现。
this.addEventListener('install', function (event) {
this.skipWaiting()
console.log('install service worker')
// 创建和打开一个缓存库
caches.open(CACHE_NAME)
// 首页
let cacheResources = ['https://m.autocloudpro.com/']
event.waitUntil(
// 请求资源并添加到缓存里面去
caches.open(CACHE_NAME).then(cache => {
cache.addAll(cacheResources)
})
)
})
// 当 install完成后, service worker 进入active状态,这个事件立刻执行
this.addEventListener('activate', function (event) {
console.log('service worker is active')
// delete old caches
event.waitUntil(
clearOldCaches()
.then(() => self.clients.claim())
)
})
// 当有网络请求时这个事件被触发。它调用respondWith()方法来劫持 GET 请求并返回
this.addEventListener('fetch', function (event) {
event.respondWith(
caches.match(event.request, {ignoreVary: true}).then(response => {
// cache hit
if (response) {
return response
}
return util.fetchPut(event.request.clone())
})
)
})
let util = {
fetchPut: function (request, callback) {
return fetch(request).then(response => {
// 跨域的资源直接return
if (!response || response.status !== 200 || response.type !== 'basic') {
return response
}
util.putCache(request, response.clone())
typeof callback === 'function' && callback()
return response
})
},
putCache: function (request, resource) {
// 后台不要缓存,preview链接也不要缓存
if (request.method === 'GET' && request.url.indexOf('wp-admin') < 0 && request.url.indexOf('preview_id') < 0) {
caches.open(CACHE_NAME).then(cache => {
cache.put(request, resource)
})
}
}
}
// 清除旧的缓存,通过CACHE_NAME区别
function clearOldCaches () {
return caches.keys()
.then(keylist => {
return Promise.all(
keylist
.filter(key => key !== CACHE_NAME)
.map(key => caches.delete(key))
)
})
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论