如何让前端页面在浏览器当app安装网页应用PWA-web-app-manifest
PWA,即Progressive Web App, 是提升 Web App 的体验的一种新方法,能给用户原生应用的体验。PWA本质上依然是一个Web App
Web App Manifest,manifest 的目的是将Web应用程序安装到设备的主屏幕,为用户提供更快的访问和更丰富的体验
manifest.json
快速生成该文件-跳转
{
"name": "图书搜索", //指定了Web App的名称
"short_name": "书查", //简称
"start_url": "/", //指定用户打开该Web App时加载的URL。相对URL会相对于manifest
"display": "standalone", //控制页面的显示模式,有四个值可以选择:fullscreen、standalone、minimal-ui、browser。minimal-ui比standalone多出一个地址栏
"background_color": "#333",
"description": "一个PWA应用",
"orientation": "portrait-primary", //控制Web App的方向。具体的值包括:any, natural, landscape, landscape-primary, landscape-secondary, portrait, portrait-primary, portrait-secondary
"theme_color": "#5eace0", //定义应用程序的默认主题颜色
"icons": [{ //用来指定应用的桌面图标
"src": "img/icons/book-32.png",
"sizes": "32x32",
"type": "image/png"
}, {
"src": "img/icons/book-72.png",
"sizes": "72x72",
"type": "image/png"
}, {
"src": "img/icons/book-128.png",
"sizes": "128x128",
"type": "image/png"
}, {
"src": "img/icons/book-144.png",
"sizes": "144x144",
"type": "image/png"
}, {
"src": "img/icons/book-192.png",
"sizes": "192x192",
"type": "image/png"
}, {
"src": "img/icons/book-256.png",
"sizes": "256x256",
"type": "image/png"
}, {
"src": "img/icons/book-512.png",
"sizes": "512x512",
"type": "image/png"
}]
}
使用
<!-- 在index.html中添加以下meta标签 -->
<link rel="manifest" href="/manifest.json">
判断是否支持serviceWorker功能,支持,当网页加载完成后加载sw.js文件去开启pwa功能
<script>
if ("serviceWorker" in navigator) {
window.addEventListener("load", function () {
navigator.serviceWorker.register("sw.js");
});
}
</script>
sw.js
self.addEventListener('error', function(e) {
self.clients.matchAll().then(function(clients) {
if (clients && clients.length) {
clients[0].postMessage({
type: 'ERROR',
msg: e.message || null,
stack: e.error ? e.error.stack : null,
});
}
});
});
self.addEventListener('unhandledrejection', function(e) {
self.clients.matchAll().then(function(clients) {
if (clients && clients.length) {
clients[0].postMessage({
type: 'REJECTION',
msg: e.reason ? e.reason.message : null,
stack: e.reason ? e.reason.stack : null,
});
}
});
});
importScripts('https://g.alicdn.com/kg/workbox/3.3.0/workbox-sw.js');
workbox.setConfig({
debug: false,
modulePathPrefix: 'https://g.alicdn.com/kg/workbox/3.3.0/',
});
workbox.skipWaiting();
workbox.clientsClaim();
var cacheList = ['/', '/index.html'];
workbox.routing.registerRoute(
new RegExp(/\.(?:html|css)$/),
workbox.strategies.networkFirst({
cacheName: 'ql:html',
plugins: [
new workbox.expiration.Plugin({
maxEntries: 10,
}),
],
}),
);
workbox.routing.registerRoute(
new RegExp(/\.(?:js|css)$/),
workbox.strategies.staleWhileRevalidate({
cacheName: 'ql:static',
plugins: [
new workbox.expiration.Plugin({
maxEntries: 20,
}),
],
}),
);
workbox.routing.registerRoute(
new RegExp(/\.(?:png|gif|jpg|jpeg|webp|svg|cur)$/),
workbox.strategies.cacheFirst({
cacheName: 'ql:img',
plugins: [
new workbox.cacheableResponse.Plugin({
statuses: [0, 200],
}),
new workbox.expiration.Plugin({
maxEntries: 20,
maxAgeSeconds: 12 * 60 * 60,
}),
],
}),
);
本文来自博客园,作者:JackieDYH,转载请注明原文链接:https://www.cnblogs.com/JackieDYH/p/17634046.html
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!