esp8266 / Nodemcu Service Worker - при получении скрипта произошла неизвестная ошибка - PullRequest
Новая
       14

esp8266 / Nodemcu Service Worker - при получении скрипта произошла неизвестная ошибка

1 голос
/ 13 февраля 2020

Я работаю над Wi-Fi, напечатанным на 3D-принтере и работающим на Nodemcu (не очень уверен в точной плате, так как я получил ее по дешевке на eBay).

Я получаю следующую ошибку:

Произошла неизвестная ошибка при извлечении скрипта. Сбой регистрации работника службы: DOMException: не удалось зарегистрировать ServiceWorker для области ('https://192.168.1.223/') с помощью сценария ('https://192.168.1.223/service-worker.js'): при получении скрипт.

Когда я go до https://192.168.1.223/service-worker.js я вижу код в файле, так что он представлен просто отлично. Кажется, что этот сценарий не может получить доступ к /service-worker.js как манифест. json загружается просто отлично. 

<script>
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('service-worker.js')
      .then(reg => {
        console.log('Service worker registered!', reg);
      })
      .catch(err => {
        console.log('Service worker registration failed: ', err);
      });
  });
}
</script>

Я пробовал это на вкладках инкогнито, устанавливал все виды флагов chrome и очищал мой кэш / незарегистрированный сервисный работник больше раз, чем я могу сосчитать.

Код на нодемку идет следующим образом (убран автомобиль лог c): 

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServerSecure.h>
#include <ESP8266mDNS.h>

#ifndef STASSID
#define STASSID "XXXXXXX"
#define STAPSK  "XXXXXXX"
#endif

const char html_index[] = {index.html code in C-string - see below};
const char offline_html[] = {offline.html code in C-string - did not include below};
const char manifest_js[] = {manifest.json code in C-string - see below};
const char serviceWorker_js[] = {service-worker.js code in C-string - see below};
const char tesla_192_png[] PROGMEM= {**hex for picture**};
const char tesla_512_png[] PROGMEM= {**hex for picture**};

const char* ssid = STASSID;
const char* password = STAPSK;

static const uint8_t x509[] PROGMEM = {  #include "x509.h"};
static const uint8_t rsakey[] PROGMEM = {  #include "key.h"};

ESP8266WebServerSecure server(443);

void setup(void) 
{
  Serial.begin(115200);
  WiFi.begin(ssid, password);
  Serial.println("");

  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

  if (MDNS.begin("esp8266")) {
    Serial.println("MDNS responder started");
  }

  server.setServerKeyAndCert_P(rsakey, sizeof(rsakey), x509, sizeof(x509));

  server.on("/", handleRoot);
  server.on("/index.html",handleIndex);
  server.on("/service-worker.js",handleServiceWorker);
  server.on("/offline/offline.html",handleOffline);
  server.onNotFound(handleNotFound);

  server.begin();
  Serial.println("HTTPS server started");
}

void loop(void) 
{
  server.handleClient();
  MDNS.update();
}

void handleRoot() 
{
  server.sendHeader("Location","/index.html");
  server.send(303); 
}

void handleIndex()
{
  server.send(200,"text/html",html_index);
}

void handleNotFound() {
  String message = "File Not Found\n\n";
  message += "URI: ";
  message += server.uri();
  message += "\nMethod: ";
  message += (server.method() == HTTP_GET) ? "GET" : "POST";
  message += "\nArguments: ";
  message += server.args();
  message += "\n";
  for (uint8_t i = 0; i < server.args(); i++) {
    message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
  }
  server.send(404, "text/plain", message);
}

void handleOffline()
{
  server.send(200, "text/html",offline_html);
}
void handleManifest()
{
  server.send(200,"application/js",manifest_js);
}

void handleServiceWorker()
{
  server.send(200,"application/js",serviceWorker_js);
}

Индекс. html выглядит следующим образом (в коде Nodemcu это преобразуется в C -строку): 

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.5.94/css/materialdesignicons.min.css">
<script src="https://kit.fontawesome.com/fef9c30a7a.js" crossorigin="anonymous"></script>
<meta name="mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, user-scalable=no">
<head>
    <link rel="manifest" href="/manifest.json">
    <meta name="theme-color" content="#4285f4" />
    <title>Tesla Truck Control</title>
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"> </script>
    <style>
       **CSS removed for easy reading - planning on making it a separate file**
    </style>
</head>
<body>
  **body removed for easy reading**
<script>
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('service-worker.js')
      .then(reg => {
        console.log('Service worker registered!', reg);
      })
      .catch(err => {
        console.log('Service worker registration failed: ', err);
      });
  });
}
</script>
</body>
</html>

Манифест. json 

{
  "short_name": "CyberTruck",
  "name": "Tesla Cyber Truck",
  "icons": [
    {
      "src": "/images/tesla_192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/tesla_512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/",
  "display": "fullscreen",
  "background_color": "#3367D6"
}

И, наконец, фактический работник службы. js. Это было скопировано непосредственно из кодовых ярлыков Google с небольшими изменениями. Я не удосужился изменить эту часть. Я пробовал разные версии от пустой до полного перенаправления на автономную страницу. html, но ничего не изменилось. 

const cacheName = 'cache-v1';
const precacheResources = [
  '/',
  'index.html',
  'offine/offline.html'
];

self.addEventListener('install', event => {
  console.log('Service worker install event!');
  event.waitUntil(
    caches.open(cacheName)
      .then(cache => {
        return cache.addAll(precacheResources);
      })
  );
});

self.addEventListener('activate', event => {
  console.log('Service worker activate event!');
});

self.addEventListener('fetch', event => {
  console.log('Fetch intercepted for:', event.request.url);
  event.respondWith(caches.match(event.request)
    .then(cachedResponse => {
        if (cachedResponse) {
          return cachedResponse;
        }
        return fetch(event.request);
      })
    );
});
...