PWA项目,从小米浏览器添加到桌面的应用中,打不开系统相册

发布于 2022-09-06 10:06:14 字数 2311 浏览 14 评论 0

将现有的项目,改成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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文