jeffposnick / create-react-pwa Goto Github PK

The version of react-scripts I'm using is 0.4.1 and adding

<link rel="manifest" href="manifest.json">

does not work because there is a loader on webpack.config.prod.js to resolve links with href. The output is:

<link rel="manifest" href="[object" object]>

To fix that I edited the /node_modules/react-scripts/config/webpack.config.prod.js like that:

// JSON is not enabled by default in Webpack but both Node and Browserify
// allow it implicitly so we also enable it.
{
  test: /\.json$/,
  exclude: /\/manifest.json$/, // ADD THIS!
  loader: 'json'
},

And add this block inside the loaders:

// A special case for manifest.json to place it into build root directory.
{
  test: /\/manifest.json$/,
  loader: 'file',
  query: {
    name: 'manifest.json?[hash:8]'
  }
},

Then link on index.html this way

<link rel="manifest" href="./manifest.json">

With this configuration you don't need to add cp manifest.json build/ to the build script on package.json

I follow README to add PWA support on my friend's webapp which is builded by create-react-app
I also add some modification for iOS safari support (in index.html, you may check here: https://github.com/ArvinH/type_instructor/blob/master/index.html#L7 )
cache-polyfill added too.

here's the link of webapp
https://blog.arvinh.info/type_instructor/

It looks good when it open from home screen and
I can test it with chrome devtool on my mac (it will show my resource comes from service worker)

but it doesn't work when my phone turn off nettwork
I also try a clean app: https://blog.arvinh.info/react-pwa-boilerplate/
doesn't work either.

the only workable sample I found is this one which is follow the google developer doc
https://github.com/lichin-lin/typhoonPWA/ (not use sw-precache)

and this one sometimes work (use offline-plugin for webpack):
https://github.com/paulhoughton/react-pwa

Did I misunderstand something? seems like my service worker didn't work properly.

screencast

This link https://jeffposnick.github.io/create-react-pwa/ is no longer accessible.

Please kindly fix the deployment or edit the documentation.

I am not sure to understand this sentence in your readme.
When running a production server locally, make sure you use a different port than 3000, to ensure the service worker does not inadvertantly take control of the development environment.

Can we test service workers locally (with classic method npm start) with your changes?

where is service-worker.js stored?

What licence is this code under? Same as CRA?

https://github.com/facebookincubator/create-react-app/blob/master/LICENSE

...now that GitHub allows publishing any directory from any branch?

While not strictly necessary, a new npm run gh-pages script was added in, relying on the gh-pages module.

Hi,
Our main domain is 8 characters long, so it's matching default dontCacheBustUrlsMatching regex: "/.\w{8}./".

My workaround was to restrict this config to "/main.\w{8}./". This works for us, however I believe that proper solution would be to ignore domain part at all. Maybe just use relativeUrl instead of absoluteUrl in createCacheKey? What do you think?

I'm struggling with java ArrayList,
My problem that is I have three different objects with a different prop, but my ArrayList storing three different obj with different "names" prop accept the "money" prop its same in all three obj.
anyone,

Here how I stored the object.

public Member(String email, int memberShipNumber, int money)
    {
        // initialise instance variables
        this.companions = new ArrayList<Friend>();
        this.money = money;
        this.email = email;
        this.memberShipNumber = memberShipNumber;
        setFriends(friends);
    }

    public void storeFriend(Friend friend){
        companions.add(friend);
    }

    public void listFriends(){
        companions.stream().forEach((friend) ->
                System.out.println(friend.toString()));
    }

The Main Method.

public class Main{
    private Friend friend;

    public static void main(String[] args) {

        Website website = new Website("Club 18");
        Member member = new Member("[email protected]", 787989, 500);
        
        Friend friend1 = new Friend("friend1", 100);
        Friend friend2 = new Friend("friend2", 7000);
        Friend friend3 = new Friend("friend3", 5555);

        member.storeFriend(friend1);
        member.storeFriend(friend2);
        member.storeFriend(friend3);

        website.memberLogin(member);
   }
}

This is the result that I have gote.

Friend{name 'friend1 money '5555}
Friend{name 'friend2 money '5555}
Friend{name 'friend3 money '5555}

when I run the build it creates service-worker.js in my project directory and caches:

• yarn.lock
• sw-precache-config.js
• README.md
• node_modules/
  ...everything...

Hi Jeff,

I have downloaded the code and tried to use it the same way as https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html

I have tried from the node command
1/ Cd my folder
2/ npm start

It doesn't work. I get the error message

'react-scripts' is not recognized as an internal or external command,
operable program or batch file.

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "start"
npm ERR! node v6.9.1
npm ERR! npm v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: react-scripts start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'react-scripts start'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the create-react-pwa package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! react-scripts start
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs create-react-pwa
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls create-react-pwa
npm ERR! There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\Progressive\pwa\npm-debug.log

Hi there,

Thanks for the last update.. pwa (service-worker + manifest) by default is nice, but there's an issue that's still happening (I had the same thing when adding sw/manifest manually).

If you open Chrome Dev Tools -> Application and test the "Add to homescreen link" you'll get this:

I'm still not sure what's the cause.. I've tried using a different MIME type for the .ico extension (image/x-icon), removing the type, different sizes' values.. adding a png file and using that instead but I always had an error when trying the "Add to homescreen" link.

So I decided to copy the images folder + update the manifest to match the AirHorner PWA (https://airhorner.com/) and it worked!! No errors when adding to homescreen.

https://developer.mozilla.org/en-US/docs/Web/Manifest has no details on this, but we might need some PNGs to address the issue.

https://jeffy.info/create-react-pwa/ is currently "Page Not Found"

Hello,

The home screen banner doesn't work for me
https://pwademoheff.firebaseapp.com/
What am I doing wrong please?

git clone
npm install
npm run build
firebase init (build folder)
firebase deploy

I notice that I am missing a file https://jeffy.info/jekyll-behavior-import.js in the source

It could be helpful to add a 'How to use' section for folks who've never used create-react-app before.

I did npm start on this but i get:
Uncaught (in promise) DOMException: Failed to register a ServiceWorker: The script has an unsupported MIME type ('text/html').
What am I doing wrong?
The file build/service-worker.js exists.
If I copy it to /build or /src I don't get that error.
Where is the correct location for the file?

ServiceWorkers are great but most of my users are iPhone safari users and/or iPhone with "Add to Home screen".
iOS still doesn't support Service Workers so you have to use Application Cache. Not very progressive but definitely something we have to contend with.

PWA are only meant for chrome or other browser's as well?

Hi,

I have tried the great "create-react-pwa" to build an app that will work on my phone.
Do you know how many times should I visit the app in order for my android phone to suggest to add the banner for a quick launch from the home screen?
Did I do something wrong see my url below?
https://myhousewealth.firebaseapp.com

The example provided in the document https://jeffy.info/create-react-pwa/ installed the icon banner after just a few visits but no luck with my app.

Many thanks

Ed

Hi @jeffposnick,

I have made a demo about progressive web app using this repository and I would like to share. Does PR welcome?

Here is a repo: https://github.com/nndung179/create-react-pwa-demo

If you happen to run your production server on localhost (to test the build), the service worker is registered as desired.

However, you the service worker then gets in the way of react-scripts start/yarn start's hot reloading.

I will make a PR recommending an edit to the HTML if statement that is working for us:

<script>
    if (
      'serviceWorker' in navigator &&
      window.location.hostname !== 'localhost'
    ) {
      window.addEventListener('load', function() {
        navigator.serviceWorker.register('/service-worker.js');
      });
    }
  </script>

When I run "npm run build"

it fails on sw-precache --root='build/' --static-file-globs='build/_/!(_map)'

C:\Users\jordao.barroso\projects\teste-react>  "C:\Users\jordao.barroso\projects\teste-react\node_modules\.bin\\node.exe"  "C:\Users\jordao.barroso\projects\teste-react\node_modules\.bin\\..\sw-precache\cli.js" --root='build/' --static-file-globs='build/**/!(*map*)'

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
npm ERR! node v6.4.0
npm ERR! npm  v3.10.3
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: `react-scripts build && cp manifest.json build/ && sw-precache --root='build/' --static-file-globs='build/**/!(*map*)'`
npm ERR! Exit status 255
npm ERR!
npm ERR! Failed at the [email protected] build script 'react-scripts build && cp manifest.json build/ && sw-precache --root='build/' --static-file-globs='build/**/!(*map*)''.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the teste-react package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     react-scripts build && cp manifest.json build/ && sw-precache --root='build/' --static-file-globs='build/**/!(*map*)'
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs teste-react
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls teste-react
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\jordao.barroso\projects\teste-react\npm-debug.log

but if i run "sw-precache --root='build/' --static-file-globs='build/_/!(_map)'" separately in cmd or git bash it works.