Question

首次使用Laravel 5.8 + Homestead构建PWA。页面加载时出现以下错误：

app.js:42706 Uncaught ReferenceError: window is not defined
ServiceWorker registration failed:  TypeError: Failed to register a ServiceWorker: ServiceWorker script evaluation failed

而我的app.js中的错误行是：

window._ = __webpack_require__(/*! lodash */ "./node_modules/lodash/lodash.js");

缓存的工作人员app.js无法解析window常量。

我已经设置了sw-precache-webpack-plugin，所以我的webpack.mix.js是：

const mix = require('laravel-mix');
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');

mix.js('resources/js/custom/buildings.js', 'public/js')
    .js('resources/js/custom/home.js', 'public/js')
    .js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .options({
        processCssUrls: false
    })
    .webpackConfig({
    plugins: [
        new SWPrecacheWebpackPlugin({
            cacheId: 'sccpwa',
            filename: 'service-worker.js',
            staticFileGlobs: ['public/**/*.{css,eot,svg,ttf,woff,woff2,js,html}'],
            minify: true,
            stripPrefix: 'public/',
            handleFetch: true,
            dynamicUrlToDependencies: {
                '/': ['resources/views/auth/login.blade.php'],
                '/building/list': ['resources/views/pages/building.blade.php'],
                '/home': ['resources/views/pages/home.blade.php'],
            },
            staticFileGlobsIgnorePatterns: [/\.map$/, /mix-manifest\.json$/, /manifest\.json$/, /service-worker\.js$/],
            navigateFallback: '/',
            runtimeCaching: [
                {
                    urlPattern: /^https:\/\/fonts\.googleapis\.com\//,
                    handler: 'cacheFirst'
                },
                {
                    urlPattern: /^https:\/\/www\.projecturl\.com\/img\/(\w+)\.jpg/,
                    handler: 'cacheFirst'
                }
            ],
            importScripts: [
                './js/app.js',
                './js/buildings.js',
                './js/home.js'
            ]
        })
    ]
});

然后我将其添加到app.js

顶部以注册服务工作者。

require('./app-bootstrap');

if ('serviceWorker' in navigator ) {        
    window.addEventListener('load', function() {
        navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
            // Registration was successful
            console.log('ServiceWorker registration successful with scope: ', registration.scope);
        }, function(err) {
            // registration failed :(
            console.log('ServiceWorker registration failed: ', err);
        });
    });
}

$(document).ready(function() { .APP JS STUFF HERE. };

npm编译时没有错误，我可以看到addEventListener被执行，但是以上错误弹出。

我错过了什么？谢谢！

Answer 1

该错误是一个非常简单的错误。您正在将应用程序代码导入（importScript）到SW脚本中。尝试执行时，会发生错误。

Service Worker执行上下文与通常的页面执行上下文不同。您无法在SW中以1：1的方式执行应用代码。通常这甚至毫无意义。

大多数情况下，我确定您错误地理解了工作箱配置中的importScripts参数。这意味着：将这些脚本导入到SW中并执行它们。

Windows上的sw-precache-webpack-plugin-无法解析窗口

1 个答案: