如何在 Laravel + React JS 项目中使用 webpack 正确设置 service-worker.js？ PWA

Question

我构建的项目是在 ReactJS（前端）和 Laravel 5.8.27（后端作为 REST API）中。我正在尝试为此项目设置 PWA（渐进式 Web 应用程序），因此我不需要直接使用移动​​浏览器。

我使用来自https://app-manifest.firebaseapp.com/ 的生成器准备了 manifest.json 和所有图标：

{
    "name": "TRT",
    "short_name": "TRT",
    "display": "fullscreen",
    "orientation": "portrait",
    "start_url": "/",
    "scope": "/",
    "icons": [
        {
            "src": "images/icons/icon-72x72.png",
            "sizes": "72x72",
            "type": "image/png"
        },
        {
            "src": "images/icons/icon-96x96.png",
            "sizes": "96x96",
            "type": "image/png"
        },
        {
            "src": "images/icons/icon-128x128.png",
            "sizes": "128x128",
            "type": "image/png"
        },
        {
            "src": "images/icons/icon-144x144.png",
            "sizes": "144x144",
            "type": "image/png"
        },
        {
            "src": "images/icons/icon-152x152.png",
            "sizes": "152x152",
            "type": "image/png"
        },
        {
            "src": "images/icons/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "images/icons/icon-384x384.png",
            "sizes": "384x384",
            "type": "image/png"
        },
        {
            "src": "images/icons/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "splash_pages": null
}

然后我需要在我的项目的“公共”文件夹中设置 service-worker.js 文件。我用https://laravel-mix.com/extensions/workbox 我安装了它并将这个模块包含在 webpack.mix.js 文件中，该文件位于该项目的根文件夹中。我刚刚添加了一行要求“laravel-mix-workbox”，并在“混合”对象中添加了附加方法“.generateSW()”。它看起来像这样：

const mix = require('laravel-mix');
/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */
require('laravel-mix-react-css-modules');
require('laravel-mix-workbox');

mix.react('resources/js/app.js', 'public/js')
   .reactCSSModules()
   .generateSW();

然后我把链接放到 manifest.json 文件中 <link rel="manifest" href="manifest.json"> 和主索引文件中的 JS 脚本：

<script>
            // Check that service workers are supported
            if ('serviceWorker' in navigator) {
                // Use the window load event to keep the page load performant
                window.addEventListener('load', () => {
                    navigator.serviceWorker.register('/service-worker.js');
                });
            }
        </script>

注册我运行时创建的 server-worker.js npm run dev

所以，在那之后我去我的浏览器检查它是否可以。当我转到http://127.0.0.1:8000/manifest.json 时有 manifest.json 文件，并且在我的项目的公共文件夹中还有 service-worker.js 文件，如下所示：

/**
 * Welcome to your Workbox-powered service worker!
 *
 * You'll need to register this file in your web app and you should
 * disable HTTP caching for this file too.
 *
 * The rest of the code is auto-generated. Please don't update this file
 * directly; instead, make changes to your Workbox build configuration
 * and re-run your build process.
 */

importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");

importScripts(
  "/precache-manifest.5e21538faef9d96ee3cc4d11ed2229cf.js"
);

self.addEventListener('message', (event) => {
  if (event.data && event.data.type === 'SKIP_WAITING') {
    self.skipWaiting();
  }
});

/**
 * The workboxSW.precacheAndRoute() method efficiently caches and responds to
 * requests for URLs in the manifest.
 */
self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

所以，当我去 Google 开发工具（应用程序选项卡）查看是否一切正常时，结果发现存在 manifest.json 文件但 service-worker 存在问题。消息是 "No matching service worker detected. You may need to reload the page, or check that the scope of the service worker for the current page encloses the scope and start URL from the manifest." 所以我开始在 manifest.json 中测试“start_url”和“scope”的场景，但我把它留下了“/”，因为它是我的根文件夹。

我开始在堆栈和 Google 上搜索解决方案。我发现应该为这个项目设置 SSL（在开发环境中真的需要它吗？）所以我使用 Laravel 的 Homestead 来设置一个带有 SSL 的项目。不，我有：https://project.test 工作。然后事实证明，在 Google 开发工具（应用程序选项卡）中仍然有 "No matching service worker detected. You may need to reload the page, or check that the scope of the service worker for the current page encloses the scope and start URL from the manifest."。 我去了那里的 Service Worker 选项卡，它显示了 service-worker.js 文件，但有一个问题。我去控制台看到这个： Uncaught (in promise) TypeError: Failed to fetch in service-worker.js:1

现在我不知道是什么导致了这个问题。当谈到我不应该更改自动生成的 service-worker.js 文件这一事实时，我能做些什么来解决这个问题。你能帮我吗 ？

Answer 1

找到了解决办法。 webpack 配置有问题。我刚刚添加到 webpack.mix.js

const { GenerateSW } = require('workbox-webpack-plugin');
mix.webpackConfig({
    plugins: [new GenerateSW()],
    output: {
        publicPath: ''
    }
});

这解决了问题。