aneagoie / robofriends-pwa Goto Github PK

When opening the link aneagoie.github.io/robofriends-pwa/ in chrome browser, no link are shown to install the PWA to desktop. When running Lighthouse in chrome devtools this message appears:

This page is controlled by a service worker, however the start_url (https://aneagoie.github.io/?source=pwa) is not in the service worker's scope (https://aneagoie.github.io/robofriends-pwa/)

Maybe the /robofriends-pwa/ are missing in start_url inside manifest.json

Well, I've spent nearly three hours on figuring out what the heck with robofriends and why I can't manage to set a service-worker work. As it turned out.... you should install all those packages:

npm install [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected]

It's relevant today.... the other day you may need to run npm update

then, you need to copy three files (you may download from my repo)
https://github.com/hazartilirot/robofriends-pwa/tree/main/src

reportWebVitals.js
service-worker.js
serviceWorkerRegistration.js

Once you finished. Open your index.js and import two dependencies

import * as serviceWorkerRegistration from './serviceWorkerRegistration';
import reportWebVitals from './reportWebVitals';

Below

ReactDOM.render(
  <React.StrictMode>
    <Provider store={ store } >
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

Insert the following code:

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://cra.link/PWA
serviceWorkerRegistration.register();

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

In case you're wondering how I get the info. You may create any directory, enter to it and run the command
npx create-react-app my-app --template cra-template-pwa