给网站添加PWA-CSDN博客

本文链接：https://blog.csdn.net/Cola_6/article/details/121227531

给网站添加PWA

PWA 是一种渐进式网页应用理念，全称为 Progressive Web App，效果就是使用 Google 或 Edge 等支持 PWA 的浏览器打开我网站后地址栏最右边有的个圆圈小加号，点击小加号就可以将网站像桌面应用一样安装成独立APP

这个应用不仅支持 pc 端，也可以在手机上体验，操作很简单，打开网站后将站点添加到主屏幕就好了

这时有人就会说了，普通网站也可以添加到主屏幕啊，这里我就给讲讲区别，普通网站添加到主屏幕之后只是添加了一个网站的快捷打开方式，添加后点击桌面的图标会跳转到浏览器打开网页，而具有 PWA 效果的网站添加到主屏幕之后，点击桌面图标程序会单独运行，体验就像一个独立app的应用程序

怎么安装

那么怎样安装呢

让网站支持 PWA 只需要三个步骤

注册serviceWorker

使用 Javascript 按自定策略注册 serviceWorker

简写版，直接注册

if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
if (!navigator.serviceWorker.controller) {
navigator.serviceWorker.register('sw.js');}
});
}

完整版，注册并控制台打印异常

if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/sw.js', {
scope: '/'
})
.then(function(registration) {
// 注册成功
console.log('ServiceWorker registration successful with scope: ', registration.scope)
})
.catch(function(err) {
// 注册失败:(
console.log('ServiceWorker registration failed: ', err)
})
})
}

定义注册策略

也就是第一步里面需要加载的 sw.js，策略可进行自定义，作用是如何缓存文件以及需要缓存哪些文件在用户本地，全部缓存可实现离线访问站点，也就是说没网络也可以正常打开安装在桌面app

以下策略足够体验 PWA,但是还不能离线访问

重点：这个js需要放在站点根目录，不然加载不到，PWA 也就不生效

sw.js

//监听service worker事件
self.addEventListener('install', function (event) {
var homePage = new Request('index.html');
event.waitUntil(
//请求首页并将首页存入缓存
fetch(homePage).then(function (response) {
//建立cache-homePage缓存
return caches.open('cache-homePage').then(function (cache) {
return cache.put(homePage, response);
});
}));
});
//请求页面

self.addEventListener('fetch', function (event) {

event.respondWith(

fetch(event.request).catch(function (error) {

//请求失败，从缓存中读取缓存的页面

return caches.open('cache-homePage').then(function (cache) {

return cache.match('index.html');

});

}));

});
//刷新首页

self.addEventListener('refreshHomePage', function (response) {

return caches.open('cache-homePage').then(function (cache) {

//将刷新后的页面缓存

return cache.put(offlinePage, response);

});

});

配置 manifest.json

这个 json 数据文件用来定义 PWA 应用的可以信息，可根据自己需要配置各项属性内容

这个文件可随意放置站点的资源目录位置，使用时在网站 head 标签里使用 <link rel="manifest" href=""> 来引用加载

使用时请删除里面用于解释的注释信息

{

"name": "知雨", //应用名称

"short_name": "知雨", //应用短名称

"theme_color": "#fff", //告知浏览器用什么颜色来为地址栏等ui着色

"background_color": "#fff", //应用启动页的背景颜色

"display": "standalone", //这个配置用来隐藏地址栏，美化应用

"start_url": "/", //启动网址，正常来说都为根路径

"scope": "/", //PWA作用范围

"icons": [ //配置图标，可配置多个不同尺寸

{

"src": "https://coor.top/avatar",

"sizes": "480x480",

"type": "image/png"

}

],

"splash_pages": null

}