I am having a PWA in ReactJs. My PWA works as standalone on localhost in IOS, but on real link, it opens with safari after login and is not standalone anymore. please help me.
All the internal links will open with safari and it is like as an external link.
my manifest:
{
"name": "my name",
"short_name": "my name",
"description":"desc",
"lang": "fa",
"start_url": "/law",
"scope": "/law",
"display": "standalone",
"id":"/law",
"theme_color": "#34abc4",
"background_color": "#34abc4",
"icons": [
{
"src": "/law/Assets/Images/logo-package/icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "/law/Assets/Images/logo-package/icon-256x256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "/law/Assets/Images/logo-package/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "/law/Assets/Images/logo-package/icon-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}
Related
I've been using PWA recently and looks in any page request from serviceworker this happens:
Uncaught (in promise) TypeError: Failed to execute 'put' on 'Cache': Request scheme 'chrome-extension' is unsupported
I've searched and found some solutions like:
if(!event.request.url.startsWith('http')){
//skip request
}
but didn't found how I can edit this file. any Idea how to access the default serviceworker.js file or if it can't how to make a custom one?
codes for PWA I used:
Program.cs:
builder.Services.AddProgressiveWebApp(new PwaOptions
{
CacheId = "Worker " + "1",
Strategy = ServiceWorkerStrategy.CacheFirstSafe,
RegisterServiceWorker = true,
AllowHttp = false, // => no diff to switch true
//RoutesToPreCache = "/Home/Contact, /Home/About",
//OfflineRoute = "fallBack.html"
});
manifest.json:
{
"name": "ClickStore",
"short_name": "CS",
"description": "کلیک استور، تجربه یک خرید آنلاین لذت بخش فروشنده کالای دیجیتال نو، استوک و اوپن باکس با بهترین کیفیت و نازلترین قیمت ها",
"icons": [
{
"src": "/Assets/Img/Logo/144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "/Assets/Img/Logo/192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/Assets/Img/Logo/168.png",
"sizes": "168x168",
"type": "image/png"
},
{
"src": "/Assets/Img/Logo/512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"display": "standalone",
"start_url": "/"
}
I am tormented for the second day trying to convert the simplest react web application to PWA. I just can't pass the Lighthouse audit. Can't fix the following problems:
Lighthouse response
manifest.json:
{
"short_name": "Test App",
"name": "TestMe",
"icons": [
{
"src": "icons/icon48.png",
"size": "48x48",
"purpose": "any",
"type": "image/png"
},
{
"src": "icons/icon64.png",
"size": "64x64",
"purpose": "any",
"type": "image/png"
},
{
"src": "icons/icon72.png",
"size": "72x72",
"purpose": "any",
"type": "image/png"
},
{
"src": "icons/icon96.png",
"size": "96x96",
"purpose": "any",
"type": "image/png"
},
{
"src": "icons/icon144.png",
"size": "144x144",
"purpose": "any",
"type": "image/png"
},
{
"src": "icons/icon192.png",
"size": "192x192",
"purpose": "any",
"type": "image/png"
},
{
"src": "icons/icon512.png",
"size": "512x512",
"purpose": "any",
"type": "image/png"
},
{
"src": "icons/icon1024.png",
"size": "1024x1024",
"purpose": "any",
"type": "image/png"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff",
"orientation": "portrait"
}
ServiceWorker.js
const staticCacheName = 's-app-v1'
const assetUrls = [
'index.html',
'offline.html'
]
self.addEventListener('install', async event => {
const cache = await caches.open(staticCacheName)
await cache.addAll(assetUrls)
})
self.addEventListener('activate', async event => {
const cacheNames = await caches.keys()
await Promise.all(
cacheNames
.filter(name => name !== staticCacheName)
.map(name => caches.delete(name))
)
})
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(() => {
return fetch(event.request).catch(() => caches.match('offline.html'))
})
)
});
I reviewed all the guides on youtube, already like a dog, obediently followed all the commands - and nothing! Cloned the repositories left by the authors of these youtube videos (for example: https://github.com/adrianhajdin/project_weather_pwa https://github.com/vladilenm/pwa-intro) - nothing works either. I'm using macOs catalina 10.15, maybe there is some special policy for caching / updating the react application ?, I just don't know what to look for the problem. React.js sees all files, connects correctly, offline html is issued correctly, but the audit does not pass. + Lighthouse requires some PNG images, I have already crammed more than a dozen of them, but Lighthouse is still swearing. Help!)
"Installable" - is the only necessary condition, to install your PWA on a device)) I solve my problem in this way - i just didn't change the original manifest.json generated by react.js.
I Am trying to make a PWA of a static website created using HTML CSS And Javascript. It is working as PWA but the add home screen popup is not appearing in case of Smartphones. But Install button is appearing in Desktop Devices. The code for which is given below:
app.js:
if ("serviceWorker" in navigator) {
navigator.serviceWorker
.register("sw.js")
.then(function (reg) {
console.log("Successfully registered service worker", reg);
})
.catch(function (err) {
console.warn("Error whilst registering service worker", err);
});
}
sw.js:
const staticCacheName = "trippyadiveCache";
const assets = [
"/",
"/404.html",
"/allLocations.html",
"/app.js",
"/favico.png",
"/favicon.svg",
"/favicon.ico",
"/index.html",
"/manali.html",
"/submitBooking.js",
"/css/bootstrap.css",
"css/style.css",
"css/font.css",
"css/fontawesome-all.css",
];
self.addEventListener("install", (evt) => {
evt.waitUntil(
caches.open(staticCacheName).then((cache) => {
console.log("caching cell assets");
cache.addAll(assets);
})
);
});
//activate event
self.addEventListener("activate", (evt) => {
console.log("service worker activated");
});
//fetch event
self.addEventListener("fetch", (evt) => {
console.log("fetch Event", evt);
});
menifest.webmenifest:
{
"short_name": "Trippyadive",
"name": "Trippyadive",
"lang": "en",
"description": "No Price Hike At Peak Season",
"start_url": "index.html",
"background_color": "#ffffff",
"theme_color": "#ffffff",
"dir": "ltr",
"display": "standalone",
"orientation": "any",
"prefer_related_applications": "true",
"icons": [
{
"src": "images/icon/android-icon-192x192-dunplab-manifest-26311.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/apple-icon-180x180-dunplab-manifest-26311.png",
"type": "image/png",
"sizes": "180x180"
},
{
"src": "images/icon/apple-icon-152x152-dunplab-manifest-26311.png",
"type": "image/png",
"sizes": "152x152"
},
{
"src": "images/icon/apple-icon-144x144-dunplab-manifest-26311.png",
"type": "image/png",
"sizes": "144x144"
},
{
"src": "images/icon/apple-icon-120x120-dunplab-manifest-26311.png",
"type": "image/png",
"sizes": "120x120"
},
{
"src": "images/icon/apple-icon-114x114-dunplab-manifest-26311.png",
"type": "image/png",
"sizes": "114x114"
},
{
"src": "images/icon/favicon-96x96-dunplab-manifest-26311.png",
"type": "image/png",
"sizes": "96x96"
},
{
"src": "images/icon/apple-icon-76x76-dunplab-manifest-26311.png",
"type": "image/png",
"sizes": "76x76"
},
{
"src": "images/icon/apple-icon-72x72-dunplab-manifest-26311.png",
"type": "image/png",
"sizes": "72x72"
},
{
"src": "images/icon/apple-icon-60x60-dunplab-manifest-26311.png",
"type": "image/png",
"sizes": "60x60"
},
{
"src": "images/icon/apple-icon-57x57-dunplab-manifest-26311.png",
"type": "image/png",
"sizes": "57x57"
},
{
"src": "images/icon/favicon-32x32-dunplab-manifest-26311.png",
"type": "image/png",
"sizes": "32x32"
},
{
"src": "images/icon/favicon-16x16-dunplab-manifest-26311.png",
"type": "image/png",
"sizes": "16x16"
}
],
"prefer_related_applications": "false"
}
I would like to know where is my fault and how can I rectify it.
Any kind of help would be appriciated.
Thanks in advance.
PS: You can visit https://www.trippyadive.web.app/ to view it live.
You are doing nothing wrong.
If you clear your cache and then use the app on your phone ( android / chrome browser) you will see Add to home screen prompt.
I tested on my phone , and I get the prompt.
I have a web app that I want to notify users to download when viewing on Android. I used PWA Builder to build my service workers and manifest: https://www.pwabuilder.com/
I now have a manifest file, do I just upload this to my root directory?
manifest:
{
"dir": "ltr",
"lang": "en",
"name": "Seek Adventure",
"scope": "/",
"display": "browser",
"start_url": "https://www.seekadventure.net/",
"short_name": "SeekAdventure",
"theme_color": "#ff8040",
"description": "An #optoutside forum for anyone looking for help planning there next outdoor adventure or wants to share their adventures with others!",
"orientation": "any",
"background_color": "transparent",
"related_applications": [],
"prefer_related_applications": false,
"icons": [
{
"src": "/images/assets/favicon-glzu44cb.png",
"type": "image/png",
"sizes": "64x64"
},
{
"src": "/images/c52cd81f-b772-8db2-4964-5780e9748729.webPlatform.png",
"sizes": "44x44",
"type": "image/png"
},
{
"src": "/images/3fd8d17f-4da0-000c-0914-88f09a62a071.webPlatform.png",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "/images/fdf7841f-c005-e322-4e41-d9b997beb0d2.webPlatform.png",
"sizes": "1240x600",
"type": "image/png"
},
{
"src": "/images/1b53345e-9214-10f9-3b27-d9a11d1a6362.webPlatform.png",
"sizes": "300x300",
"type": "image/png"
},
{
"src": "/images/dc7a39e4-e3ad-9489-5fe1-65f029c4f5a8.webPlatform.png",
"sizes": "150x150",
"type": "image/png"
},
{
"src": "/images/934dcf12-e11d-2f60-17a4-cf7529240c69.webPlatform.png",
"sizes": "88x88",
"type": "image/png"
},
{
"src": "/images/85b5b747-256b-049a-425b-f8d57c110834.webPlatform.png",
"sizes": "24x24",
"type": "image/png"
},
{
"src": "/images/0f323aec-4450-d0c3-623c-f35c9edcdd08.webPlatform.png",
"sizes": "50x50",
"type": "image/png"
},
{
"src": "/images/03236d66-5cdf-a8a6-73f9-ecfe05b08fcc.webPlatform.png",
"sizes": "620x300",
"type": "image/png"
},
{
"src": "/images/2a1f7b69-0b45-32d9-ec15-a9ec2de16a35.webPlatform.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/images/5585e3aa-2696-082b-804b-f087d8923570.webPlatform.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "/images/c1943668-4dcf-fe5b-6ae4-a6ebc4f9f99b.webPlatform.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "/images/f37abd30-b572-4008-f307-8c0c674972ec.webPlatform.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "/images/737282cf-e911-bd86-39dc-87b45b7a3a5b.webPlatform.png",
"sizes": "36x36",
"type": "image/png"
},
{
"src": "/images/dd79a596-ca4f-6a28-9c00-8b8038a8fa88.webPlatform.png",
"sizes": "1024x1024",
"type": "image/png"
},
{
"src": "/images/3be7d34f-ba7b-ecb5-579d-467cacd866c4.webPlatform.png",
"sizes": "180x180",
"type": "image/png"
},
{
"src": "/images/51578c8b-2898-5b6c-f935-21dea3f1cbf5.webPlatform.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "/images/535b042a-2502-3835-765b-923293ac8bbd.webPlatform.png",
"sizes": "120x120",
"type": "image/png"
},
{
"src": "/images/f0ab6a28-2fdd-3ca9-6882-5d512562629d.webPlatform.png",
"sizes": "76x76",
"type": "image/png"
}
]
}
It also gave me a couple service worker files below.
pwabuilder-sw.js:
//This is the "Offline page" service worker
//Install stage sets up the offline page in the cache and opens a new cache
self.addEventListener('install', function(event) {
var offlinePage = new Request('offline.html');
event.waitUntil(
fetch(offlinePage).then(function(response) {
return caches.open('pwabuilder-offline').then(function(cache) {
console.log('[PWA Builder] Cached offline page during Install'+ response.url);
return cache.put(offlinePage, response);
});
}));
});
//If any fetch fails, it will show the offline page.
//Maybe this should be limited to HTML documents?
self.addEventListener('fetch', function(event) {
event.respondWith(
fetch(event.request).catch(function(error) {
console.error( '[PWA Builder] Network request Failed. Serving offline page ' + error );
return caches.open('pwabuilder-offline').then(function(cache) {
return cache.match('offline.html');
});
}
));
});
//This is a event that can be fired from your page to tell the SW to update the offline page
self.addEventListener('refreshOffline', function(response) {
return caches.open('pwabuilder-offline').then(function(cache) {
console.log('[PWA Builder] Offline page updated from refreshOffline event: '+ response.url);
return cache.put(offlinePage, response);
});
});
pwabuilder-sw-register.js:
//This is the "Offline page" service worker
//Add this below content to your HTML page, or add the js file to your page at the very top to register service worker
if (navigator.serviceWorker.controller) {
console.log('[PWA Builder] active service worker found, no need to register')
} else {
//Register the ServiceWorker
navigator.serviceWorker.register('pwabuider-sw.js', {
scope: './'
}).then(function(reg) {
console.log('Service worker has been registered for scope:'+ reg.scope);
});
}
If the manifest gets uploaded to the root of my web server do I also upload these two javascript files to the root also?
If so do I just edit the header in my html files and include these two lines to point to the javascript files?
<script src="pwabuilder-sw.js"></script>
<script src="pwabuilder-sw-register.js"></script>
Actually you can put the manifest to the root directory to show it in every app page or you can put it only in the path you want showing it.
About the last question, if you need to add the .js files to your server make sure they aren't in the same place where are the other .js files.
My web app is not honouring the orientation set in my manifest.json:
{
"manifest_version": 2,
"version": "1",
"name": "My App",
"short_name": "My App",
"icons": [
{
"src": "img/myapp/launcher-icon-0-75x.png",
"sizes": "36x36",
"type": "image/png"
},
{
"src": "img/myapp/launcher-icon-1x.png",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "img/myapp/launcher-icon-1-5x.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "img/myapp/launcher-icon-2x.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "img/myapp/launcher-icon-3x.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "img/myapp/launcher-icon-4x.png",
"sizes": "192x192",
"type": "image/png"
}
],
"theme_color": "#43c1b1",
"background_color": "#43c1b1",
"start_url": "/myapp",
"scope": "/myapp",
"orientation": "landscape",
"display": "standalone"
}
Everything else works - the icons and the background colour so why would there be a problem forcing landscape?
Chrome (on mobile) v 57.0.2987
Thanks
Your original manifest.json is correct but it only works on Chrome Canary (version 59) but not on Chrome Stable (version 57).
I was unable to find any mention of it in the release logs though.
I think you are doing it right. Based on this page, you can enforce a specific orientation, which is advantageous for apps that work in only one orientation by using this "orientation": "landscape".
Try to place first the display before the orientation like in this example.
{
"short_name": "Kinlan's Amaze App",
"name": "Kinlan's Amazing Application ++",
"icons": [
{
"src": "launcher-icon-2x.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "launcher-icon-3x.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "launcher-icon-4x.png",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "/index.html",
"display": "standalone",
"orientation": "landscape"
}