渐进式 Web 应用程序 (PWA)是一种使用 Web 技术开发的应用程序，可以像传统应用程序一样安装在任何设备上。创建一个简单的 PWA 非常容易，因为它涉及向项目添加两个重要文件manifest.json和serviceworker.js 。之后，PWA 就可以安装在任何操作系统上了。
按照在 5 分钟内制作一个简单的 PWA 教程来构建一个 PWA（或）按照下面给出的步骤来创建一个 PWA。
步骤 1：在放置 index.html 文件的同一目录中创建一个manifest.json 文件。此文件包含应用程序名称、启动 URL、主题颜色和一些关于应用程序的 JSON 格式的更多基本信息
Javascript
{
"name": "Django Blogiee",
"short_name": "Django Blogiee",
"description": "PWA for django Blogiee",
"start_url": "/",
"display": "standalone",
"scope": "/",
"orientation": "any",
"background_color": "#ffffff",
"theme_color": "#000000",
"status_bar": "default",
"icons": [
{
"src": "/static/icons/Django-Blogiee.1b98d36d50a7.png",
"sizes": "512x512",
"purpose": "any maskable"
}
],
"dir": "ltr",
"lang": "en-US" }Javascript
var staticCacheName = "django-blogiee-v" + new Date().getTime();
var filesToCache = [
'/static/icons/Django-Blogiee.1b98d36d50a7.png',
];
self.addEventListener("install", event => {
this.skipWaiting();
event.waitUntil(
caches.open(staticCacheName)
.then(cache => {
return cache.addAll(filesToCache);
})
)
});
self.addEventListener("fetch", event => {
event.respondWith(
caches.match(event.request)
.then(response => {
return response || fetch(event.request);
})
.catch(() => {
return caches.match('/offline/');
})
)
});
});Javascript
第 2 步：创建serviceworker.js ，这是一个与 manifest.json 位于同一目录中的 JavaScript 文件，用于处理 PWA 应用程序的安装和缓存。
Javascript
var staticCacheName = "django-blogiee-v" + new Date().getTime();
var filesToCache = [
'/static/icons/Django-Blogiee.1b98d36d50a7.png',
];
self.addEventListener("install", event => {
this.skipWaiting();
event.waitUntil(
caches.open(staticCacheName)
.then(cache => {
return cache.addAll(filesToCache);
})
)
});
self.addEventListener("fetch", event => {
event.respondWith(
caches.match(event.request)
.then(response => {
return response || fetch(event.request);
})
.catch(() => {
return caches.match('/offline/');
})
)
});
});
第 3 步：使用 index.html 中的
