React应用转为PWA后URL自动变更的问题咨询

问题根源解析 #

你在package.json里设置了：

"homepage": "http://<username>.github.io/my-app"

这个字段会告诉React应用它的部署根路径是/my-app，不管是开发环境还是生产环境，React都会把所有资源的引用路径、路由基础路径都改成基于/my-app。这就导致：

• 开发服务器自动把访问路径改成了http://localhost:3000/my-app，原来的根路径http://localhost:3000/返回的index.html里，JS资源的路径是/my-app/static/js/bundle.js，但访问根路径时服务器找不到这个资源，反而返回了index.html的内容，所以JS文件加载的是HTML，就会报Uncaught SyntaxError: Unexpected token '<'（HTML的第一个字符是<）。
• manifest.json的start_url: "."也会被解析为/my-app，导致PWA的启动路径不对，同时根路径下请求manifest.json时，返回的也是错误的内容，所以报Manifest语法错误。

修复步骤 #

1. 恢复根路径访问 #

修改package.json的homepage字段为根路径，或者直接删除这个字段（React默认会以根路径作为部署地址）：

// 方法一：设置为根路径
"homepage": "/"
// 方法二：直接删除这一行

修改后必须重启开发服务器（关掉npm start再重新启动），否则配置不会生效。

2. 修复Service Worker的代码错误 #

你的worker.js里有一个错误：重复声明了self变量（let self = this;），这会覆盖Service Worker全局的self对象，导致后续的事件监听可能出问题，需要移除这一行。修改后的worker.js：

let CACHE_NAME = "my-app";
let urlsToCache = ["/", "/completed"];
// 移除 ↓ 这一行，Service Worker中self是全局内置对象
// let self = this;

// Install a service worker
self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(function (cache) {
      console.log("Opened cache");
      return cache.addAll(urlsToCache);
    })
  );
});

// Cache and return requests
self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then(function (response) {
      if (response) {
        return response;
      }
      return fetch(event.request);
    })
  );
});

// Update a service worker
self.addEventListener("activate", (event) => {
  let cacheWhitelist = ["my-app"];
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      return Promise.all(
        cacheNames.map((cacheName) => {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

3. 优化Manifest配置（可选） #

如果希望PWA直接从根路径启动，可以把manifest.json的start_url改成"/"，这样更明确：

"start_url": "/"

额外说明 #

如果之后你需要把应用部署到GitHub Pages的/my-app子路径，再把homepage改回原来的GitHub Pages地址即可，同时要注意：

• Service Worker的urlsToCache要加上子路径前缀，比如["/my-app/", "/my-app/completed"]
• 路由配置也要对应调整为基于/my-app的路径

内容的提问来源于stack exchange，提问作者sara lance