僕の考えた最強のService Workerキャッシュ戦略で爆速サービスを作った - Qiita
はじめに 聖地の写真を共有するサービス「Holy Place Photo」にService Workerによるキャッシュを実装しました。 そのためネットワークがオフラインでも下記のようにサクサク動きます!!!! Service Worker Demo pic.twitter.com/t04xSRl7B2 — tiwu (@tiwu_official) 2019年2月25日 また、LighthouseのPWAのスコアは100を取れました。 この記事ではService Workerを利用したキャッシュの設計、Laravel + Vue.jsのWebアプリケーションでの実装を解説していきたいと思います。 注意書き 僕の考えた最強のService Workerのキャッシュの設計のため唯一の正解ではありません キャッシュの設計はサービスによって違うと思うのでこの記事は一つの参考にしてください まずS
Service Worker(PWA)でRangeリクエストに対応する - Qiita
'use strict'; importScripts('./build/sw-toolbox.js'); self.toolbox.options.cache = { name: 'ionic-cache' }; self.toolbox.precache( [ './build/main.js', './build/vendor.js', './build/main.css', './build/polyfills.js', 'index.html', 'manifest.json' ] ); self.toolbox.router.any('/*', self.toolbox.fastest); self.toolbox.router.default = self.toolbox.networkFirst; 原因 クライアントがサーバーから動画を取得する際に、HTTP Rangeリク
ServiceWorkerとCache APIを使ってオフラインでも動くWebアプリを作る - Qiita
はじめに Thetaの360°画像にぼかしを入れるWebアプリSphereBlur.comを作った際に、オフラインでも動くようにするために、HTML5の新しい技術Service Workerを使った。なお、下の動画でホーム画面からネイティブアプリっぽく起動しているのはWeb App Manifestのおかげである。 Service Worker Service Workerは、通常のページの環境とは別に、バックグラウンドで実行されるJavaScript実行環境で、ページからのネットワークリクエストを横取りしたり、ウェブサイトからのPush通知を受けとって表示するといった、今まではできなかった処理をすることができる。Push通知の方は、去年Facebookが使い始めたので有名になったが、今回はPush通知ではなく、ネットワークリクエストを横取りする機能を使ってオフライン対応をした。 ネットワ
Service Worker Offline Cache Techniques - Qiita
今回はService Workerを用いたオフラインキャッシュとそのテクニックについて紹介していきます。 Service Workerを用いたオフラインキャッシュを実装することで、インターネットに繋がっていない状態でWebページが閲覧可能になったり、高速でWebページを表示することが可能となります。 それでは順を追って解説していきましょう。 Service Workerとは まずはじめにService Workerとは、ブラウザとは別スレッドで動作するイベント駆動型のJavascript Workerのひとつです。 httpsプロトコルでしか利用できないものの、最近ではブラウザの実装も進み、広く利用され始めてきています。 元々はAppCacheの代替として、プログラマブルにキャッシュを扱えるAPIを目指して開発が始められました。 AppCacheには様々な実装上の問題点やセキュリティ上の問
Case studies | web.dev
Learn why and how other developers have used the web to create amazing web experiences for their users. P �;i� V We want to help you build beautiful, accessible, fast, and secure websites that work cross-browser, and for all of your users. This site is our home for content to help you on that journey, written by members of the Chrome team, and external experts.
Storing images and files in IndexedDB – Mozilla Hacks - the Web developer blog
The other day we wrote about how to Save images and files in localStorage, and it was about being pragmatic with what we have available today. There are, however, a number of performance implications with localStorage – something that we will cover on this blog later – and the desired future approach is utilizing IndexedDB. Here I’ll walk you through how to store images and files in IndexedDB and
ウェブ向けのストレージ | Articles | web.dev
ウェブ向けのストレージ コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 インターネット接続は不安定であったり、存在しない場合があります。そのため、プログレッシブ ウェブアプリでは、オフライン サポートと信頼性の高いパフォーマンスが一般的な機能となっています。完全なワイヤレス環境であっても、キャッシュやその他のストレージ技術を適切に使用することで、ユーザー エクスペリエンスが大幅に向上する可能性があります。静的なアプリケーション リソース（HTML、JavaScript、CSS、画像など）とデータ（ユーザーデータ、ニュース記事など）をキャッシュに保存するには、いくつかの方法があります。では、どちらのソリューションが最適なのでしょうか。どれくらい保存できますか？強制排除を防ぐにはどうすればよいですか？ 何を使用すればよいですか？ リソースの保存に関する一般的な
オフラインWebアプリケーションへの道 Indexed databaseをSQL風に書けるlovefieldを使ってみる - Qiita
JavaScript Advent Calendar 2015 4日目の記事です。フロントエンド人ではないですがフロントエンドが好きなので参加させていただきます。 グダグダと前置きが長いのでlovefieldにのみ興味がある人は最初の方を飛ばして「Indexed databaseをSQL風に書けるlovefieldを使ってみる」を見てください。 背景 iPhoneやAndroid端末が普及している現代ではWebページのスマートフォン対応が盛んに行われております。スマートフォン対応のWebページを作成するときはスマートフォンだからこそ意識しなければならない問題点がいくつかあると思います。そのうちの一つとして、スマートフォンは移動しながら使用するためPCと比べてネットワークが不安定です。そのためWebページが表示されないなどの問題が発生します。トンネルなどを通過する際によく発生する問題かと思い
The offline cookbook
Update: Together with Udacity I created a free offline-first interactive course. It involves taking an online-only site to full offline-first glory. Many of the patterns in this article are used. When AppCache arrived on the scene it gave us a couple of patterns to make content work offline. If those were the patterns you needed, congratulations, you won the AppCache lottery (the jackpot remains u
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Offline Only