一个pwa应用重要的三个文件

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="apple-mobile-web-app-title" content="应用标题">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>PWA DEMO</title>
	 <link rel="manifest" href="manifest.json">
</head>
<body>
<button onclick="install()">
    安装
</button>
    <h1>test</h1>
    <script>
        let savePrompt = null; // 保存安装事件
        // 判断浏览器是否支持 service worker
        if ('serviceWorker' in navigator) {
            // load 事件完成之后才注册 service worker
            window.addEventListener('load', function () {
                // 注册 sw.js
                navigator.serviceWorker.register('/sw.js')
                    .then((registration) => {
                        // 注册成功
                        console.log('sw.js 注册成功', registration.scope);
                    })
                    .catch( (err) => {
                        // 注册失败:(
                        console.log('sw.js 注册失败 ', err);
                    });
            });
            window.addEventListener('beforeinstallprompt', function (e) {
                // 注册 sw.js
                e.preventDefault();
                savePrompt = e;
            });
            window.addEventListener('appinstalled', (evt) => {
                // 安装成功之后回调
                console.log('已安装到桌面屏幕');
            });
            // chrome 浏览器判断
            if (window.matchMedia('(display-mode: standalone)').matches) {
                // 已经安装的启动方式
                console.log('display-mode 是 standalone');
            }
            // Safari 判断：
            if (window.navigator.standalone === true) {
                // 安装程序启动的时候，页面每次刷新会执行
                console.log('display-mode 是 standalone');
            }
        }
        function install(){
            if(savePrompt){
                console.log(savePrompt)
                savePrompt.prompt();
                savePrompt.userChoice.then(result => {
                    if(result.outcome == "dismissed"){
                        console.log("用户拒绝安装")
                    }else if(result.outcome == "accepted"){
                        console.log("用户接受了安装")
                    }
                    alert("安装平台" + result.platform)
                    console.log("安装平台" + result.platform)
                })
            }
        }
    </script>
</body>
</html>

pwa.js

self.addEventListener('fetch', function (evt) {
    console.log('sw fetch() 发送的请求', evt.request.url)
})
self.addEventListener('activate', function(e) {
    // 浏览器打开网页会会掉此方法，当再次刷新页面不会回调
    console.log('[ServiceWorker] 已经被激活');
});
self.addEventListener('install', function(e) {
    // 浏览器打开网页会会掉此方法，当再次刷新页面不会回调
    console.log('[ServiceWorker] 已经安装');
});
self.addEventListener('notificationclick', function(e) {
    //
    console.log('[ServiceWorker] 通知被点击');
});
self.addEventListener('notificationclose', function(e) {
    // 通知被点击
    console.log('[ServiceWorker] 通知被关闭');
});

3、json配置文件  

 manifest.json
{
    "name": "测试PWA测试",
    "start_url": "/index.html",
    "display": "standalone",
    "icons": [
        {
            "src": "icons/icon_152x152.e82305.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    ]
}

第四、就是manifest.json中配置的图标放入对应的目录

 

最后修改于 2022-03-25 10:13:08
如果觉得我的文章对你有用，请随意赞赏
扫一扫支付
上一篇