Progressive web apps 如何使用Laravel Mix Workbox使站点脱机可用

我有一个拉威尔Vue PWA使用

在webpack.mix.js中，我有：

mix
    .js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .generateSW({
        additionalManifestEntries: [{url: 'index.php', revision: '1'}]
    })

注意这里我手动添加了

index.php

作为附加清单条目。这是因为

index.php

中包含的html是我的，需要缓存以使我的应用程序脱机可用

在我的main

app.js

中，我有：

import { Workbox } from 'workbox-window'
import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching'
import { registerRoute, NavigationRoute } from 'workbox-routing'

if ('serviceWorker' in navigator) {

    const wb = new Workbox('/service-worker.js')

    precacheAndRoute([
        { url: '/index.php', revision: '383676' }
    ])

    const handler         = createHandlerBoundToURL('/index.php')
    const navigationRoute = new NavigationRoute(handler)
    registerRoute(navigationRoute)

    wb.register()
}

我正在使用它，因为它声称可以让一切变得更容易

注意，我在这里调用

precacheAndRoute

，否则我会得到错误

createHandlerBoundTour（'/index.php'）被调用，但是这个URL并没有预先缓存。

我不明白为什么需要这样做，因为我可以看到

index.php

已经在我的

server worker.js

中传递给

precacheAndRoute

的数组中

我尝试使用Workbox Window

messageSW

函数，而不是使用

index.php

传递

'CACHE\u url'

，但这并没有修复错误

这段代码的目的是注册一条导航路线，这样我就可以根据返回所有导航请求的特定响应

我现在可以在Chrome中查看该网站，查看是否安装了服务人员，但当我选中“脱机”并重新加载页面时，我只会收到消息“没有互联网”

查看网络，我可以看到对

/dashboard

的请求失败

如何使我的网站脱机工作？

---

为什么服务人员不使用缓存的

index.php

响应请求

我也有同样的问题。你找到解决办法了吗？没有，没有简单的解决办法，或者至少记不起来了。这绝对是个挑战，我也有同样的问题。你找到解决办法了吗？没有，没有简单的解决办法，或者至少记不起来了。这绝对是一个挑战。