Question

构建了React应用程序的生产版本，并按照将其部署到Google App Engine的说明进行操作后，我在所有浏览器中的服务工作者注册都遇到了问题。

我在app.yaml中尝试了不同的配置，最新的配置是：

# [START runtime]
runtime: nodejs8
# [END runtime]

# [START handlers]
handlers:
  - url: /
    static_files: build/index.html
    upload: build/index.html

  - url: /
    static_dir: build

  - url: /service-worker.js
    static_files: build/service-worker.js
    upload: build/service-worker.js
    secure: always
# [END handlers]

该错误在Firefox中记录为

Error during service worker registration: DOMException: "The operation is insecure." serviceWorker.js:97:6

Failed to register/update a ServiceWorker for scope ‘https://xxx.appspot.com/’: Bad Content-Type of ‘text/plain’ received for script ‘https://xxx.appspot.com/service-worker.js’.  Must be a JavaScript MIME type.

..和Chrome

The script has an unsupported MIME type ('text/plain').
Failed to load resource: net::ERR_INSECURE_RESPONSE
serviceWorker.js:97 Error during service worker registration: DOMException
(anonymous) @ serviceWorker.js:97
Promise.catch (async)
tn @ serviceWorker.js:96
(anonymous) @ serviceWorker.js:51
load (async)
(anonymous) @ serviceWorker.js:34
429 @ index.js:25
p @ (index):1
276 @ stylesheet.js:47
p @ (index):1
i @ (index):1
e @ (index):1
(anonymous) @ main.609507e8.chunk.js:1

我没有更改默认的Service Worker注册/配置，因为不需要这样做。它正在index.js中注册。当生产版本在本地提供服务时，注册没有问题。

ReactDOM.render(app, document.getElementById("root"));
serviceWorker.register();

Answer 1

Displaimer：不是Node.js用户，仅根据文档回答。

由于您正在使用handlers部分在app.yaml文件中指定静态资源，因此还需要在script: auto中添加一个。来自Handlers element（重点是我）：

脚本

可选。指定对特定处理程序的请求应   定位您的应用。 script元素唯一可接受的值为   auto，因为所有流量都是使用entrypoint命令提供的。   要使用静态处理程序，您的至少一个处理程序必须包含行script: auto才能成功部署。
handlers:
- url: /images
  static_dir: static/images

- url: /.*
  secure: always
  redirect_http_response_code: 301
  script: auto

侧面说明：/模式有2个处理程序，第2个处理程序将永远不会被匹配/命中，您将始终为其返回build/index.html。

Answer 2

问题是某些.js文件（包括service-worker和package-manifest）以普通的class LoginPage(tk.Frame): def __init__(self, parent, controller): tk.Frame.__init__(self, parent) MyFrontend.configure(self, background="lightblue") logo = tk.PhotoImage(file="logo.png") tk.Label(self, image=logo).pack() labelNric = tk.Label(self, text="NRIC:", font=LARGE_FONT_NOBOLD, background="lightblue", foreground="darkslategray") labelNric.place(x=80,y=220) # entry box for user input entryNric = tk.Entry(self, highlightbackground="lightblue") # entryNric.bind("<Return>", getNric) entryNric.place(x=280,y=223) labelEgnric = tk.Label(self, text="E.g. SXXXX123A", font=SMALL_FONT, background="lightblue", foreground="darkslategray") labelEgnric.place(x=285,y=253) def error_popupmsg(msg): popup = tk.Tk() popup.wm_title("Error") popup.geometry("400x200") popup.configure(background="darkred") labelError = tk.Label(popup, text=msg, font=MED_FONT, background="darkred", foreground="white") labelError.place(x=140, y=60) buttonOk = tk.Button(popup, text="Got it!", highlightbackground ="#8B0000", command=popup.destroy) buttonOk.place(x=170, y=100) popup.mainloop() def checkNric(arg=None): nric_check = entryNric.get() if nric_check == 'S1234567B' or nric_check == 'S1234567C': controller.show_frame(HomePage) else: error_popupmsg("Invalid NRIC!") buttonSubmit = ttk.Button(self, text="Submit", command=lambda: checkNric()) buttonSubmit.place(x=380,y=290) class HomePage(tk.Frame): def __init__(self, parent, controller): tk.Frame.__init__(self, parent) MyFrontend.configure(self, background="lightblue") labelNricInfo = tk.Label(self, text="Patient's NRIC/FIN:", font=SMALL_FONT, background="lightblue", foreground="darkslategray") labelNricInfo.place(x=50,y=40) # to display NRIC from entry box in login page here labelNricDisplay = tk.Label(self, text="", font=SMALL_FONT, foreground="darkslategray") labelNricDisplay.place(x=170,y=40) buttonBack = ttk.Button(self, text="Back", command=lambda: controller.show_frame(LoginPage)) buttonBack.place(x=370,y=420) buttonSubmit = ttk.Button(self, text="Submit") buttonSubmit.place(x=460,y=420)哑剧类型而不是text的形式提供。

使用正则表达式模式定位特定的路由，我设法覆盖默认设置并以正确的mime模式提供文件，其中一个是application/javascript，因为它是在注册过程中请求的。

这是最后的/service-worker.js

app.yaml

将React应用的生产版本部署到Google App Engine：服务工作者注册失败

2 个答案: