pwa构建

前面已经注册并创建好了servicewoker，接着再几步就可创建好pwa

在网站根目录创建文件manifest.json(这里需要创建两个Logo图片，尺寸分别是192*192和512*512)当被添加到手机主屏的时候就是显示的这个图片

{
    "name": "这里写网站的标题名称",
    "short_name": "这里写网站标题的简称",
    "start_url": "这里写网站起始URL一般使用/",
    "display": "这里写网站在浏览器中的显示模式一般使用standalone",
    "background_color": "网站的背景颜色#fff",
    "description": "这里写对于网站的描述",
    "orientation": "网站显示的方向portrait-primary",
    "theme_color": "网站的主题颜色#fff",
    "icons": [ {   //网站放置在桌面使用的图标，一般只需要192和512两个尺寸即可
        "src": "/img/192.png",
        "sizes": "192x192",
        "type": "image/png"
    }, {
        "src": "/img/512.png",
        "sizes": "512x512",
        "type": "image/png"
    }]
}

网站首页头部添加

<link rel=manifest href="/manifest.json">
<meta name=theme-color content="#fff"> <!-- PWA 主题颜色 -->

创建离线情况下的友好页面

<!DOCTYPE html>    
<html lang=zh-cmn-Hans>    
<head>    
<meta charset=utf-8>    
<meta name=theme-color content="#242628">    
<meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">    
<meta http-equiv=X-UA-Compatible content="ie=edge">    
<link rel=stylesheet href="css/offline.css">    
<title>网络异常</title>    
<style>body { background: #242628; color: #d6d7d9; padding: 0 1rem; }</style>    
</head>    
<body> 
<h1>网络异常</h1>    
<p>你的网络似乎遭遇了中断，无法从 <code>www.domain.me</code> 获取最新的数据。</p>    
<p>由于 Service Worker 技术，你之前访问过的页面已被缓存，可以从当前设备上离线访问，但部分资源（图片、样式等）可能无法显示。</p>    
<button class=center onclick="window.history.back();">返回上一页</button>    
<p>若已确认你的网络环境正常，可以点击下方的按钮或按浏览器刷新按钮，来重载当前页面。</p>    
<button class=center onclick="location.reload()">立即重载</button>    
</body>    
</html>

提供有效的apple-touch-icon

当iOS Safari用户向其主屏幕添加渐进式Web应用程序（PWA）时，出现的图标称为Apple touch图标。您可以通过<link rel="apple-touch-icon" href="/example.png">在<head>页面中添加标签来指定应用应使用的图标。如果您的页面没有此链接标签，iOS会通过截取页面内容的屏幕截图来生成一个图标。换句话说，指示iOS下载图标可带来更优美的用户体验。

可以使用前面192尺寸的图片:
```
<link rel="apple-touch-icon" href="/img/192.png">
```
也可以再单独创建一个180*180的图片：
```
<link rel="apple-touch-icon" href="/img/180.png">
```

pwa构建

pwa构建

results matching ""

No results matching ""