I've created a multi-page Progressive Web App but there are some issues on side pages.
Using Chrome's lighthouse on index.html page, user will be provided with the install notification.
Inside dashboard.html page, lighthouse shows this message:
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.
Following code is part of dashboard's header
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="apple-touch-icon" sizes="76x76" href="assets/img/apple-icon.png">
<link rel="manifest" href="manifest.json" crossorigin="anonymous">
Manifest.json is currently set as follows
{
"name": "AtcApp",
"short_name": "ATC",
"lang": "it",
"start_url": "https://myapplication.com",
"scope": "/",
"display": "standalone",
"background_color": "#fdfdfd",
"theme_color": "#db4938",
"orientation": "portrait-primary",
"icons": [
{
"src": "assets/img/icons/icon-72x72.png",
"type": "image/png", "sizes": "72x72"
},
{
"src": "assets/img/icons/icon-96x96.png",
"type": "image/png", "sizes": "96x96"
},
{
"src": "assets/img/icons/icon-128x128.png",
"type": "image/png","sizes": "128x128"
},
{
"src": "assets/img/icons/icon-144x144.png",
"type": "image/png", "sizes": "144x144"
},
{
"src": "assets/img/icons/icon-152x152.png",
"type": "image/png", "sizes": "152x152"
},
{
"src": "assets/img/icons/icon-256x256.png",
"type": "image/png", "sizes": "256x256"
}
]
}
I've tried to change scope inside manifest.json and other improvements found in many online manuals.
Related
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"
}
]
}
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"
}
This seems to be an old question here in Stackflow, but I can't get any posted solution to work.
The JSON validates well in validators, but I keep getting the below error. What can be the problem?
Error: manifest icons Line 1 not , column: 1, Unexpected token.
{
"name": "slangoApp",
"icons": [
{
"src": "\/android-icon-36x36.png",
"sizes": "36x36",
"type": "image\/png",
"density": "0.75"
},
{
"src": "\/android-icon-48x48.png",
"sizes": "48x48",
"type": "image\/png",
"density": "1.0"
},
{
"src": "\/android-icon-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "\/android-icon-96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{
"src": "\/android-icon-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": "3.0"
},
{
"src": "\/android-icon-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
}
]
}
manifest.json should be present in a directory where your index.html is present. Not in any other directory. If you are using react its possible that you might have misplaced it in src directory.
It's because the browser does not understand the MIME type of the manifest file and thus cannot find it. In Chrome DevTools > Network > Headers > Content-Type, the content-type of the manifest must match the actual manifest file extension (.json or .webmanifest).
In ASP.NET, you need to declare the file type in web.config:
<staticContent>
<mimeMap fileExtension=".json" mimeType="application/json" />
<mimeMap fileExtension=".webmanifest" mimeType="application/manifest+json" />
</staticContent>
This "name": "slangoApp", shoulb be like this "name": "slangoapp",
Please remember it should not contain uppercase letters of spaces.