在解决Angular 6和PWAs的问题时,以下是一个可能的解决方案,其中包含了一些代码示例:
ng version
ng add @angular/pwa
module.exports = {
globDirectory: 'dist/my-app',
globPatterns: [
'**/*.{html,js,css}'
],
swDest: 'dist/my-app/service-worker.js',
clientsClaim: true,
skipWaiting: true
};
{
"name": "My App",
"short_name": "App",
"theme_color": "#007bff",
"background_color": "#ffffff",
"display": "standalone",
"start_url": "/",
"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"
}
]
}
ng build --prod
ng serve
通过以上步骤,你的Angular 6项目将会包含一个service worker和一个manifest.json文件,使它成为一个基本的PWA。你可以根据你的需求进一步自定义和扩展这些功能。