エンジニアのひよこ_level10

毎日更新してた人。たまに記事書きます。

PWAの基礎のハンズオン行きました【258日目】

日記勉強会の雑メモ

この勉強会にいきました

今日の勉強会はこれ！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に生まれたのか。
知らかなった・・・#spzcolab #サポーターズ #サポーターズcolab
— ういろう🍤👩🍤@新卒3年目PHPer (@nyamucoro) 2018年6月28日

2007.1.9にiphoneリリースされた。
もう10年前かー#spzcolab #サポーターズ #サポーターズcolab
— ういろう🍤👩🍤@新卒3年目PHPer (@nyamucoro) 2018年6月28日

web first。webありきで、スマートフォンが生きてるよね。
その後レスポンシブが流行った。
そしてmobile firstへ。#spzcolab #サポーターズ #サポーターズcolab
— ういろう🍤👩🍤@新卒3年目PHPer (@nyamucoro) 2018年6月28日

mobile firstだけど、まだUXが良くないよね。
じゃあどうしようってとこで、PWAをgoogleさんが言った。#spzcolab #サポーターズ #サポーターズcolab
— ういろう🍤👩🍤@新卒3年目PHPer (@nyamucoro) 2018年6月28日

■PWAの特徴の一部
ネットワークとか、接続に依存しない。オフラインでも動く。
Webなんだけど、アプリっぽく
最新のものを取ってくる
全ページSSL #spzcolab #サポーターズ #サポーターズcolab
— ういろう🍤👩🍤@新卒3年目PHPer (@nyamucoro) 2018年6月28日

プッシュ通知できるよ。

でも、サファリではできない。
manifestはあるけど・・・
だから完全PWA化ができない。#spzcolab #サポーターズ #サポーターズcolab
— ういろう🍤👩🍤@新卒3年目PHPer (@nyamucoro) 2018年6月28日

プッシュ通知は、環境用意大変なので、今回は扱わない。#spzcolab #サポーターズ #サポーターズcolab
— ういろう🍤👩🍤@新卒3年目PHPer (@nyamucoro) 2018年6月28日

■全ページSSL
PWAはHTTPS必須。
ついでに、PWAに使うサービスワーカーがHTTPS必須。

Firebaseやgithub pagesが無料でhttpsで公開できるから今便利ね。#spzcolab #サポーターズ #サポーターズcolab
— ういろう🍤👩🍤@新卒3年目PHPer (@nyamucoro) 2018年6月28日

■webページをアプリ化
manifest.jsonがキーになるよ#spzcolab #サポーターズ #サポーターズcolab
— ういろう🍤👩🍤@新卒3年目PHPer (@nyamucoro) 2018年6月28日

クロームにはサービスワーカーあるよ#spzcolab #サポーターズ #サポーターズcolab
— ういろう🍤👩🍤@新卒3年目PHPer (@nyamucoro) 2018年6月28日

キャッシュするものをどんどん入れていく
すると、オフラインでも動くよね。#spzcolab #サポーターズ #サポーターズcolab
— ういろう🍤👩🍤@新卒3年目PHPer (@nyamucoro) 2018年6月28日

Lighthouseを使う

chromeの検証のauditsにLighthouseがあって、速度のやつが見れるよ。
評価がわかるよー#spzcolab #サポーターズ #サポーターズcolab
— ういろう🍤👩🍤@新卒3年目PHPer (@nyamucoro) 2018年6月28日

Lighthouse使うと、サイトの点数教えてくれる。

クリックすると、何しなきゃいけないか教えてくれるよ。
PWAやるならこれ使うべき#spzcolab #サポーターズ #サポーターズcolab
— ういろう🍤👩🍤@新卒3年目PHPer (@nyamucoro) 2018年6月28日

Can I Use
で、ブラウザの対応状況見れるよね。うん、私もよく使ってる。

push API、safariが全滅してるううううう
プッシュするなら、サーバー側で頑張るか・・・#spzcolab #サポーターズ #サポーターズcolab
— ういろう🍤👩🍤@新卒3年目PHPer (@nyamucoro) 2018年6月28日

PWAのgoogleのドキュメントが日本語化されたよ。

Progressive Web App Checklistとかあるよ#spzcolab #サポーターズ #サポーターズcolab
— ういろう🍤👩🍤@新卒3年目PHPer (@nyamucoro) 2018年6月28日