I am trying to build a PWA with CRA and ran into some issues. However, even though I have registered the user (serviceWorker.register() in index.js) and can store the files in cache storage and run it offline, I still cannot pass the audit and I get (I've built my web app already, so it's running in production mode):
1.start_url does not respond with a 200 when offline Unable to fetch start URL via service worker.
2.Current page does not respond with a 200 when offline
3.Does not register a service worker that controls page and start_url
Which in my opinion is caused by wrong start_url.
I have a manifest.json and index.html in public folder and serviceWorker.js, index.js inside the src folder (inside public). and I get service-worker.js and manifest.json in the build folder after I build the app.
I've tried changing the start_url to "." , "index.html", "/" and some other options, but it did not change anything, still the same error.
Edit
I am also getting this
Network tab in Chrome
Console in Chrome
Error in this line in serviceWorker.js:
fetch(swUrl)
Seems like service-worker.js, manifest.json are not precached. This is weird, because from my understanding it should be precached automiatically. What is the solution here ?
Related
This is the message I get when I go to view my website after completing hosting setup.
Welcome Firebase Hosting Setup Complete You're seeing this because
you've successfully setup Firebase Hosting. Now it's time to go build
something extraordinary!
I've done the following (per firebase support):
Run the command, firebase use to make sure the local config is pointed
to the correct Firebase project.
I've made sure that an index.html file is present.
However, I've not been able to do this (per firebase support):
I can't check the firebase.json file to make sure the public folder
(or public attribute) is the same as the location of your hosting
files.
It's because it looks like firebase init failed to create the firebase.json file as they are not in my root directory, so I'm suspecting this to be the problem.
I'm deploying from VS Code, please.
How can I get that file created? I am scheduled to launch this site tomorrow and I can't get any further responses from support (presumably it's cos of the weekend).
Many thanks for any help.
We have added the PWA to our Ionic application. ngsw-config.json,and manifest.webmanifest fiels and assets folder are created and index.html file is included with manifest.webmanifest reference and service worker is included in app.module.ts file successfully. But when We run audit the application in browser we are getting no matching service worker detected. You may need to reload the page, or check that the service worker for the current page also controls the start URL from the manifest error.
I am unable to get my ionic application to launch with different build/www directories when using the "ionic serve" command
I recently purchased a NAS in order to keep my source code safe and backed up. I thought the best way to do this was move my GitHub repository to my NAS drive. (Possibly my first mistake, but that seemed to be the best option from my research). Since there is no need to keep the builds, temp files or www files on the NAS I thought the best option would be to configure the ionic application so that these files were stored locally and I assumed that it would build more quickly locally than over the network storage (given my LAN bandwidth constraints).
On reading the IONIC configuration documentation (https://ionicframework.com/docs/developer-resources/app-scripts/) I made the following changes to the package.json file:
"config": {
"ionic_root_dir":"C:/Users/username/Development/",
"ionic_tmp_dir":"C:/Users/username/Development/tmp/",
"ionic_src_dir":"Y:/Dev/GitHub/mynewapp/src/",
"ionic_www_dir":"C:/Users/username/Development/www/",
"ionic_build_dir":"C:/Users/username/Development/build/"
}
C=local and Y=NAS.
After making these changes and saving the file I started the ionic server with the "ionic serve" command. However, after the build completed and the browser opened I received only a blank page. On clicking F12 the console provided the following errors:
HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
GET - http://localhost:8100/build/main.css
HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
GET - http://localhost:8100/build/polyfills.js
HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
GET - http://localhost:8100/build/vendor.js
HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
GET - http://localhost:8100/build/main.js
SCRIPT5009: SCRIPT5009: 'angular' is not defined
I checked the referenced directories above and the build and www directories were populated with data.
On reversing the changes by removing the above configuration and rerunning the "ionic serve" command the browser launched and the application ran as expected.
I have so far been unable to find a solution. Any help greatly appreciated.
I am trying to serve a React app from Google Cloud Storage. I built the React project and uploaded the contents of the build/ directory to Google Cloud Storage. I made sure every file inside is publicly accessible. However when I go to my Google Cloud bucket link http://storage.googleapis.com/BUCKET_NAME/, I get some XML about a permission error:
<Error>
<Code>AccessDenied</Code>
<Message>Access denied.</Message>
<Details>
Anonymous users does not have storage.objects.list access to bucket BUCKET_NAME.
</Details>
</Error>
Then, I tried to navigate to the URL http://storage.googleapis.com/BUCKET_NAME/index.html, which brings up a blank page. In the JS console, there are errors:
index.html:1 GET http://storage.googleapis.com/static/css/main.9a0fe4f1.css
index.html:1 GET http://storage.googleapis.com/static/js/main.871fec8f.js
These errors look like the BUCKET_NAME is not in the URL that was fetched. However, my built index.html is referencing them relatively, as so:
<script type="text/javascript" src="/static/js/main.871fec8f.js"></script>
I'm not sure what's going on, there are two issues. First is that index.html is not the default served page when going to the bucket URL. Second issue is that the relative paths don't seem to be resolving the right URL. Any help is appreciated.
This was a problem on my end. This method should work.
I just put the build folder to the root folder of nginx server, e.g. /var/www/html, but nothing is visible.
When inspect from browser, the root content is empty?
enter image description here
Check your developer console for possible errors. You can also use React Developer Tools to debug your app. You can provide your non-sensitive code to make us understand it better.