Question

我已经使用create-react-app创建了一个应用程序，该应用程序是使用heroku部署的。我已将serviceWorker.ubregister();替换为serviceWorker.register();。当我按照https://facebook.github.io/create-react-app/docs/deployment

的以下步骤进行操作时，服务人员工作正常

npm i -g serve
serve -s build -l 4000

我假设与process.env.PUBLIC_URL有关，但不确定如何解决此问题。

可以找到代码：https://github.com/subhendukundu/gif-code-snippet 托管于：https://gif-code-snippet.herokuapp.com/

Answer 1

您必须以错误的方式部署应用程序，而我刚刚完成了这5个步骤，并让服务程序与Serviceworker一起运行。

git clone https://github.com/subhendukundu/gif-code-snippet.git
cd gif-code-snippet
heroku create -b https://github.com/mars/create-react-app-buildpack.git
git push heroku master
heroku open

随时检查here

Answer 2

是的！我不知道我在开发PWA时是否也遇到了ServiceWorker注册的相同问题。

我认为create-react-app随附的 serviceWorker.js 文件存在问题。因此，我有一个自定义的 serviceWorker.js ，它与控制台上的日志显示了ServiceWorker的相应事件，对开发更友好。我发现下面的register()函数很有用。

export default function register() {
  if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
    // The URL constructor is available in all browsers that support SW.
    const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
    if (publicUrl.origin !== window.location.origin) {
      // Our service worker won't work if PUBLIC_URL is on a different origin
      // from what our page is served on. This might happen if a CDN is used to
      // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
      return;
}

尽管window.location和window.location.href都是同义词。我更喜欢将process.env.PUBLIC_URL设置为默认路径，而不是URL。

但是我建议您将您的serviceWorker.js文件替换为this file.

Answer 3

我认为您应该访问此 https://github.com/facebook/create-react-app/issues/5673#issuecomment-438654051

如何使用creat-react-app在heroku部署中启用Serviceworker？

3 个答案: