Vue3+service worker+keep-alive的PWA问题

Question

我遇到了 Vue3+service worker+keep-alive 的问题。

我在模板中使用keep-live

 <q-page-container>
  <router-view v-slot="{ Component }">
    <keep-alive :include="['WorkPage']">
      <component :is="Component" :key="$route.fullPath"/>
    </keep-alive>
  </router-view>
</q-page-container>

创建队列

createWorkQueue = new Queue('createWorkQueue', {
    onSync: async ( {queue} ) => {     
      let entry    
      while (entry = await queue.shiftRequest()) {
        try {
          await fetch(entry.request);
          const channel = new BroadcastChannel('sw-messages-work');
          channel.postMessage({msg: 'offline-work-uploaded'});         
        } catch (error) {
          await queue.unshiftRequest(entry);
          throw error;
        }
      }
    }
  })

addEventListener('fetch'

 self.addEventListener('fetch', (event) => {
      if (event.request.url.endsWith('/api/ins_new_work')) {          
        const bgSyncLogic = async () => {
          try {
            const response = await fetch(event.request.clone())
            return response
          } catch (error) {
            await createWorkQueue.pushRequest({request: event.request})
            return error
          }
        }
        event.respondWith(bgSyncLogic())
    }
})

离线时我发送表单 - createWorkQueue.pushRequest 挂起 5 分钟

如果我从 keep-alive - WorkPage - 中删除，那么 pushRequest 工作正常

但我需要保持活动页面。我该如何解决？

Answer 1

我找到了！！

我使用 IndexedDB 库并显示我从数据库信息中读取的离线消息

const db = await openDB('workbox-background-sync')

但第一次 - table 'requests' 不创建

我插入下一个代码

const db = await openDB('workbox-background-sync', undefined, { upgrade(db) { db.createObjectStore('requests') }})

并且运行良好

Vue3+service worker+keep-alive的PWA问题

PWA problem with Vue3+service worker+keep-alive

service-worker

progressive-web-apps

vuejs3