cyyyu / parcel-plugin-sw-precache Goto Github PK

I am having some trouble actually including the service worker in my project. I can see the generated service-worker.js show up in the dist/ folder, but how do I go about actually including it? If I <script src="dist/service-worker.js"></script> in my index.html, the build obviously fails the first time (and in CI since the build is 'fresh' every time) because service-worker.js does not exist yet.

this option inside package.json:

  "sw-precache": {
    "staticFileGlobsIgnorePatterns": [
      "/report.html"
    ]
  },

seems to not be working

My understanding is to put

if ("serviceWorker" in navigator) {
  window.addEventListener("load", function() {
    navigator.serviceWorker.register("../dist/service-worker.js").then(
      function(registration) {
        // Registration was successful
        console.log(
          "ServiceWorker registration successful with scope: ",
          registration.scope
        );
      },
      function(err) {
        // registration failed :(
        console.log("ServiceWorker registration failed: ", err);
      }
    );
  });
}

somewhere but this creates the service-worker.js endlessly. Would love to have some direction :)

When i use parcel with --no-minify development,my js file is larger than 2.1MB
It shows:

Is that any ways to support large js file?

sw-precache requires navigateFallbackWhiteList to be an array of regexes, but when specifying the option in package.json it is an array of strings. I am trying in package.json to put

{
  ...
  "sw-precache": {
    "navigateFallback": "index.html",
    "navigateFallbackWhitelist": [
      "^(?!\/swagger\/).*"
    ]
  }
}

It is somewhat annoying because the regex is just converted back to a string in sw-precache here https://github.com/GoogleChromeLabs/sw-precache/blob/master/lib/sw-precache.js#L307 but because of the call to source, the setting must be a regex and not a string.

parcel-plugin-sw-precache should convert the strings from pacakge.json into regexes. (Looking through the options for sw-precache, there are several other settings that also require regexes.)

I'm receiving the following error upon build, using Parcel 1.9.7:

Some directory names have been changed to XXXXXX to protect the innocent.

‼  Unexpected token ...
      ...swPrecacheConfigs
      ^^^

SyntaxError: Unexpected token ...
    at NativeCompileCache._moduleCompile (C:\XXXXXX\parcel-sw-precache\node_modules\v8-compile-cache\v8-compile-cache.js:226:18)
    at Module._compile (C:\XXXXXX\parcel-sw-precache\node_modules\v8-compile-cache\v8-compile-cache.js:172:36)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (C:\XXXXXX\parcel-sw-precache\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
    at localRequire (C:\XXXXXX\parcel-sw-precache\node_modules\parcel-bundler\src\utils\localRequire.js:28:10)
    at <anonymous>

The suggestion to remove this message is here: #10

My Code working fine before, after added this plugin in parcel bundler giving this error

√  Built in 29.18s.
(node:2992) UnhandledPromiseRejectionWarning: Error: The bundler properties/sub-properties (mainBundle / entryAsset) seems to be not present
    at Bundler.<anonymous> (D:\rpkct\rpk\PWA\submission2\project\node_modules\parcel-plugin-sw-precache\index.js:36:13)
    at Bundler.emit (events.js:310:20)
    at Bundler.bundle (D:\rpkct\rpk\PWA\submission2\project\node_modules\parcel-bundler\src\Bundler.js:340:12)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
(node:2992) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:2992) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

I think this error come from unhandled promise rejection, but i have been added .catch in my code. here data-source.js

const BASE_URL = "https://api.football-data.org";

  class DataSource {
    static getStanding(type) {
        return fetch(BASE_URL + "/v2/competitions/2001/standings?standingType=" + type, {
            method: "GET",
            headers: {
                "X-Auth-Token": "xxxxxx"
            }
        })
        .then(response => response.json())
        .then(responseJson => {
            if (responseJson.standings) {
                return Promise.resolve(responseJson.standings);
            } else {
                return Promise.reject("standing" + type + "is empty");
            }
        })
        .catch(error => {
            alert(error);
        })
    }
}

  export default DataSource;

I want some URLs to always be supplied from the server. Am I doing this correctly? Not sure if the /.../ will be supplied as a regex?

  "sw-precache": {
    "maximumFileSizeToCacheInBytes": 10485760,
    "runtimeCaching": [
      { 
        "urlPattern": "/getincidentattachmentdata/",
        "handler": "networkOnly"
      }
    ]
  }

This is at the end of the serviceworker.js file. Should that be a string or regex?

}), toolbox.router.get("/getincidentattachmentdata/", toolbox.networkOnly, {});

Would it make sense to convert this to Workbox? Or maybe create a new project. https://developers.google.com/web/tools/workbox/

Generated file contains absolute paths:
var precacheConfig=[["/512x512.8ed2a3a5.png","995b595601aa502081aad9db6df0c0ed"]

In my case, I'd like to get relative paths (using parcel build index.html --public-url ./):
var precacheConfig=[["512x512.8ed2a3a5.png","995b595601aa502081aad9db6df0c0ed"]

Changing L27 to the following fixes the issue for me - but not sure if it is a proper fix:
stripPrefix: targetDir + '/',

Please also note: there are other absolute paths in your plugin like navigateFallback.

Using 0.4.0.

Thanks for this plugin! :)

When i update to Parcel-bundle 1.8.1 and compile error:

Cannot read property 'package' of undefined
at Bundler.bundler.on (/Users/swift/dev/element-starter/node_modules/parcel-plugin-sw-precache/index.js:16:43)
at emitOne (events.js:116:13)
at Bundler.emit (events.js:211:7)
at Bundler.bundle (/Users/swift/dev/element-starter/node_modules/parcel-bundler/src/Bundler.js:288:12)
at
at process._tickCallback (internal/process/next_tick.js:188:7)