After building the project with create-react-app, and hosting it on a webserver, when you visit your website using your smartphone, and click on the "Add to home screen" button in the browser, a shortcut of your website (pwa?) gets created on your smartphone home screen,
When you open this shortcut, a loading page shows up, this loading page comes from the "./public/manifest.json" file which is in your React project,
The manifest.json file includes some options, such as changing the starter screen background color, and the title which shows down in the bottom, ex:
the following file results in the following output:
{
"short_name": "Catering",
"name": "Catering and logistics",
"icons": [
{
"src": "favicon.ico",
"sizes": "100x100 64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "icon.png",
"type": "image/png",
"sizes": "100x100"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "orange"
}
You see, there aren't many options, I want to design something which looks as follows:
So in order to do so, I should be able to write some code,
for example some CSS, some Jsx or HTML or whatever.
How to do that? where I can write the code for this loader page? and what is its name?
Related
I have read the other posts on this matter and have tried to use the answers provided and none of them worked. I am hoping that someone can help me with this issue. I am building an application using React and AWS Lambdas. I do not have a public folder to place the manifest file into. I have placed the file in the templates folder that stores my html files as well as the root of the project and I am still receiving the error that it cannot be found. I am also not sure why it is complaining about my syntax. I ran it through JSONLint just to make sure that it was indeed valid and no errors were returned. Below is my manifest.json file:
{
"short_name": "bat",
"name": "bat",
"description": "bat",
"icons": [{
"src": "/images/image.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/image.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/?source=pwa",
"background_color": "#3367D6",
"display": "standalone",
"scope": "/",
"theme_color": "#3367D6",
"shortcuts": [{
"name": "bat",
"short_name": "bat",
"description": "bat",
"url": "./?source=pwa",
"icons": [{
"src": "/images/image.png",
"sizes": "192x192"
}]
},
{
"name": "bat",
"short_name": "bat",
"description": "bat espanol",
"url": "./es?source=pwa",
"icons": [{
"src": "/images/image.png",
"sizes": "192x192"
}]
}
]
}
If there is anything else you might need please let me know.
Update
I am still having issues with my project seeing that there is a manifest.json file. The React application was not built using create-react-app. It was built from scratch. I have been brought in to help maintain and add new features. One of these new features is the manifest.json file to convert the website to a PWA. Therefore I have added the <link rel="manifest" href="/manifest.json" /> to both of my html files as there are only two html files in the whole project. I have also created the manifest.json file in the root directory per this article and still no luck with the manifest.json file being read properly as I still receive the 404 (not found) error as well as the Line 1, column 1 Syntax Error.
Just adding the manifest file in /public is not sufficient.
You will also have to add manifest in the index.html head tag.
<link rel="manifest" href="public/manifest.json" />
Try this out.
Add the entire path in the href manifest :
<link rel="manifest" href="your_template_folder/manifest.json" />
Also I didnt have a public folder, but I use manifest .json in another folder for the PWA stuffs and using it this way works.
I'm making an app with React and I wanted to turn it into a PWA, so I've followed this tutorial to add my own caching rules. The service worker works and the template looks like this:
function run() {
if ('function' === typeof importScripts) {
importScripts(
'https://storage.googleapis.com/workbox-cdn/releases/3.5.0/workbox-sw.js'
);
/* Global workbox */
if(!workbox) return;
workbox.setConfig({ debug: false });
/* Injection point for manifest files. */
workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);
/* Custom cache rules */
workbox.routing.registerRoute(
({ url }) => url.origin === "https://www.instagram.com",
workbox.strategies.cacheFirst({
cacheName: 'instagram',
plugins: [
new workbox.expiration.Plugin({ maxAgeSeconds: 24 * 60 * 60 }),
],
})
);
}
}
run();
The SW works and it caches what it's supposed to. The manifest is passing, the start_url field is the same as the subfolder I'm hosting the React App in, but I still get the error
No matching service worker detected. You may need to reload the page, or check that the scope of the service worker for the current page encloses the scope and start URL from the manifest.
My manifest looks like this:
{
"short_name": "ReactApp",
"name": "My React App",
"description": "blah blah blah",
"icons": [
{
"src": "favicon.ico",
"sizes": "16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/reactapp",
"display": "standalone",
"theme_color": "#7b1fa2",
"background_color": "#7b1fa2"
}
As I've said, the service worker does its job perfectly, but the browser just doesn't seem to deem it installable. What could it be?
Turns out my manifest.json was missing a single character. After running lighthouse audits, I found out the service worker's scope was https://example.net/reactapp/ while the start_url was https://example.net/reactapp without a slash at the end. So all I did was change this:
{
...
"start_url": "/reactapp",
...
}
...to this:
{
...
"start_url": "/reactapp/",
...
}
While running react app my console always shows this error message.
> "Error while trying to use the following icon from the Manifest:
> http://localhost:3000/favicon.ico (Resource size is not correct - typo
> in the Manifest?)"
Why this is showing?
Change sizes in the manifest.json.
Try this:
"sizes": "16x16"
Go to the index file and comment out <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
I was having the same issue. If you open up your manifest.json located in the public folder of you'll notice a bunch of specifications for icons. If you deleted them when cleaning up your app or added one that does not fit the parameters within the manifest you will get the error you're getting. Edit the "src" within the manifest for your new favicon.ico, or delete the ones your not using and your problem should disappear.
Have a look here as well:
What is public/manifest.json file in create-react-app?
In public > manifest.json change this:
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
]
to this:
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
]
And do not throw away the favicon.ico file. This keeps a placeholder for a custom favicon, you may want to add later on.
The issue was with the icon I was no longer using still in manifest.json. Once that information was removed, I did not see any error anymore
You have to check if value of sizes attribute in your manifest.json matches with the real image size in the icon file! If not you have to:
Resize your image file with an image editor
Or change the sizes value with the correct one. In this case I'm not sure there are standard values, I haven't found anything about them... but I will take care to put a squared size!
Try to change the "x" to "*"
Go to your index.html file and comment out the line
<!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
if you have this error
Error while trying to use the following icon from the Manifest
You have just to verify the src attribute if it matches the right path to your png file.
I am trying to change the header / search bar menu colour on mobiles for a website with the below code within the <head> tags.
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#313131">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#00f800">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#00f800">
This however is not working for me and so have tried also with the mobile manifest json file placing this in the header:
<link rel="manifest" href="manifest.json" />
Where manifest.json is like below:
{
"short_name": "Maps",
"name": "Google Maps",
"icons": [
{
"src": "/images/icons-192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/icons-512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/maps/?source=pwa",
"background_color": "#3367D6",
"display": "standalone",
"scope": "/maps/",
"theme_color": "#3367D6"
}
This has also not worked so have checked over stackoverflow and noticed that not having a valid ssl certificate may also be a cause and so added one to the site however am still getting the same issue.
The colour does change slightly to a darker grey so does seem to do something however not the colour I am after. I have used a range of hex codes from examples on here as well as from sites that I can see working on the same mobile I am testing on so do not believe it is a problem with the mobile or the colours being used.
I'm wondering if there are any other causes for this now working?
I'm trying to use App Manifest on my android mobile phone with my AngularJs/Ui-router application, it's working, but not as expected.
When I start the WebApp, it starts on the index.html, but not with the default route activate. For example, it shows up the menu, and some html I have on my index file, but it doesn't navigate to the homepage, where I have other html to build the page.
If after the initial load I start navigating with the menu, everything works as expected, I can call the states, request data from the server, etc... Is just the first load that is not working. How can I fix this?
This is my manifest:
{
"name": "Web App",
"icons": [
{
"src": "favicon-64.png",
"sizes": "64x64",
"type": "image/png",
"density": 1.0
}
],
"theme_color": "#8d2515",
"background_color": "#FFFFFF",
"start_url": "index.html",
"display": "standalone",
"orientation": "portrait"
}
The issue is your "start_url". This should most likely be set to "./".
This should be the relative URL of your default route.