DjangoでPWAに対応させてみよう！
趣味でお年寄り・認知症の方向けアプリを作る中で、URLなどの余計なバーを排除したいと思いPWAをやってみました！
記事が少なかったり、わからないことが多く、かなり時間を使ってしまいました💦
躓いたところをわかりやすく説明していこうと思います！（当方大学生で勉強中のため至らないところずくしです💦）
必要なもの・準備・基礎知識
基本情報として必要なものを先に書いておきます！(ほぼすべてコピペで実装可能です！！)
・project startとappが済んでいる前提です！
・manifest.json(アプリアイコンや名前を記載する)
・service-worker.js(オフラインでも動作するようにキャッシュなどを管理する)
・base.html(link relでbase.htmlにmanifest.jsonをインポート？して他HTMLで継承して使う)
・ngrok(HTTPSでしかPWAは動作しないので、今回はngrokを使用してHTTPS通信にする)
まずはdjango-pwaをインストールします
pip install django-pwa
settings.pyのINSTALLED_APPSに使用するアプリとして登録します
INSTALLED_APPS = [
"django.contrib.admin",
"django.contrib.auth",
"django.contrib.contenttypes",
"django.contrib.sessions",
"django.contrib.messages",
"django.contrib.staticfiles",
'storages',
'pwa', #追加
]
Staticフォルダを指定します（お好みのフォルダ）
今回は、ルートディレクトリにbackendとfrontendがあり、BASE_DIRにルートが設定されているので、ルートのフロントエンドのスタティックフォルダがStaticフォルダとして指定されています。
Staticの中にmanifestやservice_worker.jsonを起きていきたいと思います。
"""Staticの設定"""
STATIC_URL = "/static/"
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'frontend', 'static'),
]
manifest.jsonを書く
今回の場合、frontend/static/がありさらに、cssフォルダとjsフォルダを作っています
今回、manifest.jsonは
frontend/static/manifest.json
に作りたいと思います。
以下をコピーして、ご自身の内容に変えていきます。
{
"name": "アプリの名前を書く",
"short_name": "短い名前",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#000000",
"icons": [
{
"src": "小さいアイコンのパス",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "大きいアイコンのパス",
"sizes": "512x512",
"type": "image/png"
}
]
}
start_urlはpwaアプリがどこから始まるかを記載します。（めちゃ重要）
今回の場合、/を指定しているので、ルートURLからスタートになります。
例えば、
https://名前/top
というURLがあったときに、
"start_url": "https://名前/top",
と指定すると、topから始まるurlのみがPWAの対象になります。
つまり、https://名前/top/detail
などのtop/を経由するurlしか対象になりません。
すべてのサイトにPWAを適応するためには、
start_urlをルートURLから記載する必要があります。
すべてのサイトにPWAが適応されない問題があるときは、どこからPWAが開始されているかを調べてみると解決するかもしれません。
service_worker.jsを書く
キャッシュを管理するjsらしいです。（詳しいことは知りませんが、キャッシュについていろいろと指定できるらしいです）
self.addEventListener('fetch', function(event) {});
テンプレートでPWAを使えるようにする
今回はbase.htmlにPWA関連をインポートして、ほかのファイルにも継承して使えるようにしようと思います
<!DOCTYPE html>
<html lang="ja">
{% load static %} <!-- staticを読み込む -->
{% load pwa %} <!-- pwaを読み込む -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#000000">
<!-- PWA関連コピペ -->
<link rel="manifest" crossorigin="use-credentials" href="{% static 'manifest.json' %}">
{% progressive_web_app_meta %}
<title>{% block title %}My Django PWA{% endblock %}</title>
<!-- サービスワーカーを登録 -->
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('{% static "js/service_worker.js" %}').then(function(registration) {
console.log('ServiceWorker registered with scope:', registration.scope);
}).catch(function(error) {
console.log('ServiceWorker registration failed:', error);
});
});
}
</script>
</head>
<body>
{% block content %}
<!-- コンテンツはここに挿入されます -->
{% endblock %}
</body>
</html>
重要なところ
crossoriginを書かないと動かなかったし、{% progressive_web_app_meta %}を指定しないと動かなかった
{% load pwa %}
<!-- PWA関連コピペ -->
<link rel="manifest" crossorigin="use-credentials" href="{% static 'manifest.json' %}">
{% progressive_web_app_meta %}
そして、使いたいページに継承する
base.htmlにload staticを記載していても、継承先のHTMLでもload staticは必須
{% extends "base.html" %}
{% load static %}
これにて完成！！
ngrokでHTTPS通信にして動作確認
↓ngrok使い方参考
https://qiita.com/Wadachan69/items/590b5b9c1c916b59a54c
python manage.py runserverして、
ngrokで
ngrok http 8000
で公開
インストールできるか確認！
躓いたところ
・manifestで正しくアイコンを指定していないと動かない
・start_urlがルートになっていなかった(途中で詳しく解説しています)
・base.htmlでのpwaの読み込み方が分からなかった
まとめ！
情報が少なく、むずかった！！