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

【问题标题】：PWA problem with Vue3+service worker+keep-aliveVue3+service worker+keep-alive 的 PWA 问题
【发布时间】：2022-01-10 12:23:26
【问题描述】：

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 效果很好

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

【问题讨论】：

标签： progressive-web-apps service-worker vuejs3

【解决方案1】：

找到了！！

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

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

但在第一次 - 表“请求”不创建

我插入下一个代码

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

效果很好

【讨论】：