在使用Django创建的WEB应用中引入PWA的方法
简介
因为Django和Python是我作为初学者创建的WEB应用程序，并且在引入PWA时，虽然有一些关于PWA的日文文章，但几乎没有关于在Django中引入PWA的示例的文章，对于引入非常困难，所以我决定将其作为备忘录保存在文章中。
PWA是什么
渐进式网络应用（Progressive Web Apps）是由谷歌开发的一种能使WEB应用等在移动设备上像本地应用一样运行的机制。通过引入这种机制，用户不再需要通过浏览器访问，只需要点击添加到主屏幕的图标即可访问WEB应用。
在Django的WEB应用中引入
本题是关于PWA的。
这次的目标是在桌面版和安卓版的Chrome上安装PWA，版本将使用Django 2.2.4。
完成的代码已经在Github上公开了。
https://github.com/kitune-chan-250r/pwa-sample
创建Django项目和应用程序
django-admin startproject mypwa
我要前往mypwa，并创建一个名为pwatest的应用程序。
python manage.py startapp pwatest
将应用程序添加到mypwa/mypwa/setting.py文件中。
# 省略
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'pwatest', #追加
]
# 省略
服务器启动
python manage.py runserver
只要按照下面的显示，就没有问题。
Watching for file changes with StatReloader
Performing system checks...
System check identified no issues (0 silenced).
You have 17 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.
October 22, 2019 - 23:52:56
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
创建一个最基本的网页应用程序。
我的PWA/mypwa/urls.py
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('pwatest.urls'))
]
mypwa/pwatest/urls.py （创建一个新的文件）
from django.urls import path, include
from .views import *
urlpatterns = [
path('', index, name='index')
]
mypwa/pwatest/views.py (我的PWA / PWA测试 / 视图.py)
from django.shortcuts import render
def index(request):
return render(request, 'index.html')
在中文中，将以下内容进行重新表达，只需给出一个选项：
mypwa/pwatest/templates/index.html (创建一个 templates 文件夹，并在其中创建 index.html 文件)
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>PWA test page</h1>
</body>
</html>
在此状态下，当访问http://127.0.0.1:8000/时，应该会出现一个写着”PWA测试页面”的页面。
添加PWA所需的设置和文件
在已经开发了最基础的Web应用的基础上，我们将引入PWA。
为了使PWA可以安装，以下是必需的最基础的项目（摘自https://developers.google.com/web/fundamentals/app-install-banners）。
Includes a web app manifest that includes:
・short_name or name
・icons must include a 192px and a 512px sized icons
・start_url
・display must be one of: fullscreen, standalone, or minimal-ui
Served over HTTPS (required for service workers)
Has registered a service worker with a fetch event handler
简单来说，manifest.json文件中包含了short_name和name中的一个（在我的环境中两者都是必需的）、192px和512px大小的图标设置、start_url、display（fullscreen、standalone、minimal-ui中的一个）等内容。此外，该文件需要通过HTTPS进行传输，并且必须使用service worker进行注册。对于本地主机的情况，似乎也可以使用http进行操作。
为了满足这些条件，我们将对之前的Web应用程序进行修改。
我PWA / pwatest /模板/ index.html
<!DOCTYPE html>
<html>
<head>
<title>pwa test</title>
<!-- ここから -->
<link rel="manifest" href="static/manifest.json">
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('sw.js').then(function() { console.log('Service Worker Registered'); });
}
</script>
<!-- ここまで追加 -->
</head>
<body>
<h1>PWA test pwage</h1>
</body>
</html>
mypwa/mypwa/setting.py（添加到底部）
#省略
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
mypwa/mypwa/urls.py 的中文释义是：我的PWA/我的PWA/网址.py。
from django.contrib import admin
from django.urls import path, include
#追加
from django.views.generic import TemplateView
from django.views.decorators.cache import cache_control
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('pwatest.urls')),
#追加
path('sw.js', (TemplateView.as_view(template_name="sw.js",
content_type='application/javascript', )), name='sw.js'),
]
這個urls.py檔案是最重要的部分，是我在搜尋時幾乎找不到資料且卡住的關鍵點。
我们将从这里开始创建PWA所需的文件。
创建mypwa/static/manifest.json文件（在static文件夹下创建manifest.json文件）
{
"background_color": "#1f1f1f",
"description": "pwa test",
"display": "standalone",
"theme_color": "aliceblue",
"icons": [{
"src": "icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},{
"src": "icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}],
"name": "pwaapp",
"short_name": "pwaapp",
"start_url": "http://127.0.0.1:8000"
}
请注意，在templates文件夹中创建mypwa/pwatest/templates/sw.js文件（注意不是在static文件夹中）。
self.addEventListener('fetch', function(event) {});
在最后，将icon-192×192.png和icon-512×512.png添加到static文件夹中， PWA的部署就完成了。
确认行动
电脑
如果导入成功，当使用PC版的Chrome进行访问时，URL的右侧会出现一个加号标志，通过点击该标志即可进行安装。安装后，在桌面上会出现设置的图标，通过点击该图标即可直接访问Web应用程序。
谷歌浏览器的安卓版本
您还可以将其部署到Heroku等PaaS上进行确认。在这种情况下，将会出现一个应用程序添加横幅在主屏幕上，通常在第二次访问之前会有至少5分钟的间隔显示横幅。但在调试时，您可以访问chrome://flags/#bypass-app-banner-engagement-checks并启用它，这样第一次访问时横幅将会显示出来。
給你一個額外的禮物。
只有iOS设备！无法调试！我想可能也有其他人感到困惑吧（我自己也是如此）。
在我的环境中，无法在Nox等模拟器上进行操作确认，这让我非常困扰。然而，在Chrome浏览器的扩展功能中，有一个名为ApkOnline的Android模拟器可以在浏览器中运行，并且可以通过它来进行PWA的安装操作确认。真是太令人惊讶了（不过运行速度非常慢）。如果实在没有其他办法，可以尝试一下。
最后
这是我作为初学者写的初级Qiita文章，不知道对您有没有帮助，因为我无法进行深入解释，所以希望有更多关于django + pwa的日文文章。
我正在开发一种使用Stream API的Twitter客户端，它不会以从上到下的方式显示推文。请务必尝试使用。
以下是本地化的中文翻译（仅提供一种选项）：
参考页面：
将应用添加到主屏幕（英文）- https://developers.google.com/web/fundamentals/app-install-banners
入门渐进式网络应用程序 – https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp
使用3个步骤实现PWA中的“添加到主屏幕”横幅 – https://amymd.hatenablog.com/entry/2017/10/12/001612
我在中国有去过一些地方，我也参考了Stack Overflow。
多余之物
我正在开发一种使用Stream API的Twitter客户端，它不是将推文从上到下流动的类型。请务必尝试使用。
