Step1.Pwa介绍

Pwa's Logo

Pwa有何用?

这里可能有人会问了.
Pwa是啥东西?我要装他有何用?

用人话来说.

就是通过一系列操作.
然后把你的网站/博客,打包成一个像APP[软件]的东西.
你可以通过打开这个APP来进到你的网站.而不需要打开浏览器,再搜索你的网站.
然后!整个过程中不需要任何下载/安装.
只需您有手就行.

用大佬的话来说就行[来自珂泽大佬]

PWA是 Progressive Web Apps 的缩写,翻译为渐进式网络应用.是一款基于浏览器并且可以安装到桌面的app.使用PWA,我们可以很方便的将网站生成一个移动APP,并且无需下载直接安装.

Pwa有何特点?

  • 可靠 - 即使在不稳定的网络环境下,也能瞬间加载并展现内容.
  • 体验 - 快速响应,并且有平滑的动画响应用户的操作
  • 粘性 - 像设备上的原生应用,具有沉浸式的用户体验,用户可以添加到桌面.

目前兼容的浏览器!

Pwa兼容浏览器

更多?

想知道更多请查阅:https://lavas-project.github.io/pwa-book/

Step.2如何在我的网站/博客加入WPA?

第一步

创建一个manifest.json.
在manifest.json里输入

{
  "name": "博客名字",
  "short_name": "博客名字",
  "lang": "cn",
  "icons": [
    {
      "src": "assets/images/icons/icon_144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "assets/images/icons/icon_152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "assets/images/icons/icon_192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "assets/images/icons/icon_512.png",
      "sizes": "256x256",
      "type": "image/png"
    },    
    {
      "src": "assets/images/icons/icon_64.png",
      "sizes": "64x64",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#fff",
  "theme_color": "#1976d2"
}

然后把manifest.json放在子目录里.

第二步

在你的网站/博客的引用manifest.json.

<!--PWA(manifest加载)-->
<link rel="manifest" href="/manifest.json">
<!--PWA(为iOS和Windows10的载入进行兼容)-->
#因为Safari和Windows10无法像安桌那样显示出图标,标题.所以才需要进行兼容.
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="博客名字"> #这里是Safari"添加到主目录"显示的名称
<link rel="apple-touch-icon" href="https://"> #这里是Safari"添加到主目录"显示的图标.显示时需要等待几秒
<meta name="msapplication-TileImage" content="https://blog.iucky.cn/favicon-1.ico">
<meta name="msapplication-TileColor" content="#fff">
<!--PWA End-->
最后修改:2021 年 07 月 02 日 07 : 06 PM
END
文章标题: Handsome与Pwa的完美结合!
本文地址: https://www.yourworld.fun/index.php/archives/172/
版权说明: 若无注明,本文皆白钻の后宫原创,转载时候请保留文章出处.
除非另有说明,本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议
我想吃点好吃的,能不能....