miilClient PWA
2018年版のmiilClientを勝手に作った daiiz.icon
miilの画像を眺められるだけのビューワーアプリ
appロジックは2017年版を流用しつつ、viewをフルスクラッチした
https://gyazo.com/3a40e2510bc53c9fa87731cf36e19833https://gyazo.com/b5cfe062ee9dd45482c43db021eb489b
https://miilclient.daiiz.dev/
PolymerやめてピュアなCustomElementで実装
必要な部品を作り直した
scroll-header-panel
https://github.com/daiiz/griddles2
ServiceWorkerを導入してオフラインキャッシュを実装
https://gyakky.herokuapp.com/svgyazo/0cfd618a43c94555f31d945e8e1ad930.svg
アプリの画面を構成する静的リソースをキャッシュ
html, js, css, fonts, image
ServiceWorkerを用いたキャッシング戦略 ~Wikiアプリケーションを例に~#5bf79e09adf4e70000de463d
ユーザーコンテンツをキャッシュ
自分が投稿した画像
Comlinkを使ってみた
clientとServiceWorker間のpostMessageを手軽に書ける
postMessageで画像の逐次キャッシュをSWに依頼してる
Desktop PWA
Google Chrome Canaryで先行的に試せる
Web App Manifest
theme color, app iconsを設定するだけでテンション上がる
https://gyakky.herokuapp.com/svgyazo/8095f1068e628f0fb247ccec499f871e.svg
macOSのDockに置ける
Intersection Observer APIを用いた無限スクロール
Herokuで動いてる
GitHubのmaster branchにmergeされたら自動でデプロイされる
Random Buttonを置いた
ScrapboxのRandom Jump Buttonが超良かったので
漠然とお腹が空いたけど何を食べたいかまでは分からないときに押すボタン
夕飯を決められないときに重宝している 2024/10
カテゴリをランダムに選んで表示する