I have a React based PWA deployed on AWS Amplify and I'm trying to cache a few PDF documents for offline use. Using USB debugging I found that the documents are effectively added to the cache. However, when I try to open a document in offline mode, I'm presented with an blank page which seems to correspond to the bare index.html of my app. My documents are located in public/documents, and service-worker.js has this added at the end:
var CACHE_NAME = "app-documents";
var urlsToCache = [
"/documents/document_1.pdf",
"/documents/document_2.pdf",
"/documents/document_3.pdf"
];
self.addEventListener("install", event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(function (cache) {
return cache.addAll(urlsToCache);
})
);
});
I'm linking from my app to the documents with a simple hyperlink:
<p>Document</p>
Related
PWA Application Cache error
I'm creating a PWA Application with React. I've created a fallback page for when the application is offline. I would like to have a image showing when offline, so I cached it successfully on localhost but when deployed on Vercel, the caching isn't right.
On localhost png caches as image/png.
localhost screenshot
When deployed on Vercel, caches content is Text/Html
vercel screenshot
const staticCache = "site-static-v1";:
const assets = [
"index.html",
"offline.html",
"script/useSW.js",
"assets/Logo-offline.png",
];
self.addEventListener("install", (event) => {
event.waitUntil(
caches.open(staticCache).then((cache) => {
cache.addAll(assets);
})
);
});
Anyone knows how to solve this issue?
I'm using React (not React Native) and I'm trying to use Web Share Api to share some text and an url through my app. However, when I open any app to share, it changes from the text I've put to a default text from React local development.
Yes, I'm using HTTPS. Yes, I'm in a browser that supports Web Share Api (Safari 13.0.4). It does share correctly, but just not using the text I provided and yes a generic text of:
"React App
localhost
this website was created using create-react-app"
This is the function I use to share:
const handleClick = () => {
if (navigator.share) {
navigator
.share({
title: "Something",
text: "Hello, please come visit my website",
url: "www.website.com.br",
})
.then(() => {
console.log("Successfully shared");
})
.catch((error) => {
console.error("Something went wrong", error);
});
}
};
Why is React overriding my share and how can I avoid that?
Here's a gif of it happening
This is not a problem with the Web Share API or its implementation. The Notes application supports only the url attribute, and displays a sample based on the url's metadata.
I'm using React (not React Native) and I'm trying to use Web Share Api to share some text and an url through my app. However, when I open any app to share, it changes from the text I've put to a default text from React local development.
Yes, I'm using HTTPS. Yes, I'm in a browser that supports Web Share Api (Safari 13.0.4). It does share correctly, but just not using the text I provided and yes a generic text of:
"React App
localhost
this website was created using create-react-app"
This is the function I use to share:
const handleClick = () => {
if (navigator.share) {
navigator
.share({
title: "Something",
text: "Hello, please come visit my website",
url: "www.website.com.br",
})
.then(() => {
console.log("Successfully shared");
})
.catch((error) => {
console.error("Something went wrong", error);
});
}
};
Why is React overriding my share and how can I avoid that?
Here's a gif of it happening
This is not a problem with the Web Share API or its implementation. The Notes application supports only the url attribute, and displays a sample based on the url's metadata.
I built a Progressive Web App with ReactJS and have an issue. I am using mockApi to fetch the data.
When offline, my app doesn't work since the service worker only caches static assets.
How can I save HTTP GET calls from mockApi into the cache storage?
Along with your static assets, you can define which URLs do you want to cache:
var CACHE_NAME = 'my-cache_name';
var targetsToCache = [
'/styles/myStyles.scss',
'www.stackoverflow.com/'
];
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
return cache.addAll(targetsToCache);
})
);
});
Then you have to instruct your service worker to intercept the network requests and see if there is a match with the addresses in the targetsToCache:
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
// This returns the previously cached response
// or fetch a new once if not already in the cache
return response || fetch(event.request);
})
);
});
I wrote a series of articles about Progressive Web Apps if you are interested in learning more about it.
I'm trying to create a React PWA from scratch. So far my project outputs the minified files to a dist/js folder.
In my service worker file I'm using Workbox to precache the app. This is my setting so far:
importScripts("./node_modules/workbox-sw/build/workbox-sw.js");
const staticAssets = [
"./",
"./images/favicon.png",
]
workbox.precaching.precacheAndRoute(staticAssets);
Currently if I enable offline from dev tools > Service Workers, it throws these errors and the app fails to load:
3localhost/:18 GET http://localhost:8080/js/app.min.js net::ERR_INTERNET_DISCONNECTED
localhost/:1 GET http://localhost:8080/manifest.json net::ERR_INTERNET_DISCONNECTED
3:8080/manifest.json:1 GET http://localhost:8080/manifest.json net::ERR_INTERNET_DISCONNECTED
logger.mjs:44 workbox Precaching 0 files. 2 files are already cached.
5:8080/manifest.json:1 GET http://localhost:8080/manifest.json net::ERR_INTERNET_DISCONNECTED
How can I fix this?
this means your resources are not getting cached properly,
you need to add them to cache before accessing,
workbox by default do it for you.
it shows 2 files cached, as they present in your array, expected result
same do it for all remaining too.
const staticAssets = [
"./",
"./images/favicon.png",
"./js/app.min.js",
"./manifest.json",
{ url: '/index.html', revision: '383676' }
]
you can try to add eventlistener,
self.addEventListener('install', event => {
console.log('Attempting to install service worker and cache static assets');
event.waitUntil(
caches.open("staticCacheName")
.then(cache => {
return cache.addAll(staticAssets);
})
);
});
self.addEventListener('fetch', function(event) {
event.respondWith(caches.match(event.request)
.then(function(response) {
if (response) {
return response;
}
return fetch(event.request);
})
);
});