今天给大家分享一下, 如何实现网站能够在手机端像软件一样下载在桌面保存, 这样下次就能像打开app一样访问网站了, 是不是听了之后会很心动呢, 接下来我们就一起来学习一下知识, 快来试试这样的效果吧, 最后分享一下我做的一个chatGPT网站, 欢迎大家免费试玩chatGPT, 不过我的免费账号也快过期了, 大家注意时间哈!
chatGPT: https://vite-chatgpt-production.up.railway.app/#/chat
直接在手机默认浏览器打开就行了, 非常方便简单
好了, 开始学习PWA吧
1. 后缀名webmanifest文件
".webmanifest"是一个Web App清单文件的后缀名，用于定义Web应用程序的元数据，如名称、描述、图标和其他相关信息，以便能够将Web应用程序安装到设备上，就像本地应用程序一样。该文件通常位于Web应用程序的根目录下，并使用JSON格式编写。
display属性指定了Web应用程序如何以全屏模式显示在用户设备上的方式，例如standalone（独立窗口）、fullscreen（全屏）和minimal-ui（最小化UI）。
在public文件下，存在该目录，同时在主页面link中引入，就能实现打开一个链接，将这个链接保存到手机桌面，下次再次打开这个图标，就再次访问这个链接.
<link rel="manifest" href="/site.webmanifest"></link>
图片就存放在于site.webmanifest同级的目录
{
"name": "ChatGPT Vue Web",
"short_name": "ChatGPT",
"icons": [
{
"src": "/logo.png",
"sizes": "321x321",
"type": "image/png"
}
],
"start_url": "/",
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
2. serviceWorkerRegister
还需要设计下载操作
在html的script标签中引入serviceWorkerRegister.js
serviceWorkerRegister.js代码如下:
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('/serviceWorker.js').then(function (registration) {
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function (err) {
console.error('ServiceWorker registration failed: ', err);
});
});
}
3. serviceWorker
看到逻辑,其实是在window窗口load时继续加载serviceWorker.js
而serviceWorker.js的逻辑也很简单,即使在窗口为活跃时,监听下载事件
const CHATGPT_WEB_CACHE = "chatgpt-vite-web";
self.addEventListener("activate", function (event) {
console.log("ServiceWorker activated.");
});
self.addEventListener("install", function (event) {
event.waitUntil(
caches.open(CHATGPT_WEB_CACHE).then(function (cache) {
return cache.addAll([]);
}),
);
});
self.addEventListener('fetch', function (event) {
event.respondWith(
caches.match(event.request)
.then(function (response) {
return response || fetch(event.request);
})
);
});
这样当网址在手机浏览器打开时,就会触发下载提示
点击确定,之后桌面上就会有iocn图标,点击之后就可以进入网址
在网页版打开,也会有下载安装提示呢
接下来来体验一下chatGPT吧
最后PWA不能保证百分之百出现提示下载, 还是无法做到向原生一样的效果,有一些浏览器和设备将不支持的, 下面是来自于chatGPT的回答:
大多数现代浏览器都支持PWA（渐进式网络应用程序），但是在某些旧的操作系统和浏览器版本上可能会遇到问题。以下是一些已知的不支持PWA的浏览器和设置：
● Internet Explorer和Safari（iOS 12及更早版本）不支持PWA。
● 在Android上使用Chrome浏览器时，如果启用了“保存数据”选项，则不支持PWA。
● 如果在浏览器中禁用了JavaScript或Cookie，PWA也将无法正常工作。
● 在隐身模式下，有些浏览器也可能无法完全支持PWA功能。
当然,如果下载过一次了, 下次再打开就不会提示了, 因为这个是有缓存的, 需要删除上次下载的记录和清除缓存才能实现, 好了, 今天分享结束啦, 欢迎大家试玩哈!
