miilClient PWA

miilClient PWA

2018年版のmiilClientを勝手に作った daiiz
miilの画像を眺められるだけのビューワーアプリ
appロジックは2017年版を流用しつつ、viewをフルスクラッチした


PolymerやめてピュアなCustomElementで実装
必要な部品を作り直した
scroll-header-panel

ServiceWorkerを導入してオフラインキャッシュを実装
アプリの画面を構成する静的リソースをキャッシュ
html, js, css, fonts, image
ユーザーコンテンツをキャッシュ
自分が投稿した画像

Comlinkを使ってみた
clientとServiceWorker間のpostMessageを手軽に書ける
postMessageで画像の逐次キャッシュをSWに依頼してる

Google Chrome Canaryで先行的に試せる
Web App Manifest
theme color, app iconsを設定するだけでテンション上がる
macOSのDockに置ける

Intersection Observer APIを用いた無限スクロール

Herokuで動いてる
GitHubのmaster branchにmergeされたら自動でデプロイされる

Random Buttonを置いた
ScrapboxのRandom Jump Buttonが超良かったので
漠然とお腹が空いたけど何を食べたいかまでは分からないときに押すボタン
夕飯を決められないときに重宝している 2024/10
カテゴリをランダムに選んで表示する
Powered by Helpfeel