Question

我正在尝试创建一个PWA（渐进式Web应用程序）项目，在该项目中使用PHP构建了服务器端处理。这就是为什么我需要使用Xampp以便在部署到服务器之前可以测试项目的原因。

但是我遇到了一个有趣的问题，我找不到答案。

同一项目有两个相同的版本。一个上传到在线服务器，另一个位于Xampp文件夹。

我通过三个不同的服务器访问这些文件夹。

Google Chrome Web服务器：项目文件位于Xampp文件夹（C：\ xampp \ htdocs）中，我可以通过http://127.0.0.1:8887/访问它们。
我的Cloud Server Online：Apache / Centos 6.1
Xampp服务器：位于（C：\ xampp \ htdocs）。我正在使用虚拟主机，并且可以通过gulmobil.bar进行访问（这是一个指向127.0.0.1 /端口80的虚拟域）

就打开页面而言，没有问题。这三台服务器都可以完成工作。但是，当我通过Chrome开发工具检查页面时，尽管前两个服务器（Chrome Web服务器和在线服务器）运行良好，但在Xampp下运行的服务器却未显示“服务工作者”和“缓存存储”。

  if ('serviceWorker' in navigator) {
    navigator.serviceWorker
             .register('./service-worker.js')
             .then(function() { console.log('Service Worker Registered'); });
  } else {
    console.log("service worker not registered");
  }

导航器似乎不支持服务人员。作为控制台记录“未注册服务工作者”

该问题可能与服务器设置有关，但我不知道哪个设置可能导致此问题。预先感谢。

编辑：我在某种程度上找到了一个类似于   我的问题。它说：“好吧，我正在使用虚拟主机，这就是为什么我   在我的网址之前，service-worker.js出现了错误：   pwapp.dev/work现在，我的网址是：localhost/pwapp/work/ :/   工作正常，”

这里是link。

Answer 1

我终于发现这是与使用Vhost有关的SSL问题。感谢@Jeff Posnick，我意识到，要运行Service Worker，您需要通过http://localhost[:port]或http://127.x.y.z[:port]访问页面和service worker脚本。

如果有相同问题的任何人想要阅读更多内容，请访问此SO Question

但是仍然要使用Vhost，请按照these steps安装Xampp的SSL证书。

Answer 2

也许为时已晚。但我认为我们可以在这里跟踪答案。您应该打开 httpd-ssl.conf 并找到端口 443。然后更改 DocumentRoot 和 ServerName。配置完成后，只需重新启动 XAMPP，它就会按您的预期工作。

<VirtualHost _default_:443>
DocumentRoot "D:/xampp/htdocs/pwapp"
ServerName pwapp.dev:443
ServerAdmin admin@example.com
ErrorLog "D:/xampp/apache/logs/error.log"
TransferLog "D:/xampp/apache/logs/access.log"

PWA-与Xampp和虚拟主机一起使用时，无法注册Service Worker

2 个答案: