オンラインで新聞を読むときのいちばんの不満は、デザインではなくトンネルです。読者は家で号を開き、駅の間で電波が途切れる電車の中で読み終えます。Inkfold 1.1では、電子版をインストール可能なWebアプリにし、開いた号をオフラインでも読めるようにしました。アプリストアも別のコードベースも不要です。
編集部の設定から生成するマニフェスト
Webアプリマニフェストは静的ファイルではなくルートとして提供しています。発行元の設定からサイト名、キャッチフレーズ、ブランドカラーを取り込み、3つのアイコンを指定します。拡大縮小できるSVGと、192ピクセルと512ピクセルのPNGで、大きい方はmaskable指定にしてAndroidがどんな形にも切り抜けるようにしています。編集部が新聞名を変えれば、インストール済みアプリの名前も変わります。再ビルドは不要です。
3つのシンプルなルールのService Worker
Service Workerは一気に読み切れる小ささに保ちました。
- 紙面画像と静的ファイルはキャッシュ優先。ファイル名にランダムな部分が含まれ変わることがないので、キャッシュは常に正しい内容です。
- HTMLはネットワーク優先。オンラインなら常に今日の1面が表示され、キャッシュはネットワークが使えないときだけ使います。
- 編集画面と読者アカウントはキャッシュしない。管理画面とアカウントページへのリクエストは直接ネットワークに送ります。
キャッシュ名にはバージョンを付け、新しいService Workerが有効になったときに古いバージョンを削除するので、更新後に古いファイルが残ることはありません。
リーダーが号全体を要求する
読者がたまたま見たものだけを保存すると抜けが生じます。そこで号を開くと、リーダーのスクリプトが、訪問者が閲覧を許されたすべてのページの中サイズ画像をService Workerにメッセージで伝え、Workerが足りないものを1号あたり最大80枚までバックグラウンドで取得します。ロックされた有料ページがこのリストに入ることはありません。権限のない訪問者には、そもそも画像が送られないからです。
記事をあとで読むために保存
オフライン閲覧と相性がよいのが「あとで読む」リストです。ログインした読者は記事や切り抜きをワンタップで保存でき、媒体名・日付・ページとともにアカウントページに表示されます。保存処理は冪等なので、二度タップしても同じ記事が二重に保存されることはありません。また最初に権限を確認するため、有料号のロックされたページの記事は、読む権限のない人には保存できません。
ポイント
- マニフェストを設定から生成し、インストールしたアプリがブランドに従うようにする。
- 変わらないファイルはキャッシュ優先、HTMLはネットワーク優先、非公開領域はキャッシュしない。
- 完全なオフライン用コピーに必要なものを、ページからService Workerに伝える。
- 訪問者が見られない内容はキャッシュしないどころか、そもそも送らない。
シリーズ前回は見開き表示でした。スマートフォンのブラウザメニューから Inkfoldのデモ をインストールして試せます。ソフトウェアは Charming Theme で入手できます。
読者のホーム画面に自社の新聞を置きたいとお考えですか？ご相談ください — ArtinTech Solution は出版社向けのプログレッシブWebアプリを開発しています。