NOTE 079 / 2021年
部品としての画面をオフラインに置く
Web Components を使って、オフラインでも開ける小さなアプリを作ります。
読了目安 約2分
LitElement は、Web Components を書きやすくするための小さなライブラリです。画面の一部を独立した要素として作り、属性やプロパティで値を受け取る形にすると、他のページでも再利用しやすくなります。
PWA にする場合は、 manifest とサービスワーカーを用意し、オフライン時の表示を決めます。キャッシュする範囲を広げすぎると更新が届きにくくなるため、まずは静的なファイルだけを対象にします。
押さえたい点
- 01要素を独立した部品として作る
- 02キャッシュ範囲を小さく始める
- 03更新が届くかを確認する
参考資料
外部サイトが開きます。内容は各サイトの管理下にあります。
- Lit ドキュメント 外部サイトlit.dev
- Lit コンポーネント 外部サイトlit.dev
- TypeScript ドキュメント 外部サイトtypescriptlang.org
- MDN PWA 外部サイトdeveloper.mozilla.org
- web.dev PWA 外部サイトweb.dev
- Service Worker API 外部サイトdeveloper.mozilla.org
- Web App Manifest 外部サイトdeveloper.mozilla.org
- オフラインの作り方 外部サイトweb.dev
- web.dev 外部サイトweb.dev
- TypeScript の設定 外部サイトtypescriptlang.org
- MDN Web Docs 外部サイトdeveloper.mozilla.org
- React リファレンス 外部サイトreact.dev
- W3C WAI 外部サイトw3.org