PWAあるあるです。 たまにないないも入ってます。

1. PWAあるある
1

2. ⾃⼰紹介
2
はらだ
東⼤修⼠2年
AI系のスタートアップのWebのお仕事
(フロント、バック、インフラ)
スポーツチーム⽤動画ストレージサービス
メイン
器械体操
@program_diary

3. ClubCloud
3
練習法やコツを共有、蓄積するサービス
動画⽐較機能
スクリーンショットへの
描きこみ
匿名コメント
メイン : チームでの共有
将来 : スポーツのプラットフォーム

4. もうちょっとだけご紹介
4タイムライン 検索

5. 5
初⼼者回ということで
そこまでコードには踏み込まないです
PWAがどんな感じなのか知ってもらえれば︕
PWAあるあるを紹介

6. あるある1
6
DjangoでPWAどう実装するか悩む

7. Dango⽤のライブラリ
7
django-progressive-web-app を使う
h=ps://medium.com/beginners-guide-to-mobile-
web-development/convert-django-website-to-a-
progressive-web-app-3536bc4f2862
settings.pyにアイコンやserviceWorker.jsのパスを
設定するだけで良い
参考

8. あるある2
8
ユーザーがPWAだと気づかないし
そもそもPWAのインストール⽅法知らない

9. 登録画⾯
9
iOS PWAAndroid
iOSではCookieとlocalStorageがPWAとブラウザで共有されない
PWAインストール後にログインが必要なので登録前インストールが望ましい

10. PWA、OSで条件分岐
10
PWA
window.matchMedia('(display-mode: standalone)').matches)
iOS
navigator.userAgent.match(/(iPhone|iPad|iPod)/)
Android
navigator.userAgent.match(/(Android)/)

11. あるある3
11
アドレスバー消したら
画⾯遷移⽅法なくなる

12. 画⾯遷移の⽅法
12
スワイプで画⾯遷移を実装
右にスワイプ ➡ 「戻る」
左にスワイプ ➡ 「進む」
スワイプの
⾓度(
!
"
以下 )
距離(30px以上)
速度(200px/s以上)
で判定

13. スワイプ遷移のいろいろ
13
・エッジスワイプでも良いが…
・Androidではなぜか縦スクロールでも反応…
画⾯が⼤きいスマホではエッジスワイプしづらい
(拡⼤傾向)
ユーザーがスワイプ遷移のon/offを選択できる
かつ、ユーザー登録時にAndroidユーザーのみ
デフォルトをoffに

14. あるある4
14
ブラウザの機能
(URLコピー、リロード、シェア)
を使いたい

15. ⾃分で実装
15
WebShareAPIメニューで⾃作

16. URLコピーとWebShareAPI
16
URLコピー(OSで使い分け) WebShareAPI

17. あるある5
17
たまにアプリが再起動し
トップページに戻る

18. iOSでの謎の挙動への対処
18
・セッションが切れたわけではない
(ログインは維持)
・バックグラウンドでキルしたわけでもない
(キルしてもPWAは画⾯を維持)
画⾯遷移時には毎回現在のURLをlocalStorageに保存
トップページに遷移してしまっていたら、最後にい
た画⾯にリダイレクト

19. トップページからのリダイレクト
19
意思を持ってトップページに⾏った時と区別するため
historyを確認(1以下なら謎の挙動による遷移)

20. あるある6
20
Push通知できない

21. Push通知の代替
21
LINENotifyで通知
iOSはLINEブラウザで開いてしまうので、
URL+?openExternalBrowser=1
でせめて外部ブラウザで開かせる

22. PWAからのLINE認証
22
PWAから認証画⾯に⾶ぶと、エラー(iOS)
ブラウザで開いてから認証させなければ
いけない…

23. あるある7
23
ServiceWorkerがCacheから動画を
200で返すせいでSafariで再⽣できない

24. Safariは206の動画しか再⽣できない
24
Safariでは、ステータスコード206(Partial
Content)の動画しか再⽣できない
(Nginxだとrange requestに対応するためにproxy_force_ranges on;を
加えたりする)

25. 206に書き換えるか、そもそもキャッシュしない
25
Service Worker(PWA)でRangeリクエストに対応する
h=ps://qiita.com/biga816/items/dcc69a265235f1c3f7e0
・206に書き換える
・そもそも動画はキャッシュしない
response.status === 200 の時だけキャッシュ
サーバー
キャッシュ
206
200
ブラウザ
206

26. あるある8
26
CacheAPIではリクエストとレスポンスを
コピーして使わないといけない

27. 使い回す時はClone()
27
リクエストとレスポンスは1回ずつしか使えない
キャッシュでアンマッチ後のFetchの際は
let clone_request = event.request.clone() を使う
クライアントへの表⽰に使った後、キャッシュにも⼊れる
際は
let clone_response = response.clone()を使う

28. あるある9
28
オフライン対応したい

29. 2つのオフライン対応
29
・⼀度遷移済みのページのオフライン対応
➡ ページごとキャッシュ
・未遷移のページのオフライン対応
➡ オフライン⽤ページのプリキャッシュ
navigator.onLineでオフラインかを判別、
ページキャッシュがなければoffline⽤ページを表⽰

30. オフラインページ
30
オフライン対応 オフライン未対応

31. PWAの弱点
31
まぁいろいろありますが…
僕が思うのは、
アプリっぽく⾒えることで、
ハードルが上がってしまうこと

32. PWAの弱点
32
しかしユーザーから⾒える機能は結局ブラウザベース
・アプリ未満の処理速度
・他のアプリとの連携が苦⼿
・バックグラウンド処理不可
・動画圧縮、変換、トリミングできない
・再⽣できない動画形式 など
⽐べる対象が、Webページからアプリへ変わる
Webページなのに頑張ってる
ではなく
アプリなのに出来てない
というユーザー評価

33. PWAの使い所(?)
33
・機能に関してブラウザベースで事⾜りるアプリ
・もしくは、本命前のプロトタイプとして検証⽤に
(変更が即時反映される、クロスプラットフォーム)
ReactNative, Flutter等 でも良い…︖

34. 34
クラウドファンディング中
@program_diary
からとべるので、
是⾮ご協⼒お願いします
(1000円から、ログインなし)