SW-Precache-WebPack-плагин на окнах - не может разрешить окно - PullRequest
Новая
       13

SW-Precache-WebPack-плагин на окнах - не может разрешить окно

0 голосов
/ 26 мая 2019

Первое построение PWA, используя Laravel 5.8 + Homestead.Я получаю следующую ошибку при загрузке страницы: 

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 constant.

Я настроил 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 выполняется, но затем появляется вышеупомянутая ошибка.

Что я пропустил?Спасибо!

1 Ответ

0 голосов
/ 26 мая 2019

Ошибка очень простая ошибка.Вы импортируете (importScript) код своего приложения в скрипт SW.Когда он пытается выполнить, происходит ошибка.

Контекст выполнения Service Worker отличается от обычного контекста выполнения страницы.Вы не можете выполнить код приложения 1: 1 на SW.Обычно это даже не имеет никакого смысла.

Я уверен, что вы неправильно поняли параметр importScripts в конфигурации рабочей коробки.Это значит: импортировать эти скрипты в SW и выполнить их.

...