1

我有一个使用Laravel Mix Workbox的 Laravel 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为附加清单条目。这是因为其中包含的 htmlindex.php是我的应用程序外壳，需要缓存以使我的应用程序可以脱机使用。

在我的主要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()
}

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

注意我在precacheAndRoute这里打电话，否则我得到错误createHandlerBoundToURL('/index.php') was called, but that URL is not precached.我不明白为什么这是必要的，因为我可以看到它index.php已经在传递给precacheAndRoute我的server-worker.js.

我尝试使用 Workbox WindowmessageSW函数而不是传递'CACHE_URLS'，index.php但这并没有解决错误。

这段代码的目的是注册一个导航路线，这样我就可以根据谷歌关于导航请求的文档返回所有导航请求的特定响应。

我现在可以在 Chrome 中查看该站点，查看 Service Worker 是否已安装，但是当我检查“离线”并重新加载页面时，我只会收到“无互联网”消息。

查看网络，我可以看到请求/dashboard失败。

如何让我的网站离线工作？

为什么服务工作者不使用缓存index.php来响应请求？

4

0 回答 0