この勉強会にいきました
今日の勉強会はこれ!https://t.co/dwd6c8GoiJ#spzcolab#サポーターズ#サポーターズcolab
— ういろう🍤👩🍤@新卒3年目PHPer (@nyamucoro) 2018年6月28日
途中まで作ったページ
GitHub - klack710/study-pwa: pqa勉強会で使ったRepository。
まとめ
- PWAってなに?webページをアプリっぽく扱えるようにする
- ユーザーにキャッシュ持たせて、アプリっぽく
- だからオフラインでもキャッシュ使ってページ見れるよね
プッシュ通知とかも出せるけど、safari非対応・・・
manifest.jsonを作って、設定
- サービスワーカーを使って、ユーザーにキャッシュをもたせる
- github pages使ってたら、ドメイン直下にファイル置けないの気がついて今苦戦中
- 上のページはまだ使えません
ツイートまとめ
HTML1が生まれたのを1991.8.6に生まれたのか。
— ういろう🍤👩🍤@新卒3年目PHPer (@nyamucoro) 2018年6月28日
知らかなった・・・#spzcolab#サポーターズ#サポーターズcolab
2007.1.9にiphoneリリースされた。
— ういろう🍤👩🍤@新卒3年目PHPer (@nyamucoro) 2018年6月28日
もう10年前かー#spzcolab#サポーターズ#サポーターズcolab
web first。webありきで、スマートフォンが生きてるよね。
— ういろう🍤👩🍤@新卒3年目PHPer (@nyamucoro) 2018年6月28日
その後レスポンシブが流行った。
そしてmobile firstへ。#spzcolab#サポーターズ#サポーターズcolab
mobile firstだけど、まだUXが良くないよね。
— ういろう🍤👩🍤@新卒3年目PHPer (@nyamucoro) 2018年6月28日
じゃあどうしようってとこで、PWAをgoogleさんが言った。#spzcolab#サポーターズ#サポーターズcolab
■PWAの特徴の一部
— ういろう🍤👩🍤@新卒3年目PHPer (@nyamucoro) 2018年6月28日
ネットワークとか、接続に依存しない。オフラインでも動く。
Webなんだけど、アプリっぽく
最新のものを取ってくる
全ページSSL#spzcolab#サポーターズ#サポーターズcolab
プッシュ通知できるよ。
— ういろう🍤👩🍤@新卒3年目PHPer (@nyamucoro) 2018年6月28日
でも、サファリではできない。
manifestはあるけど・・・
だから完全PWA化ができない。#spzcolab#サポーターズ#サポーターズcolab
プッシュ通知は、環境用意大変なので、今回は扱わない。#spzcolab#サポーターズ#サポーターズcolab
— ういろう🍤👩🍤@新卒3年目PHPer (@nyamucoro) 2018年6月28日
■全ページSSL
— ういろう🍤👩🍤@新卒3年目PHPer (@nyamucoro) 2018年6月28日
PWAはHTTPS必須。
ついでに、PWAに使うサービスワーカーがHTTPS必須。
Firebaseやgithub pagesが無料でhttpsで公開できるから今便利ね。#spzcolab#サポーターズ#サポーターズcolab
■webページをアプリ化
— ういろう🍤👩🍤@新卒3年目PHPer (@nyamucoro) 2018年6月28日
manifest.jsonがキーになるよ#spzcolab#サポーターズ#サポーターズcolab
クロームにはサービスワーカーあるよ#spzcolab#サポーターズ#サポーターズcolab
— ういろう🍤👩🍤@新卒3年目PHPer (@nyamucoro) 2018年6月28日
キャッシュするものをどんどん入れていく
— ういろう🍤👩🍤@新卒3年目PHPer (@nyamucoro) 2018年6月28日
すると、オフラインでも動くよね。#spzcolab#サポーターズ#サポーターズcolab
Lighthouseを使う
— ういろう🍤👩🍤@新卒3年目PHPer (@nyamucoro) 2018年6月28日
chromeの検証のauditsにLighthouseがあって、速度のやつが見れるよ。
評価がわかるよー#spzcolab#サポーターズ#サポーターズcolab
Lighthouse使うと、サイトの点数教えてくれる。
— ういろう🍤👩🍤@新卒3年目PHPer (@nyamucoro) 2018年6月28日
クリックすると、何しなきゃいけないか教えてくれるよ。
PWAやるならこれ使うべき#spzcolab#サポーターズ#サポーターズcolab
Can I Use
— ういろう🍤👩🍤@新卒3年目PHPer (@nyamucoro) 2018年6月28日
で、ブラウザの対応状況見れるよね。うん、私もよく使ってる。
push API、safariが全滅してるううううう
プッシュするなら、サーバー側で頑張るか・・・#spzcolab#サポーターズ#サポーターズcolab
PWAのgoogleのドキュメントが日本語化されたよ。
— ういろう🍤👩🍤@新卒3年目PHPer (@nyamucoro) 2018年6月28日
Progressive Web App Checklistとかあるよ#spzcolab#サポーターズ#サポーターズcolab