前言

虽然个人有个人的习惯,但我想作为程序猿或者相关使用电脑的人员来说,默认Chrome应该不夸张吧...

当然也不是非要Chrome。移动端等也可以。

这篇文章将快速的讲解把网站应用化,达到手机打开网页会提示:将“该网站”添加到主屏幕。

PWA

关于PWA是什么,有什么好处,百度可以搜到太多太多

我就直接进行一个干货的讲

注:有一些平台还是不能够使用PWA应用的

网站要求

必须是https协议。

如果你的网站已经可以正常在互联网上浏览了,那么你就应该晓得SSL。不晓得也可自己去查...所以这里我也不多废话。

如果是本地自己测试的话,就可以是localhost。(废话就和数据库一样,在本地自己给自己捣鼓还怕个毛...)

正题

分为两部分,足够简单

就好比要安装一个app、软件、应用程序。

1. manifest.json

一个应用程序的话,从安装开始就要知道名字、图标等参数吧

manifest.json就定义了Web引用的参数。

{
    "name": "收心~掌控翻涌波涛神者心境!",
    "start_url": "/index.html",
    "display": "standalone",
    "icons": [
        {
            "src": "logo.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    ]
}

你需要在你的网站根目录,也就是index.html同级目录下创建manifest.json文件。

主要参数

  • name:应用名称。注意如果编码格式,中文的话应该使用utf8。
  • start_url:首页。进入应用后访问的第一个页面。
  • display:有3种类型可以选择。fullscreen、standalone、minimal-ui。
  • icons:就是图标logo。自己找喽,也放在一起。

引入

manifest.json引入到header代码块

那肯定的呀,不然怎么用呢?

<head>
    //...
    <link rel="manifest" href="manifest.json">
</head>

注意了,网站所使用的header不一定在index.html中。

如果你的博客和我一样使用了主题皮肤什么的,需要找到你的header文件,在里面写下代码。如果不懂的话,文章最后有演示视频可以观看。

2. sw.js

Service Worker主要用来做缓存,我们需要一个sw.js文件来监听fetch事件。

依然是网站根目录下

self.addEventListener('fetch', function (evt) {
    console.log('sw fetch() 发送的请求', evt.request.url)
})

引入

index.html

<body>
    <script>
        //判断浏览器是否支持service worker
        if ('serviceWorker' in navigator) {
            //load事件完成之后才注册service worker
            window.addEventListener('load', function () {
                //注册sw.js
                navigator.serviceWorker.register('/sw.js')
                    .then(function (registration) {
                        //注册成功
                        console.log('sw.js 注册成功', registration.scope);
                    })
                    .catch(function (err) {
                        //注册失败:(
                        console.log('sw.js 注册失败 ', err);
                    });
            });
        }
    </script>
</body>

3. 注意

如果没有出现安装或相似按钮的话

  • 首先,检查你的浏览器是否支持
  • 文件位置和引入header位置是否正确
  • 是否已经安装过Web引用
  • 检查步骤有错吗,代码有错吗

关键点视频

结果

小头图版权:《春の甘雨ちゃん》by memeno 2022年3月21日晚上8点26分 pid:97081289

广告位招租
最后修改:2022 年 05 月 17 日 10 : 42 PM
如果觉得我的文章对你有用,请喂饱我!(理直气壮)