后端开发教程 - Java、Spring Boot 实战 - msg200.com
PWA？PWA？PWA？渐进式 Web 应用( PWA) 是指经过精心设计的Web 应用，其功能强大（充分利用原生功能）、可靠性高（即使在离线模式下也能运行）且易于安装。这三大支柱使它们拥有如同特定平台应用程序般的体验。
PWA？渐进式 Web 应用本质上就是 Web 应用程序。通过渐进式增强，现代浏览器可以启用新功能。使用service workers和web app manifest，可以将 Web 应用程序转换为PWA。即使新功能不可用，用户仍然可以获得核心体验。
从上图可以看出，渐进式 Web 应用程序通过提供用户喜爱的 Web 体验，使用最新的 Web 功能带来增强的功能和可靠性PWA，提供了两全其美的效果，渐进式 Web 应用程序允许任何人、在任何地方、在任何设备上使用单一代码库安装您构建的应用程序。
将网站转变为PWA以下要求：
https或由提供localhost）manifest.json（提供有关Web 应用程序的信息）service worker（允许拦截和控制Web 浏览器如何处理其和的脚本。）network requestsasset caching这里我们不会专注于创建网站，而是着重于如何让现有网站可安装。接下来，只需使用如下所示的基本网站即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PWA: Installable website</title>
</head>
<body>
<h1>Test</h1>
</body>
</html>
注意：可以设置网站样式或添加脚本，但为了添加PWA安装功能，这就足够了。
定义manifest.json
{
"name": "<name of the application>",
"short_name": "<short name for the application> (can be same as name)",
"start_url": "<start url for the website>",
"display": "<display mode for the website>",
"description": "<description of the application>",
"background_color": "<color>",
"theme_color": "<color>",
"orientation": "<orientation>",
"icons": [{
"src": "<image source>",
"sizes": "<widthxheight>",
"type": "image/png"
}]
}
一个例子manifest.json如下
{
"name": "PWA: Installable website",
"short_name": "Installable PWA",
"start_url": "index.html",
"display": "standalone",
"description": "App for testing PWA features",
"background_color": "#ffffff",
"theme_color": "#000000",
"orientation": "portrait-primary",
"icons": [
{
"src": "image/icon-24.png",
"sizes": "24x24",
"type": "image/png"
},
{
"src": "image/icon-32.png",
"sizes": "32x32",
"type": "image/png"
},
{
"src": "image/icon-48.png",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "image/icon-64.png",
"sizes": "64x64",
"type": "image/png"
},
{
"src": "image/icon-128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "image/icon-256.png",
"sizes": "256x256",
"type": "image/png"
}
]
}
要将清单添加到网站，请在head部分中添加以下内容
<link rel="manifest" href="manifest.json" />
head为了支持iOS，最好在部分中添加以下内容
<link rel="apple-touch-icon" href="image/icon-24.png" />
<link rel="apple-touch-icon" href="image/icon-32.png" />
<link rel="apple-touch-icon" href="image/icon-48.png" />
<link rel="apple-touch-icon" href="image/icon-64.png" />
<link rel="apple-touch-icon" href="image/icon-72.png" />
<link rel="apple-touch-icon" href="image/icon-96.png" />
<link rel="apple-touch-icon" href="image/icon-128.png" />
<link rel="apple-touch-icon" href="image/icon-256.png" />
<meta name="apple-mobile-web-app-status-bar" content="#db4938" />
<meta name="theme-color" content="#db4938" />
现在只剩service worker下需要处理的事情了。
service-worker.js
const STATIC_CACHE = "static-cache-v1"
const static_assets = [
"/",
"/index.html",
"/script.js",
"/image/icon-24.png",
"/image/icon-32.png",
"/image/icon-48.png",
"/image/icon-64.png",
"/image/icon-72.png",
"/image/icon-96.png",
"/image/icon-128.png",
"/image/icon-256.png",
]
// storing static assets in cache on service worker install
self.addEventListener("install", event => {
event.waitUntil(
caches.open(STATIC_CACHE).then(cache => {
cache.addAll(static_assets)
})
)
})
// returning static assets from cache
self.addEventListener("fetch", event => {
event.respondWith(
caches.match(event.request).then(response => {
return response || fetch(event.request);
})
)
});
我们需要处理该fetch事件以启用安装。
service worker通过在网站中添加以下脚本来启用
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js');
} else {
console.log("Service worker is not supported");
}
</script>
现在，最后一块拼图，在 上为网站提供服务localhost。如果您使用的是VS Code，则可以使用实时服务器扩展轻松完成此操作（推荐初学者使用）。
网址栏右上角的安装图标表示现在可以安装了。点击它即可pwa在您的设备上安装。
注意：这只是一个简要概述。在正式版中，pwa建议定期刷新静态资源，以确保用户不会访问过时的内容。
Smartsapp
网络应用程序：https://smartsapp-ba40f.firebaseapp.com
ruppysuppy / SmartsApp
具有端到端加密（E2EE）的完全跨平台的通讯应用程序。
注意：演示中展示的功能并不详尽。演示中仅展示核心功能。
应用程序的后端由 处理Firebase。
SmartsappGoogle AnalyliticsApp从概览页面创建项目Authentication部分Sign-in method标签Email/Password并Google登录Firestore部分Rules…需要一位顶级软件开发自由职业者来解决你的开发难题吗？在Upwork上联系我
想联系我吗？请在LinkedIn上联系我
关注我的博客，每两周在Medium上获取最新资讯
常问问题
这些是我经常收到的一些问题。希望这个常见问题解答部分能解决您的问题。
我是初学者，该如何学习前端 Web 开发？
可以参考以下文章：
你能指导我吗？
抱歉，我工作已经很忙了，没时间指导任何人。