PWA，让你像访问应用一样访问网站

让你的站点（Web）秒变APP（应用程序）

什么是 PWA

Progressive Web App, 简称 PWA，是提升 Web App 的体验的一种新方法，能给用户原生应用的体验。

用途和优点

1、离线访问：PWA 可以缓存应用程序的资源，使用户在离线状态下也能够访问应用程序。
2、快速加载：PWA 可以通过在本地缓存应用程序的资源，使应用程序加载速度更快。
3、安装性：PWA 可以通过添加到主屏幕或桌面等方式，像本地应用程序一样被安装和访问。
4、推送通知：PWA 可以像本地应用程序一样发送推送通知，提醒用户进行相关操作。
5、跨平台：PWA 可以在不同的平台上运行，包括桌面、移动设备等。

本站已适配PWA，电脑端的朋友可以点击地址栏右边一个电脑下载样式的图标然后点安装体验即可，手机端的朋友选择添加到主屏幕即可。

[{"url":"https://pic.nanbowan.top/picturebed/6482fd31e5cfb.png","alt":""},{"url":"https://pic.nanbowan.top/picturebed/6482f27ea73f8.png","alt":""}]

实现方式

制作一个 JSON 文件

{
//语言信息
"lang": "zh-CN",
//应用的名字（显示在开屏界面上）
"name": "Nanbowan",
//应用简称（显示在桌面上）
"short_name": "Nanbowan",
//应用描述
"description": "欢迎来到 Naobowan 的博客",
//应用路径（网址）/ 作用域
"start_url": "/",
//应用主题颜色
"theme_color": "#000000",
//应用背景颜色
"background_color": "#202124",
//应用朝向 / 
"orientation": "any",  #我是方向属性any、natural、landscape、landscape-primary、landscape-secondary、portrait、portrait-primary、portrait-secondary
//显示模式
"display": "standalone", "icons": [{//应用图标，路径、类型、分辨率 "src": "https://blog.nanbowan.top/logo.png", "type": "image/png",
// Icons 图片实际的分辨率有多大， sizes 就需要填多大。 "sizes": "96x96" }] 
}

其中，display 的参数：
fullscreen 全屏显示, 所有可用的显示区域都被使用, 并且不显示状态栏chrome。
standalone standalone 让这个应用看起来像一个独立的应用程序，包括具有不同的窗口，在应用程序启动器中拥有自己的图标等。这个模式中，用户代理将移除用于控制导航的UI元素，但是可以包括其他UI元素，例如状态栏。
minimal-ui minimal-ui 该应用程序将看起来像一个独立的应用程序，但会有浏览器地址栏。样式因浏览器而异。
browser browser 该应用程序在传统的浏览器标签或新窗口中打开，具体实现取决于浏览器和平台。这是默认的设置。

引入上面的 Json 文件

1	<link rel="manifest" href="https://blog.nanbowan.top/示例路径/pwa.json"> #在<head></head> 头部添加

注册一个 Service Worker

1
2
3

if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('https://blog.nanbowan.top/示例路径/sw.js');
}

添加sw.js 设置缓存内容

const cacheName = '缓存名字，自定义';
const urlsToCache = [
'缓存文件 1',
'缓存文件 2',
'缓存文件 3'];

self.addEventListener('install', event => {
self.skipWaiting();
event.waitUntil(async function () {
const cache = await caches.open(cacheName);
if (cache) {
await cache.addAll(urlsToCache);
}
return;
});
});

self.addEventListener("fetch", e => {
e.respondWith(
caches.match(e.request).then(response => {
return response || fetch(e.request);
})
);
});