PWA Simple Demo - Error when add pwabuilder-sw-register.js

user_6384927 0
Viewed 1427

Hello,

I'm trying to create a simple PWA demo by following the steps of this article: "https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/get-started"

However when I reach the step to download and add the files: "pwabuilder-sw.js" and "pwabuilder-sw-register.js" to root and then add <script src="/pwabuilder-sw-register.js"></script> to the head of index.html I got error on Edge browser: "SCRIPT1086: SCRIPT1086: Module import or export statement unexpected here" I search around and I find that I have to add type="module" like this <script src="/pwabuilder-sw-register.js" type="module"></script> but now I'm getting another error: "0: Unable to get property 'define' of undefined or null reference" in pwaupdate (175,5829)

My page code looks like:

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);

I searched a lot but I did not find any clue.

Please advise.

progressive-web-apps npm node.js javascript
2 Answers

You normally don't need any more this script reference <script src="/pwabuilder-sw-register.js" type="module"></script>

The script will be loaded by the pwaupdate component. So simply add this code inside a block at the end of your HTML page:

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

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

If it still doesn't work, please open an issue on our Github repo or ask to Justin who's in charge of this part on Twitter: https://twitter.com/Justinwillis96

Thanks!

David

user_10904020

There are only 2 things you need to make this work:

  1. Add pwabuilder-sw.js and pwabuilder-sw-register.js to your site root.
  2. Add the following script tag to your <head>
<script type="module" src="pwabuilder-sw-register.js"></script>

Here's a quick sample that shows this working.

It looks like the MSDN article missed the "module" script type. My fault! I've updated the MSDN article to include this fix.

Judah_Himango_5360
Related