PWA Simple Demo - Ошибка при добавлении pwabuilder-sw-register. js - PullRequest
Новая
       7

PWA Simple Demo - Ошибка при добавлении pwabuilder-sw-register. js

2 голосов
/ 26 мая 2020

Здравствуйте,

Я пытаюсь создать простую демонстрацию PWA, следуя инструкциям в этой статье: «https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/get-started»

Однако, когда я дохожу до этапа загрузки и добавления файлов: «pwabuilder-sw. js» и «pwabuilder-sw-register. js» в root, а затем добавляю <script src="/pwabuilder-sw-register.js"></script> в заголовок index. html Я получил ошибку в браузере Edge: "SCRIPT1086: SCRIPT1086: Здесь неожиданный оператор импорта или экспорта модуля" Я ищу вокруг и обнаруживаю, что мне нужно добавить type = "module" вот так <script src="/pwabuilder-sw-register.js" type="module"></script>, но теперь я ' m появляется другая ошибка: «0: невозможно получить свойство 'define' неопределенной или нулевой ссылки» в pwaupdate (175,5829)

Код моей страницы выглядит так:

Index. html

<html>

<head>
  <title>Express</title>
  <link rel="stylesheet" href="/stylesheets/style.css">
  <link rel="manifest" href="/manifest.json">
  <script src="/pwabuilder-sw-register.js" type="module"></script>
</head>

<body>
  <h1>Express 2</h1>
  <p>Welcome to Express</p>
</body>

</html>

pwabuilder-sw. js

// This is the service worker with the Cache-first network

const CACHE = "pwabuilder-precache";

importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.0.0/workbox-sw.js');

self.addEventListener("message", (event) => {
  if (event.data && event.data.type === "SKIP_WAITING") {
    self.skipWaiting();
  }
});

workbox.routing.registerRoute(
  new RegExp('/*'),
  new workbox.strategies.CacheFirst({
    cacheName: CACHE
  })
);

pwabuilder-sw-register. js

// This is the service worker with the Cache-first network

// Add this below content to your HTML page inside a <script type="module"></script> tag, or add the js file to your page at the very top to register service worker

import 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate';

const el = document.createElement('pwa-update');
document.body.appendChild(el);

Я много искал, но я не нашел ни одной подсказки.

Посоветуйте, пожалуйста.

Ответы [ 2 ]

0 голосов
/ 21 июля 2020

Есть только 2 вещи, которые вам нужны для этой работы:

  1. Добавьте pwabuilder-sw.js и pwabuilder-sw-register.js на свой сайт root.
  2. Добавьте следующий тег скрипта на ваш <head>
<script type="module" src="pwabuilder-sw-register.js"></script>

Вот небольшой пример , который показывает, как это работает.

Похоже, в статье MSDN пропущен скрипт «модуля» тип. Моя вина! Я обновил статью MSDN , чтобы включить это исправление.

0 голосов
/ 29 июня 2020

Обычно эта ссылка на скрипт больше не требуется. <script src="/pwabuilder-sw-register.js" type="module"></script>

Скрипт будет загружен компонентом pwaupdate. Поэтому просто добавьте этот код в блок в конце вашей страницы HTML: 

import 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate';

const el = document.createElement('pwa-update');
document.body.appendChild(el);

Если он по-прежнему не работает, пожалуйста, откройте вопрос в нашем репозитории Github или попросите Джастина, ответственного этой части в Twitter: https://twitter.com/Justinwillis96

Спасибо!

David

...