Develop Reference

How Edit ServiceWorker.js .Net Core 6

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": "/"
}

React PWA standalone feature is not working in IOS

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"
}
]
}

How to convert a React.js app into a PWA?

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.

Android PWA what do I do with my manifest and service workers?

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.

Progressive web application - not honouring screen orientation

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"
}