I have created a PWA Application and it works fine.
Problem is:
User installing the PWA on Desktop and it works fine but after closing and re-opening it show blank page.
Also on mobile it show blank page after adding the website to home page.
var deferredPrompt;
LINK
https://gogrocery.tk
The problem is with the manifest.json start_url.
{
"name": "front-end",
"short_name": "front-end",
"icons": [
{
"src": "./img/icons/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "./img/icons/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "./index.html",
"display": "standalone",
"background_color": "#000000",
"theme_color": "#4DBA87"
}
Once installed the browser users index.html as the starting URL and that doesn't render the app. You should either change start_url to / or have /index.html render the app.
Add a route for '/index.html' into your default router. Use the same view/component as for '/'
...
routes: [
{ path: '/', name: 'home', component: HomeView },
{ path: '/index.html', component: HomeView }, // Fix for PWA at /index.html
...
Note: Don't use redirect for '/index.html', it doesn't fix the problem on mobile browsers :(
Related
I'm building a progressive web app bundled by webpack which uses service workers generated by workbox. When I ran the Chrome Lighthouse on the web app, however, it complains that:
Current page does not respond with a 200 when offline
start_url does not respond with a 200 when offline
Does not register a service worker that controls page and start_url
More disturbing is that even though this web app works as a PWA on my Windows desktop, it doesn't work on Android Chrome as the "Add to Home Screen" option didn't pop up.
Link to web app: https://alienkevin.github.io/try-elm-rust-pwa/
Link to full repo: https://github.com/AlienKevin/try-elm-rust-pwa/tree/master
Here's the log message proving that the service worker is registered:
Here's my webpack.config.js:
const CopyWebpackPlugin = require("copy-webpack-plugin");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const workboxPlugin = require('workbox-webpack-plugin');
const path = require('path');
module.exports = {
entry: "./bootstrap.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bootstrap.js",
},
mode: "development",
plugins: [
new CleanWebpackPlugin(),
new CopyWebpackPlugin(['index.html', '*.ico', '*.png', 'manifest.json']),
new workboxPlugin.GenerateSW({
swDest: 'sw.js',
clientsClaim: true,
skipWaiting: true,
}),
],
};
Here's my manifest.json:
{
"short_name": "try-elm-rust-2",
"name": "try-elm-rust-2",
"icons": [
{
"src": "./android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "./android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "./index.html",
"display": "standalone",
"theme_color": "#f74c00",
"background_color": "#ffffff"
}
I'm aware of a similar issue #6342 on lighthouse but the sample they provided didn't help me.
iPadOS 13 now shows a white/grey bar when a WebApp is installed via 'Add to Home Screen' on Safari, even when apple-touch-fullscreen meta tag is added. The bar includes a menu to resize font and request desktop site, but has affected the available screen size so that the users now have to scroll to view the app menu.
Is there any way to hide this bar, such as forcing either Desktop/Mobile site so that the selection is not required?
I have found out the solution to this.
iPadOS does add the url bar to web apps even if the apple-touch-fullscreen meta tag is added, but now uses the manifest.json file used with Progressive Web Apps (PWA) to detect fullscreen mode. It has supported this before version IOS 13 but only now is it required for the fullscreen experience.
In my application the manifest.json link tag <link rel="manifest" href="manifest.json"> was ONLY being added when Google Chrome is detected; updating it to add the link when Safari on the iPad is detected resulted in the grey bar being hidden completely (Note that iPad detection has changed in this version now that mobile/desktop versions can be requested)
The manifest.js file that allowed fullscreen is shown below (display: "standalone" allows fullscreen)
{
"name": "MyApp",
"short_name": "MyApp",
"description": "MyApp description",
"version": "0.0.0.1",
"manifest_version": 2,
"default_locale": "en-GB",
"author": "Christopher Dean",
"start_url": "Home.aspx",
"display": "standalone",
"orientation": "landscape",
"theme_color": "#015174",
"background_color": "#F7F4F3",
"icons": [
{
"src": "images/app-icon-chrome.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "images/app-icon-tiny.png",
"sizes": "32x32",
"type": "image/png"
},
{
"src": "images/app-icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "images/app-icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"app": {
"urls": [
"http://MyApp/Home.aspx"
],
"launch": {
"web_url": "http://MyApp/"
},
"background": {
"scripts": [ "chrome.js" ]
},
"permissions": [
"unlimitedStorage",
"notifications",
"fullscreen"
]
}
}
I have created a web app, PWA, and made it possible to add to Homescreen. When I add it to my mobile and try to open it, it doesn't open and Chrome stops working.
The same web app is working when launched from a desktop.
Here my manifest file:
{
"gcm_sender_id": "********",
"name": "*** **",
"short_name": "***",
"description":"**",
"icons": [{
"src": "icons/** 512x512.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "icons/** 512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/",
"display": "standalone",
"background_color": "#032d31",
"theme_color": "#032d31"
}
If you want you can have a look at an article I wrote about it, maybe you find a missing setting.
Another thing: "gcm_sender_id"is obsolete and no more used (maybe this triggers the error). You should use FCM now (Firebase Cloud Messaging) that implements the Web Push interface and does not need to put anything in the web manifest.
I had generated a manifest file with icons, later i decided to just change the icons folder with different icons(by copying & paste and overriding) when i did that I get the following error in chrome devtools as i click add to home screen in the application tab:
Error while trying to use the following icon from the Manifest:
https://x.firebaseapp.com/icons/icon-144x144.png (Resource size is not
correct - typo in the Manifest?) x.firebaseapp.com/:1 App banner not
shown: no icon available to display
However, on chrome mobile the icon is updated(confirmed using add to homescreen)
{
"name": "Duckr",
"short_name": "Duckr",
"theme_color": "#2196f3",
"background_color": "#2196f3",
"display": "standalone",
"orientation": "portrait",
"Scope": "/",
"start_url": "/",
"icons": [
{
"src": "icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"splash_pages": null
}
icons/icon-144x144.png image should have width 144px and height 144px
You can check your manifest in your application tab in chrome inspect
https://developers.google.com/web/tools/chrome-devtools/progressive-web-apps#add-to-homescreen
Is the icon actually 144px by 144px? That's what the error suggests to me.
Error-"Error while trying to use the following icon from the Manifest:"
When I modifed the manifest.json with following change , it worked for me .
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
This might help someone who is facing a similar issue.
I do not see any response that resolves your comment, and I was also playing with the Manifest of my PWA and got this problem in my response headers of the element inspector.
GET http://localhost/android-icon-144x144.png 404 (Not Found)
(index):1 Error while trying to use the following icon from the Manifest: http://localhost/android-icon-144x144.png (Download error or resource isn't a valid image)
And it's just that you need to point your image where your favicon is and change in ** manifest.json ** the key:
"icons": [
{
"src": "/favicon/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
}
]
And in your application place the following path.
<link rel="icons" type="image/png" sizes="144x144" href="/favicon/android-icon-144x144.png">
If you do with a favicon generator you will get the different rel like this:
<link rel="icon" type="image/png" sizes="144x144" href="/favicon/android-icon-144x144.png">
Don't know if it's a good solution or not but commenting following lines worked for me :
{
"src": "icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
As, I checked into images folder image of mentioned size were not present either
avail image of that size or comment that size in manifest.
if you don't want to see this error go to your public folder and then to your index.html and delete this links if you have accidentally removed the icon image logo192.png or this link manifest.json or try changing the sizes in your manifest.json file
Image size needs to fit size written in manifest.json
If you know the size is right, try renaming both the icon file and the icon name inside manifest.json to something else. There's some "black magic" caching going on (and CTRL-F5 won't work). This way you force it to think it's changed.
I have just met this error when I change my --script-version 1.1.5 to 1.0.13. I resolve it by changing my manifest.json like:
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
]
This happened because u changed the picture:
So u need to update the old name of that picture in manifest json with the new one Example In manifest json my image source was logo192.png ,size 192*192
i downloaded an image named android.png of same size
so I replaced the name of source-SRC from logo192.png to android.png.
IT WORKED
How can we add an Icon for Home Screen in HTML5 when we browse a webpage in chrome app and in option we choose Add To Home Screen. then theres an Icon Shortcut placed on your Home Screen.
I used:
<link rel="apple-touch-icon-precomposed" href="...\icon.png">
<link rel="apple-touch-icon" href="...\icon.png">
nothing happens it display again a default icon.! Just Like the AmStalker Home Screen Icon
What is the best way to do it?
First of all I want to show project structure in image below .
I have made a public folder and all the file is inside the folder .
And the manifest file is out of public folder .this is image
After That we will create Manifest file code of file is given below.
Manifest.json
{
"short_name": "BetaPage",
"name": "BetaPage",
"theme_color": "#4A90E2",
"background_color": "#F7F8F9",
"display": "standalone",
"icons": [
{
"src": "assets/layouts/layout2/img/icon/android-icon-36x36.png",
"sizes": "36x36",
"type": "image/png",
"density": "0.75"
},
{
"src": "assets/layouts/layout2/img/icon/android-icon-48x48.png",
"type": "image/png",
"sizes": "48x48"
},
{
"src": "assets/layouts/layout2/img/icon/android-icon-72x72.png",
"sizes": "72x72",
"type": "image/png",
"density": "1.5"
},
{
"src": "assets/layouts/layout2/img/icon/android-icon-96x96.png",
"sizes": "96x96",
"type": "image/png",
"density": "2.0"
},
{
"src": "assets/layouts/layout2/img/icon/android-icon-144x144.png",
"sizes": "144x144",
"type": "image/png",
"density": "3.0"
},
{
"src": "assets/layouts/layout2/img/icon/android-icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"density": "4.0"
}
],
"start_url": "/index.html"
}
// After that we will add service worker
service-worker.js
self.addEventListener("fetch", function(event){
});
// Now go to index.html and put the following code in head section
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
// After that you need to put following code before body closing
<script type="text/javascript">
if ('serviceWorker' in navigator) {
console.log("Will the service worker register?");
navigator.serviceWorker.register('service-worker.js')
.then(function(reg){
console.log("Yes, it did.");
}).catch(function(err) {
console.log("No it didn't. This happened:", err)
});
}
</script>
Now Run your project and wait for few minute and reload your page and ENJOY !
In your href you have an extra dot i think, and it should be a forward slash not a backslash. try "../icon.png"
Also Android using apple icon references have been depreciated so these would not work - FOR ANDROID. Please look at https://developer.chrome.com/multidevice/android/installtohomescreen for more information.
The cited source recommends you do this:
<link rel="icon" sizes="192x192" href="../icon.png">
Of course with this method I advise that your image is 192x192 in size.
The modern way is to make it a Progressive Web App and the browser will offer this on its behalf.
Here - https://developers.google.com/web/fundamentals/engage-and-retain/app-install-banners/ - you can see the criteria and check for yourself if you've met them.