Блог

После создания производственной сборки приложения React и следования инструкциям по ее развертыванию в Google App Engine у меня возникли проблемы с регистрацией service Worker во всех браузерах.

Я пробовал разные конфигурации в 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
  

Я не менял регистрацию / конфигурацию работника службы по умолчанию, поскольку в этом не было необходимости. Оно регистрируется в index.js . При локальном обслуживании рабочей сборки проблем с регистрацией не возникает.

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

Проблема заключалась в том, что некоторые файлы .js, включая service-worker и package-manifest, были представлены в обычном text mime-типе, а не application/javascript в.

При настройке определенных маршрутов с использованием шаблонов регулярных выражений мне удалось перезаписать настройки по умолчанию и обслуживать файлы в правильном mime, одним из которых является /service-worker.js , поскольку это запрошено в процессе регистрации.

Вот окончательный app.yaml

 # [START runtime]
runtime: python27
api_version: 1
threadsafe: true
# [END runtime]

# [START handlers]
handlers:
  - url: '/service-worker.js'
    secure: always
    static_files: build/service-worker.js
    upload: build/service-worker.js
    mime_type: application/javascript

  - url: /(precache-manifest.*)$
    secure: always
    mime_type: application/javascript
    static_files: build/1
    upload: build/(precache-manifest.*)$

  - url: /(.*.js)$
    secure: always
    static_files: build/1
    upload: build/.*.js$
    mime_type: application/javascript

  - url: /(.*.(css|map|png|jpg|svg|ico|json|txt|woff))$
    secure: always
    static_files: build/1
    upload: build/.*.(css|map|png|jpg|svg|ico|json|txt|woff)$

  - url: '/(.*)'
    secure: always
    static_files: build/index.html
    upload: build/index.html
# [END handlers]
  

Разработчик дисплея: не пользователь nodejs, ответ основан только на документах.

Поскольку вы используете handlers раздел для указания статических ресурсов в вашем app.yaml файле, вам также необходимо добавить один с помощью script: auto . Из элемента обработчиков (выделено мной):

скрипт

Необязательно. Указывает, что запросы к определенному обработчику должны быть нацелены на ваше приложение. Единственное допустимое значение для 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 для него.