React PWA not installable - reactjs

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/",
...
}

Related

You do not have permission to use blocking webRequest listeners. Be sure to declare the webRequestBlocking permission in your manifest

I try to develop my first chrome extension with react js. when I try to blocking a URL in the chrome extension using chrome.webRequest API In error page shows two errors.
'webRequestBlocking' requires manifest version of 2 or lower.
Unchecked runtime.lastError: You do not have permission to use blocking webRequest listeners. Be sure to declare the webRequestBlocking permission in your manifest.
and I'm declaring the "webRequestBlocking" permission in the manifest file. here is my manifest.json
{
"manifest_version": 3,
"name": "Chrome Extension",
"description": "First Extension",
"options_page": "options.html",
"background": {
"service_worker": "background.bundle.js",
"matches": [
"<all_urls>"
]
},
"action": {
"default_title": "Open Extension",
"default_icon": "icon-34.png"
},
"icons": {
"128": "icon-128.png"
},
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*",
"<all_urls>"
],
"js": [
"contentScript.bundle.js"
],
"css": [
"content.styles.css"
]
}
],
"devtools_page": "devtools.html",
"web_accessible_resources": [
{
"resources": [
"content.styles.css",
"icon-128.png",
"icon-34.png"
],
"matches": []
}
],
"permissions": [
"activeTab",
"tabs",
"webRequest",
"webRequestBlocking"
],
"host_permissions": [
"<all_urls>"
]
}
here is my background.js
chrome.webRequest.onBeforeRequest.addListener(
function(details) {
console.log(details);
return {cancel: true};
},
{urls: ["https://reactjs.org/"]},
["blocking"]
);
and I have tried removing webRequestBlocking but also the same. can anyone help me is there a way to fix this?
the error explains it self 'webRequestBlocking' requires manifest version of 2 or lower. so you can't use webRequestBlocking in manifest version 3 .
but chrome is giving an alternative by using declarativeNetRequestWithHostAccess API witch is used to block or modify network requests by specifying declarative rules
you can check here for more details .
You can change manifest_version to 2 and webRequestBlocking to permissions.

Manifest JSON file returning 404 not found error along with a syntax error

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.

BrowserRouter with trailing / causes manifest error

if I use a path like this one without a trailing slash / I dont get any errors...
<Route path = '/confirm_email' component = {Confirm} />
if I add a trailing slash like this
<Route path = '/confirm_email/' component = {Confirm} />
or like
<Route path = '/confirm_email/:test' component = {Confirm} />
or even like
<Route path = '/confirm_email/:test/' component = {Confirm} />
The error I get in the browser console is Manifest: Line: 1, column: 1, Syntax error. and when I click the error it points at <!DOCTYPE html> If I add a console.log() to the page, the log shows first then the error.
I have found that If i remove the below code from the index.html page the error stops.
<script>
const darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches || false;
const favicon = document.getElementById('favicon');
const manifest = document.getElementById('manifest');
function switchIcon(darkMode) {
if (darkMode) {
favicon.href = 'favicon-dark.ico';
manifest.href='manifest-dark.json'
} else {
favicon.href = 'favicon-light.ico';
manifest.href='manifest-light.json'
}
}
window.matchMedia('(prefers-color-scheme: dark)').addEventListener( "change", (e) => switchIcon(e.matches));
switchIcon(darkMode);
</script>
The contents of manifest-dark.json is
{
"short_name": "React App",
"name": "Create React App Sample",
"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"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
I do initially load the light version, then switch to the dark version.
<link rel="manifest" id='manifest' href="%PUBLIC_URL%/manifest-light.json" />
Seems like there was path issue as you had href="%PUBLIC_URL%/manifest-light.json" in your link tag but not in your JS code manifest.href='manifest-dark.json'
Since that URL is injected from your build process you would have to plug that variable in your JS code as well.

WebExtensions: browser.webRequest.onCompleted never fires

I'm using the Firefox WebExtensions API with the following background script
var log = console.log.bind(console)
log('hello world from browser extension')
// https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/webRequest/onCompleted
var filter = { urls: '<all_urls>' }
var extraInfoSpec = ['tlsInfo', 'responseHeaders']
browser.webRequest.onCompleted.addListener(function(details){
log(`Woo got a request, here's the details!`, details)
}, filter, extraInfoSpec)
log('Added listener')
After loading the script from about:debugging, I see the following output in DevTools:
hello world from browser extension
I do not see any output- there is no data from browser.webRequest.onCompleted.addListener and there is no 'Added listener' message.
How do I make browser.webRequest.onCompleted work?
For completeness, my manifest.json is below:
{
"manifest_version": 2,
"name": "Test extension",
"version": "1.0",
"description": "Test extension.",
"icons": {
"48": "icons/border-48.png"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
],
"permissions": [
"webRequest",
"webRequestBlocking"
]
}
The webRequest API is only available to background scripts. You seem to using it inside a content script.
urls in var filter = { urls: '<all_urls>' } needs to be be an array ['<all_urls>'].
'tlsInfo' in extraInfoSpec doesn't exist, I don't know where it comes from.
You need to specify an additional <all_urls> permission in your manifest.
script.js
var filter = { urls: ['<all_urls>'] }
var extraInfoSpec = ['responseHeaders']
browser.webRequest.onCompleted.addListener(function(details){
console.log(`Woo got a request, here's the details!`, details)
}, filter, extraInfoSpec)
console.log('Added listener')
manifest.json
{
"manifest_version": 2,
"name": "Test extension",
"version": "1.0",
"description": "Test extension.",
"icons": {
"48": "icons/border-48.png"
},
"background": {
"scripts": ["script.js"]
},
"permissions": [
"webRequest",
"webRequestBlocking",
"<all_urls>"
]
}

Using AngularJs with app manifest doesn't load default state

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.

Resources