よく分かってなくてもNuxt.jsでPWAが作れた話

GitHub Edit Page
この記事は公開から1年以上が経過しています。内容が一部古い箇所があります。

この記事はPWA Advent Calendar 2018の 6 日目の記事になります。 既視感のあるタイトルですが気にしないでください。

毎年何かしら自分のレベルに合わせて新技術に触れてみる・作ってみるみたいなのを課してるのですが、 今年個人的にチャレンジしてみようと思ったものの１つに PWA があります。

毎年何かしら自分のレベルに合わせて新技術に触れてみる・作ってみるみたいなのを課してるのですが、 今年個人的にチャレンジしてみようと思ったものの１つに PWA があります。

そこで今回は大した知識が無くとも PWA を作ることができた話をしようと思います。 内容として他の皆様と大したことやってないかもですが、こんなんでも形になったぞというのを知ってもらいたいのもあるので温かい目で見てくださいませ。

Reading…

Reading… Logo

日頃自分が見ているニュースを集約してまとめてみたらどうなるだろうか、情報の蓄積・可視化みたいなのを考えておりそういうのができないかなと思ってそれを題材に PWA にしてみようと思いました。以下は経緯みたいなやつです。

情報収集ってどうしてる？ - YAMALT vol.04

動作イメージ

Reading… iPhoneシュミレーターによる実動作イメージ図

自分が最近見た 20 件のニュース × ５ページ分にした計 100 件を表示。 ページ間はページネーションで動きます。

使用技術

APIホスティングフレームワーク
Slack API
AWS API GateWay		NetlifyNuxt.js

Nuxt.js のプラグイン・モジュールは以下を使用

あと当初は Nuxt1.0 で作成していましたが、今年の 2.0 の発表に合わせてアップデートしました。

Nuxt 2 で generate した PWA サイトです https://twitter.com/yamanoku/status/1043119076489318401

フローチャート

図です。

フローチャート 以下説明

パフォーマンス

lighthouse

上記設定で計測。Perfomance 部分は変動ある感じですがだいたいこんな感じ

2018/9/6 計測

Perfomance 91, PWA 96, Accessibility 88, Best Practice 100, SEO 100

2018/12/2 計測

Perfomance 95, PWA 96, Accessibility 90, Best Practice 100, SEO 100

WebPageTest

上記設定で計測。

2018/9/6 計測

https://www.webpagetest.org/result/180905_90_60fd3b52c101b6aaeb61fda8ac192468/

2018/12/2 計測

https://www.webpagetest.org/result/181202_Q9_0b087ea9b135cf3ee5e8c790e07853a7/

Fixed & Updates

あんまり PWA 要素と関係ないかもですが、更新したことなど。

ページネーションをクリックするとスクロール位置が保存されたままになってる

methods: {
  onPageChange() {
    document.getElementsByClassName('news-list')[0].scrollTop = 0;
  }
}
<paginate-links for="lists" @change="onPageChange" <!-- ここ -->
  :show-step-links="true" :limit="2">
</paginate-links>

絵文字がパースされていない

🔥の絵文字が :fire: として出力されている

単純にパースしてあげればいいのかなと思ったので、 node-emoji を使いました。

🔥絵文字が適応された

👍👍👍👍👍

ページネーションのボタンアクセシビリティ対応

今回ページネーションのライブラリで使用したvue-paginateですが、<a>タグのみでhrefで明確なリンク遷移が明示されていない、リンクとして未完成な状態のままでした。 また、tabindex指定もないのでタブキーでのフォーカスも効かない状態でした。

そこでページネーションのボタン部分をリンク要素としてではなくbuttonタグに変更して、意味あるタグを設置・タブにおけるフォーカスの両方を解消しようと思いました。

ただ、この内容について Issue で報告する・プルリクエストを提出することを考えた時、個人での運用なのでいつ見てもらえるか・かつ受け入れられるかもわからないという不安がありました。

そこで、リポジトリを fork して自分専用用のモジュールを作ったほうが早いと感じたので、早速対応しました。

aタグからbuttonタグに変更してタブキーのフォーカスが効くようになった

ただ、開閉時のaria-expandedほか WAI-ARIA 部分などはまだまだ対応しきれていないので、今後も改良する余地はありそうです（自前実装になる？）。

今後の更新・TODO など

以下 Scrapbox のページにて順次手作業で更新予定です

https://scrapbox.io/yamanoku/Reading…

PWA を作ってみての感想

以上になります。ご覧いただきありがとうございました。 明日（12/7）は@lemon2003さんになります。

【弊社アドベントカレンダー PR】

株式会社GEEK ロゴ

最後に宣伝になりますが、私が所属している株式会社 GEEKでもアドベントカレンダーをやっております。良ければご覧になってみてください。 自分はこのアドベントカレンダーほか色んな所に出張執筆予定です。

GEEK アドベントカレンダーの次回担当はマークアップエンジニアの大房さんになります。

アーカイブ記事のため、内容に関する更新依頼は受け付けておりませんが、誤字や脱字などありましたらご連絡ください。

この記事に関する修正依頼
アーカイブ一覧へ戻る