LighthouseにはPWAの項目があるので、満点をとるのが目標です。

1. Google Lighthouseの
PWA項目で満点をトル！
そう、MTで。
アイデアマンズ 能勢

2. 自己紹介
能勢弘光（ノセ ヒロミツ）
アイデアマンズ株式会社
新規事業部グロースハッカー
自動画像最適化ツール
LightFileを担当
コミュニティ：MT東京
MTDDC Meetup TOKYO 2016
実行委員長
大規模向け
Movable Type × eCommerce

3. エンジニアさん向けではありません
いろいろやりたがりなディレクター向けです

4. Lighthouse PWA
Movable Type

5. そもそもどうしてPWAしたいの？
ウェブブラウジングしてて

6. そもそもどうしてPWAしたいの？
•デスクトップ通知がほしいと思う人
•ブラウザ通知がほしいと思う人
ウェブブラウジングしてて
いますか？

7. ところで
iPhone Safariで、
PWA使えませんよね。
みなさん、Androidですか？

8. そもそもどうしてPWAしたいの？
•日本はみんなiPhoneじゃないの？
•iPhone対応してないんでしょ？
もっと技術を使おう！取り入れよう！
話はその後だ！

9. 今回の目的
＜Pagespeed InsightsのエンジンがLighthouseだから＞
Google Lighthouseの
PWA項目で満点をとる

10. Lighthouse 使っ
てますか？
• Googleの提供する監査ツール
• Pagespeed Insightsのエンジン
• コマンドラインか、ChromeのDevTools
で利用
• 最新版は、4.1.0？

11. Google PageSpeed Insight
2018年
11月14日
から

12. Google Lighthouse

13. Google Lighthouse 結果

14. LighthouseのWPA監査項目
• 全部で12項目
• 重要なのは6項目
• 残りの6項目は、最適化用の項目

15. LighthouseのWPA監査項目
重要6項目

16. LighthouseのWPA監査項目
最適化6項目

17. Movable Typeで作ったサイトでやること
1. manifest.jsonの作成
2. アイコン画像(PNG)の作成
3. serviceWorker.jsの作成
4. offline.htmlの作成

18. Movable Typeで作ったサイトでやること
その他
1. ウェブサイトのはhttps化しておきましょう
2. httpからhttpsにリライトするようにしておきましょう

19. manifest.jsonを作る
ここで作れました。
アイコンのサムネイルも作ってくれます。
https://app-manifest.firebaseapp.com/

20. manifest.jsonを作る

21. ServiceWorker.jsを作る
＜PWA対応で一番よくわからないもの＞
1. オフライン時にステータスコード200を返す
2. キャッシュを表示する！

22. ServiceWorker.jsを作る
ここの内容をコピペしましたｗ
https://qiita.com/OMOIKANESAN/items/13a3dde52
5e33eb608ae

23. ServiceWorker.jsを作る

24. offline.htmlを作る
• インデックステンプレートで作ろう
• 中身は、オフライン時に表示するページです。お好きなものを。
• 再構築のたびに最新の情報に更新しておけば、オフラインでもなん
とかなるかも？
• 独自オフラインコンテンツを考えるのもいいかも

25. Google Lighthouse 結果

26. Google Lighthouse 結果
速いインフラ、サーバ
ServiceWorker.jsで設定
ServiceWorker.jsで設定
インフラ、サーバ
Manifest.jsonで設定
ServiceWorker.jsで設定

27. Google Lighthouse 結果
インフラ、サーバ
manifest.jsonで設定
HTMLで設定
HTMLで設定
HTMLで設定
???

28. Lighthouse デモ