后端开发教程 - Java、Spring Boot 实战 - msg200.com
如何将任何网站/网页转换为可安装的渐进式 Web 应用程序 (PWA)
大家好！
想知道如何将任何网站/网页转换为可安装的渐进式 Web 应用吗？继续阅读。
在本教程中，我们将把基于 HTML5 的游戏转换为可安装的 Web 应用程序，该应用程序可安装在 Android 或 iOS 设备上。
制作了这款经典的西蒙游戏，操作简单却很容易上瘾。您可以fork或star此仓库，将其变为您自己的版本，或者提出任何进一步的改进建议。
什么是 PWA？
渐进式 Web 应用 (PWA) 是一套移动 Web 应用开发技术，旨在构建外观和使用体验与原生应用相近的应用。PWA 使用 Web 技术栈（JS、HTML 和 CSS），将丰富的功能与原生应用的流畅用户体验完美结合。简而言之，PWA 就是带有原生应用风格的 Web 应用：安装后，用户点击设备主屏幕上的图标即可直接访问网站。
PWA 的最佳功能之一是它可以像原生应用一样安装在用户的设备上，并且也可以在离线模式下工作。
采取的步骤 -
- 创建服务工作者文件。
- 更新主文档以检查该功能是否受支持。
- 为应用程序元数据创建 manifest.json。
- 使用 Chrome 开发工具调试应用程序。
1. 服务人员
在项目的根目录中创建一个service-worker.js文件，将其放在根目录中非常重要，因为它可以帮助我们将静态内容存储在缓存中。缓存中几乎可以存储任何类型的媒体，例如 mp3、mp4、视频？当然，还有静态文件 HTML、CSS 和 JS。
// Installing service worker
const CACHE_NAME = 'Simon-game';
/* Add relative URL of all the static content you want to store in
* cache storage (this will help us use our app offline)*/
let resourcesToCache = ["./", "./img/game.png", "./game.js", "./styles.css"];
self.addEventListener("install", e=>{
e.waitUntil(
caches.open(CACHE_NAME).then(cache =>{
return cache.addAll(resourcesToCache);
})
);
});
注意：将
CACHE_NAMEconst 更改为您自己的应用程序名称
添加两个事件监听器 -
// Cache and return requests
self.addEventListener("fetch", e=>{
e.respondWith(
caches.match(e.request).then(response=>{
return response || fetch(e.request);
})
);
});
// Update a service worker
const cacheWhitelist = ['Simon-game'];
self.addEventListener('activate', event => {
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
if (cacheWhitelist.indexOf(cacheName) === -1) {
return caches.delete(cacheName);
}
})
);
})
);
});
注意：
cacheWhiteList用您自己的应用程序名称替换变量
2. 检查可用性（更新index.html）
对于静态网站，更新主 HTML 文档以检查服务人员的可用性，并使用该service-worker.js文件注册我们的应用程序。
<script>
if('serviceWorker' in navigator){
navigator.serviceWorker.register('/service-worker.js');
} else {
console.log("Service worker is not supported");
}
</script>
3.创建manifest.json文件
创建一个manifest.json文件，我们需要将其链接到我们的主要 HTML 文档。
<link rel="manifest" href="manifest.json">
现在，该文件包含有关我们应用程序的元数据，例如应用程序名称、图标参考、应用程序打开时打开的 URL 等。
{
"name": "Simon Game",
"short_name": "Simon Game",
"start_url": "/",
"background_color": "#FFDCB5",
"theme_color": "#1E003D",
"icons": [
{
"src": "img/512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "img/192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable any"
}
],
"display": "standalone",
"orientation":"portrait"
}
将上述代码复制/粘贴到清单文件中，并更改您的应用详情。您可以引用单个图标，也可以使用多种尺寸的图标，因为设备的屏幕尺寸各不相同。
4. 使用开发工具进行调试
现在打开 Chrome 开发工具 ( ctrl+shirt+i)，点击“应用程序”选项卡，检查浏览器是否检测到了 Service Worker 和清单文件。
如下所示，显示了应用程序的徽标和名称。
该background_color属性设置启动画面颜色和theme_color通知栏。
您还可以检查您的应用是否符合 PWA 标准，在灯塔选项卡中单击生成报告。
这也将帮助您添加您可能会忘记的内容，例如为 iPhone/Apple 用户添加此行。
<link rel="apple-touch-icon" href="img/game.png"/>
轰！大功告成！您已成功将网站/游戏转换为 PWA。
如何在设备上安装？
在 Chrome 上，您会在 URL 栏上看到这个小添加图标，提示您在设备上安装该应用程序。
在移动设备上，您会收到提示（Chrome）
如果没有，请单击右上角的 3 个点，将出现“安装应用程序”选项。
在 Android 上完美安装。
希望对你有帮助。点个赞吧 :)
欢呼吧，
Shashwat
在推特上关注我