【PWA】シリーズPWA (5) キャッシュを制御して高速化やオフライン対応をしてみる - knowledge base
ServiceWorkerを動かすための最低限のベースができたので、ServiceWorkerに仕事をさせてみましょう。 まずは、メジャーな実装となるキャッシュ制御、つまるところ高速化やオフライン対応の実装を行います。 リクエストがあったらキャッシュを返すようにしてみる 今回の肝となる仕組みです。 ちなみに以前策定されていたHTML5のApplication Cache APIは、セキュリティ的な理由により廃止されました。 基本的な仕組み Cache API を用いて、指定されたファイルのキャッシュを構築する。ServiceWorkerのinstall時（installイベントのコールバック）にて行うのがお作法なよう。 ブラウザからのリクエストがきたときに、そのリクエストを横取りして、構築してあったキャッシュからリクエストと同じURLのリソースを返す。リクエストの横取りはfetchイベント
Blog - Service Workerでキャッシュハンドリング (基礎編) | Ohoshi.me
(旧ブログから移行しました。) Service Worker は PWA(Progressive Web App)のオフライン操作や Push 通知を実装するための機能です。JavaScript で実装を行いますが、ブラウザとは別プロセスでバックグラウンドで動作するのが特徴です。 オフライン操作の実現は巧みなキャッシュハンドリングによってなされています。 Service Worker の基本的な書き方を学習したので、備忘録的な形でこのブログに残します。 PWA の話も気が向いたら残せたらと！ Sample プロジェクトを Github に Push しました。 ご活用いただけたらと思います。Hosting には Firebase Hosting を利用しました。 Github: https://github.com/Ryoma0219/simple-pwa Firebase Hosting
iosのPWAでキャッシュを削除する方法
はじめにios の PWA のキャッシュって全然消えなくないですか？？？ まあそれが PWA の良いところだとは思うんですけどせっかくコンテンツを新しくしてもそれがユーザが検知できないのは良くないですよね。 本来であればservice-worker.jsに以下のように書けばキャッシュではなく最新のコンテンツを利用してくれるはずなのですが、 どうやら調べた感じだとまだ Safari の PWA 対応が遅れてるっぽいです。。 self.addEventListener('activate', (event) => { event.waitUntil( caches.keys().then((keys) => { console.log('keys: ' + keys) return Promise.all( keys.map((key) => { console.log('不要なキャッシュを削
PWA： ServiceWorkerを使って、キャッシュをコントロールする(オフラインハンドリング) - Qiita
はじめに 前回の記事 (https://qiita.com/OMOIKANESAN/items/5b23fa8ea9ea0d181df5) で、最小構成でPWAのWebサイトを作成する方法についてご紹介しました。 今回は、別のページを作成して、「オフラインのときの挙動を制御する」に取り組みました。 前回も、オフライン状態で動作するページを作成しましたが、複数のページにまたがるような、つまりは通常のWebサイトでの使い方には触れなかったので、今回はページを跨ったときのオフライン表示をコントロールしようというのが主題です。 コードの概要 今回も前回同様に、なるべく最小構成でのオフラインハンドリングを目指しました。 すべてこの記事内に書くと冗長になってしまうため、GitHubへアップロードしましたので、適宜参照してください。 トップページが目次になっていて、それぞれの花の名前を選択すると、選択し
VueとPWAで作ったサイトのキャッシュを新しいファイルがあった場合に自動更新したい
質問をすることでしか得られない、回答やアドバイスがある。15分調べてもわからないことは、質問しよう！新規登録して質問してみよう
Service Workerの基本とそれを使ってできること - Qiita
Service Workerとは ブラウザが Web ページとは別にバックグラウンドで実行するスクリプト オフラインのアプリを実現・サポートするために作られたものです ちなみに、ブラウザの対応状況はこんな感じ http://caniuse.com/#search=service%20workers 特徴 DOM にアクセスできない DOM を操作したい場合は、Service Worker がコントロールしているページ(js)と postMessage でメッセージのやり取りをして行う リクエストをプロキシすることが可能 Service Worker はブラウザが必要に応じて起動・終了するので、変数の値を保持しておけない Cache、IndexedDB 等で値を保存して、必要になった時に取り出すようにする Promise を多用する https か localhost 上でしか動作しない ラ
【PWA】Nuxtで作ったAMPサイトでServiceworkerを使えるようにする | 東京夜7時
この記事ではNuxt.jsのnuxt/pwaを使って、超簡単にサービスワーカーを導入します。 導入するサイトは、このサイトで、AMPで構成しています。 ということで、Nuxt.jsで「PWAを実現したい方」と、「AMPでPWAを実現したい方」の参考になれば幸いです。 nuxtのプラグインを使うと、サービスワーカーの設定のほとんどの部分を簡略化できてしまいます。 よって、導入のハードルは低いので、やらない手はない！ 逆に、workboxなどを使って、AMPに直接導入したい方には、この記事では情報が足りないかもしれません。 Servicewokerのメリット Nuxt×AMPでサービスワーカーを動かそう AMPのためのseviceworkerコンポーネント ジェネレーターを使って簡単にmanifest.jsonを作る ホームスクリーンへ追加ができます！ まとめ：表示速度ストレスの大幅な軽減のた
Service Workerがもつ圧倒的な力。SEO担当者は変化に適応が必要 | Moz - SEOとインバウンドマーケティングの実践情報
PWA、SPA、Service Workerとは？（前編で解説）SPAを可能にするApp Shellアーキテクチャ（中編で解説）Service Workerがもつ圧倒的な力まとめ3. Service Workerがもつ圧倒的な力最初にはっきりさせておきたいことがある。それは、ここまでで解説してきた「SPA」と、ここから取り上げる「Service Worker（サービス・ワーカー）」は、互いに排他的なものではないということだ。 つまりこの2つは共存するものだということだ。どちらもPWAと呼ばれるものの基盤となっているが、SPAではないPWAをつくることも可能だし、従来の静的なウェブサイト（クライアントサイドでレンダリングする処理がないサイト）にService Workerを統合することもできる（近い将来、そのようなサイトが増える僕は思っている）。 さらに、Service Workerはウェブ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
