后端开发教程 - Java、Spring Boot 实战 - msg200.com
制作 PWA 并不可怕
我的第一个 PWA
我的第一个 PWA
渐进式 Web 应用 (PWA) 是一个可以固定到主屏幕并像普通应用一样离线使用的网站。要将网站转换为 PWA，您需要添加一些元数据和脚本。我将把这些简化到最低限度——本例是一个简单的单页应用，只有一个index.html……
tl;dr您可以在 Glitch 上找到我的应用程序的源代码https://glitch.com/~shopsum
1. 您的网站必须使用 HTTPS
虽然很难，但确实如此。如果你的主机无法轻松设置 HTTPS，可以考虑迁移到 Netlify、GitHub Pages、Azure Websites 甚至 Glitch。所有这些服务默认都支持 HTTPS，而且大多数都是免费的！
2. 添加 manifest.json 并从 HTML 链接到它
这是一个最小的示例文件：
{
"name" : "MyApp",
"short_name" : "MyApp",
"description" : "Faith, hope, love",
"start_url" : "/",
"display" : "standalone",
"orientation" : "any",
"background_color" : "#FFF",
"theme_color" : "#FFF",
"icons": [
{
"src" : "/img/android-icon-512.png",
"sizes" : "512x512",
"type" : "image/png"
}
]
}
您不需要图标，但如果有，请编辑icons/src上述内容。您可以添加其他尺寸的图标。
可以display是：
fullscreen（像游戏一样）standalone（就像原生应用一样）minimal-ui（有一些浏览器控件）browser（就像浏览器标签一样）
3. 添加 Service Worker
不要惊慌，这很容易！
如果您的网站已经有在页面上运行的脚本，请添加以下语句main.js：client.js
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js');
}
...或者，<script>在页面上创建一个新标签并将其弹出到其中！
现在向项目中添加一个sw.js与您刚刚注册的位置相匹配的文件：
const version = 'v1';
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(version).then(function(cache) {
return cache.addAll([
'/',
'/index.html',
'/style.css',
'/tachyons.css',
'/vue.js',
'/script.js',
'/notfound.txt'
]);
})
);
});
self.addEventListener('fetch', function(event) {
event.respondWith(caches.match(event.request).then(function(response) {
// caches.match() always resolves
// but in case of success response will have value
if (response !== undefined) {
return response;
} else {
return fetch(event.request).then(function (response) {
// response may be used only once
// we need to save clone to put one copy in cache
// and serve second one
let responseClone = response.clone();
caches.open(version).then(function (cache) {
cache.put(event.request, responseClone);
});
return response;
}).catch(function () {
return caches.match('/notfound.txt');
});
}
}));
});
...并修改声明中注册的文件列表cache.addAll以适合您的网络应用程序。
4. 你做到了！👍
您的网站现已启用离线功能！
离线用户只能访问您上面列出的资源。因此，如果您的设置更复杂，则必须决定在哪里划定界限。Service Worker 是一个机器人脚本，它决定如何在用户离线时为其获取资源；Mariko 用精美的插图解释了Service Worker 的功能，这是迄今为止最好的 Service Worker 解释器。
如果你想创建一个专门的“哎呀，你离线了”页面，还有其他指南可以参考！（见下方资料来源）
当你修改应用时，你必须修改version变量才能刷新客户端！这很烦人。或许有人知道更好的办法！😅
来源
我参考了 SitePoint 的这份指南《将您的网站改造成渐进式 Web 应用》，虽然很简单，但还不够简单。MDN 的Service Workers Demo很棒，因为他们提供了我想要实现的源代码（所以我的sw.js代码基本上是抄袭的——这是他们的GitHub 源代码）。
谢谢
感谢阅读。希望这份精简版指南对您有所帮助！
鏂囩珷鏉ユ簮锛�https://dev.to/stegriff/making-a-pwa-doesn-t-have-to-be-scary-2i58