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

Question

我构建的项目是在带有Laravel 5.8.27（后端为REST API）的ReactJS（前端）中。我正在尝试为此项目设置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”，并在“ mix”对象中添加了其他方法“ .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>
以注册我运行时创建的serive-worker.jsnpm 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 Dev Tools（“应用程序”选项卡）以查看是否一切正常时，结果发现有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 Dev Tools（“应用程序”选项卡）中仍然存在"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文件，但是有问题。我去控制台看到了这个：service-worker.js中的Uncaught (in promise) TypeError: Failed to fetch：1

现在我不知道是什么原因导致了问题。关于我不应该更改自动生成的service-worker.js文件这一事实，我该怎么做才能解决该问题。你能帮我吗 ？

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

Answer 1

找到了解决方案。 webpack配置出现问题。我刚刚添加到webpack.mix.js