你好，
我正在尝试按照本文的步骤创建一个简单的 PWA 演示："https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/get-started">
但是，当我到达下载文件并将其添加的步骤时："pwabuilder-sw.js"和"pwabuilder-sw-register.js"到根目录，然后将<script src="/pwabuilder-sw-register.js"></script>添加到索引的头部.html我在 Edge 浏览器上收到错误："SCRIPT1086：SCRIPT1086：模块导入或导出语句在这里意外" 我四处搜索，发现我必须像这样添加 type="module"<script src="/pwabuilder-sw-register.js" type="module"></script>但现在我收到另一个错误： "0：无法获取未定义或空引用的属性'定义'"中的 PWA更新 (175,5829(
我的页面代码如下所示：
索引.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 件事即可完成这项工作：
- 将
pwabuilder-sw.js和pwabuilder-sw-register.js添加到站点根目录。 - 将以下脚本标记添加到
<head>
<script type="module" src="pwabuilder-sw-register.js"></script>
下面是一个快速示例，显示了它的工作原理。
看起来 MSDN 文章缺少"模块"脚本类型。我的错！我已更新 MSDN 文章以包含此修复程序。
您通常不再需要此脚本引用<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上询问负责这部分的Justin：https://twitter.com/Justinwillis96
谢谢！
大卫