cra-template / pwa Goto Github PK

This line gives a TypeScript error:

TS2322: Type 'ExpirationPlugin' is not assignable to type 'WorkboxPlugin'.
   Types of property 'cacheDidUpdate' are incompatible.

Hi everyone, I faced this issues but I don't understand the reason. The scenario is: The first time I'm at '/' at url 'http://localhost:5000', everything is fine with the service-worker. But when I route to '/conversations?conversationId=...', the service-worker is deleted immediately. How could I resolve this issue and why does this one occur? Thank you so much!

If I forget to start the local server to serve my build, but visit it in the browser anyway, the old sw can still serve the old assets, and I may not notice. I thought part of the intention of checkValidServiceWorker() was to cover this scenario, but seems it doesn't.

something like this will cover that:

export function register() {
  if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
    const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
    window.addEventListener("load", async () => {
      if (isLocalhost) await validateLocalServer(swUrl);
      registerSW(swUrl);
    });
  }
}

async function validateLocalServer(swUrl: string) {
  try {
    const res = await fetch(swUrl, { headers: { "Service-Worker": "script" } }); // this throws if server isn't running
    if (res.status === 404) throw new Error("404");
  } catch (err) {
    alert(`Local server is not running, or running but no sw found. \n${err.message}`);
    return Promise.reject();
  }
}

async function registerSW(swUrl: string) {
  //...
}

Hi, I had a previous PWA setup but the service-worker file was called sw.js and now I can't make it register the new one. I tried simply renaming the file to sw.ts (I'm using TypeScript) and changing the swUrl variable in serviceWorkerRegistration file but it didn't work.

Any hints? Thanks.

Hello,
I'm wondering if it may be possible to customize the name of the generated service worker.
I have some libraries that require an specific service worker name

I have updated our custom CRA template to use the PWA features from this project. Previously it we used the setup from tha core CRA template. But since switching to this solution we have randomly the error "Unexpected token '<'" after publishing new versions of the application to the demo page (https://www.react-most-wanted.com/)

To recreate this bug just create a project with this template with: npx create-react-app my-app --template rmw
And publish it to a Firebase project using serve localy. I could not reproduce this issue localy. IT apears in most cases when publishing to Firebase.

Here are the screenshots of the message and files in the cache:

I have searched for solutions and tried some of them but nothing could solve the issue. Tried different entries in the package.json file for homepage. Changed the manifest.json and index.html to be exactly the same like in this template.

Basicaly the only difference between our and this template is the stuff inside the App React Component. So it's strange to me that Compoenent could have any effect on the service worker.

Could it be that the lazy loaded components in App are making this problem?
Would removing clientsClaim in the SW solve this issue?

I would rather leave the files from this template the same and unchanged if it's possible.

This issue is not related with ur repo but it will will be helpful if u can help me here.
I created one react app with CRA and integrated service worker to cache mainly JS and CSS files. When I ran the build for 2nd time and reload my page. It's still loading the 1st build JS files (It should load the 2nd JS files from server and then should load from the cache in subsequent loads).

When I manually empty the cache and hard reload option then this time New js files load from the network and subsequent loads the correct JS files.

How can we resolve this as I am going to use this code in app where my code will run in the browser. I don't want to provide some WA like giving a button to the user to hard reload.

Is workbox providing some solution to this? Please check below code. https://github.com/rsoni5519/sw-app

I'd like to use the Cache First strategy (the one which is already implemented) only when the app is installed (display-mode: standalone), and use the Network First strategy when the app is being visited from the browser.

The reason for this mix of strategies is that I believe the user expects the concept of versioning to exist only in apps, not in websites (which should always show the latest version).

What needs to be added to the service-worker.js file in order to achieve such effect?

@testing-library dependencies are missing in both templates, type dependencies are also missing in the typescript template.

If you create an app using the template, change the serviceWorkerRegistration.unregister to serviceWorkerRegistration.register and deploy to heroku, it will give the site the SSL cert and put it in production mode (the requirements for the service worker to work). Despite this, chrome shows "No matching service worker detected".

I can't figure out where the misconfiguration is.

Can't there be a updated yarn.lock file in the template? I don't like additional activity to be done when I'm creating a project.

I'd love to see some documentation on what the upgrade story is for changes made to these templates. If I bootstrap an application using one of these templates, and they're then updated, how will I go about implementing those changes into an unejected CRA project?

I use npm start and I've noticed that when I do HTTP GET for http://localhost:3000/service-worker.js the website returns the index.html page with HTML MIME type. Same with http://localhost:3000/service-worker.ts.

This causes the SW registration to fail when using npm start.

This issue has already been reported several times: facebook/create-react-app#658 https://stackoverflow.com/questions/57175019/how-can-i-enable-service-worker-in-dev-mode-in-create-react-app#comment117197616_57175043

Please update template for react 18

Use Case: I want to define a custom import { Strategy } from "workbox-strategies"; (that fetches data from IndexedDB, so I can use the registerRoute syntax of Workbox).

https://developers.google.com/web/tools/workbox/modules/workbox-strategies#custom_strategies

GoogleChrome/workbox#2455

Strategy.ts was only introduced in v6.

Will there be any adverse effects if I simply npm i [email protected], along with all the other related packages?
I'll update this issue after I try shortly.

I have an application that is based on cra-template-pwa-typescript, which has been working great on iPads until iOS 16.4.

After updating to iOS 16.4, it no longer works. The application loads on the first load (after clearing website data, for example). Subsequent loads pull an empty index.html from the service worker and the browser displays a blank page.

I reproduced this in a minimal case by creating and deploying a new application based on cra-template-pwa-typescript. I saw the same issue.

Some extra details about how I am reproducing that may not matter

The only code change I made to the template was to register the service worker in index.tsx:

serviceWorkerRegistration.register({
  onUpdate: registration => {
    registration.waiting?.postMessage({ type: "SKIP_WAITING" });
  }
});

I made one configuration change to package.json to deploy it under a context path

  "homepage": "/testpwa",

I built it in node:16.13.2, and deployed it in nginx:1.19

Location sections from my nginx.conf are:

    location /testpwa {
        # First attempt to serve request as file, then
        # as directory, then fall back to redirecting to index.html
        alias /var/www/;

        if ( $uri = '/testpwa/index.html' ) {
          add_header Cache-Control no-store always;
        }

        try_files $uri $uri/ /testpwa/index.html;
    }

    location /testpwa/static {
        alias /var/www/static/;
        expires 1M;
        access_log off;
        add_header Cache-Control "public";
    }

Out of the box the files included in this template trigger ESLint error, see:

REDACTED\src\serviceWorkerRegistration.js
   23:8  error  Missing JSDoc comment  require-jsdoc
   63:1  error  Missing JSDoc comment  require-jsdoc
  110:1  error  Missing JSDoc comment  require-jsdoc
  141:8  error  Missing JSDoc comment  require-jsdoc

I wonder whether this is an issue.

The file in the bundle is called service-worker.ts, but the code refers to service-worker.js

export function register() {
  if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
    const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
    window.addEventListener("load", async () => {
      if (isLocalhost) await validateLocalServer(swUrl);
      registerSW(swUrl);
    });
  }
}

Why do you need all these dependencies

For example I don't see any use of workbox-google-analytics in this template

index.js
serviceWorkerRegistration.register();

If I load the application, the first time it cached all data, into the browser cache, but at the time of the new build release, the browser still showing old data which is already cached, I need to perform a hard reload Ctrl + Shift + R.

Any Fix Available except Cache Buster Technique?

First of all, I'm not sure if this is the right repo to put this.

Running npx create-react-app . --template pwa-typescript, installation fails at a statSync error with a missing gitignore file.

Also, after npx create-react-app . --template pwa and running npm start an error occurs with a missing module web-vitals in ./src/reportWebVitals.js. Manually installing web-vitals with npm i --save web-vitals fixed it.

Sorry I don't have screenshots, npm start command cleared my terminal.

Node version: 12.18.3
npm version: 6.14.6

Hi everybody, I'm doing my pwa project but I can not find a way to open the debugging mode of Workbox. How could I open this one? Thank you so much! (I'm using the default registration code from React).

Many critical security vulnerabilities.

Hey @jeffposnick

I have a client with a CRA site who wants to install a PWA with only a fallback "you're offline" page.

In which case I can simply override the contents of service-worker.ts/js

I wondered if it's a common request? If so I'm happy to work on a PR to add it as a cra-template?

The below is a basic working version (assuming /public/offline.html exists

e.g. cra-template-pwa-fallback-page & cra-template-pwa-fallback-page-typescript

/// <reference lib="webworker" />
/* eslint-disable no-restricted-globals */

declare const self: ServiceWorkerGlobalScope;

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const ignored = self.__WB_MANIFEST;

self.addEventListener("install", (event) => {
  event.waitUntil(
    (async function () {
      const cache = await caches.open("static-v1");
      await cache.addAll(["offline.html"]);
    })()
  );
});

self.addEventListener("activate", (event) => {
  event.waitUntil(
    (async function () {
      if (self.registration.navigationPreload) {
        await self.registration.navigationPreload.enable();
      }
    })()
  );
});

self.addEventListener("fetch", (event) => {
  const { request } = event;
  // Always bypass for range requests, due to browser bugs
  if (request.headers.has("range")) return;
  event.respondWith(
    (async function () {
      const cachedResponse = await caches.match(request);
      if (cachedResponse) return cachedResponse;
      try {
        const response = await event.preloadResponse;
        if (response) return response;
        return await fetch(request);
      } catch (err) {
        if (request.mode === "navigate") {
          return caches.match("offline.html");
        }
        throw err;
      }
    })()
  );
});

export {};

At the moment, I'm using React 16.8 on my project. How could I use 'cra-template-pwa-typescript' for my React version? I found the latest React version it supports the service worker better the older. Thank you so much!