Add to home screen doesn't appear on my angular apps
Question
I have an angular app running on angular 7 and i'm trying to turn it on PWA, i installed pwa 0.6.8 and everything is working (in localhost) except the add to home screen who doesn't show up when i am running it on galaxy S5 from the google dev tolls
When i run the audit it says that it is installable for the user : Result of the audit
here is my index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>BSJP</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<link rel="manifest" href="manifest.json">
<link rel="icon" type="image/png" sizes="144x144" href="assets/icons/icon-144x144.png">
<meta name="theme-color" content="#1976d2">
</head>
<body>
<app-root></app-root>
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
crossorigin=""></script>
</body>
</html>
my manifest :
{
"name": "mvp-front",
"short_name": "BouffeSqueJtePrepare",
"theme_color": "#1976d2",
"background_color": "#fafafa",
"display": "standalone",
"scope": "/",
"start_url": "/index.html",
"icons": [
{
"src": "assets/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "assets/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "assets/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "assets/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "assets/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "assets/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "assets/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "assets/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
and ngsw.config.json
{
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/*.css",
"/*.js"
]
}
}, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**",
"/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
]
}
}
]
}
what am i missing ?
Thank you
3 answers
solution1
1 2019-07-06 05:33:15
A web app can only be added to a homescreen when the site is visited at least twice, with at least five minutes between visits.
This guide tells you how you can simulate those events for development: https://developers.google.com/web/tools/chrome-devtools/progressive-web-apps
solution2
1 2019-07-08 12:20:56
I would suggest you to try to host the project in Firebase (you can also choose another provider).
It is free and it gives already HTTPS out of the box. You can create a project in Firebase and deploy the solution in less than 10 minutes. Then you can test for real with any mobile device whether you app prompts for a A2HS.
I started writing a series of articles about PWAs, if you are interested to learn more about it you can have a look. The second post covers exactly the A2HS topic: How to install a PWA on a user's device .
solution3
1 2019-07-09 09:39:50
Add to home screen will appear if your application fullfills following criteria
- manifest.json
- app hosted over https server : eg: you can use netlify
- service worker with atleast one fetch event.
You can find the entire code for it at
https://github.com/rohan12patil/pwa/tree/A2HS
demo at https://newpwa.netlify.com
The code is basic & you can easily understand & integrate in your angular app
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.