Web App ManifestでWebアプリをインストール可能に - Qiita
はじめに Thetaの360°画像にぼかしを入れるWebアプリSphereBlur.comを冬休みに作った際に、Web App Manifestを登録することで、このWebアプリを簡単にインストール(ホーム画面に追加)できるようにした。このWebアプリはService Workerを使ってオフラインでも動くようにしているので、ホーム画面から起動し、ネイティブアプリと同等の体験を提供できる。もちろん、Manifestを使っていない通常のページでも、メニュー画面から「ホーム画面に追加」を選ぶことで同様のことはできるが、下の動画のように、下から出てくるAppインストールバナーのボタンを一回タップするだけ登録できるのは利便性が高い。 Appインストールバナーの出し方 Google Developersのこの記事によるとAppインストールバナーを出すには下記の条件を満たす必要がある。 Web App
What makes a good Progressive Web App? | Articles | web.dev
What makes a good Progressive Web App? Stay organized with collections Save and categorize content based on your preferences. Progressive Web Apps (PWA) are built and enhanced with modern APIs to deliver enhanced capabilities, reliability, and installability while reaching anyone, anywhere, on any device with a single codebase. To help you create the best possible experience, use the core and opti
PWA 入門 〜iOS SafariでPWAを体験するまで〜 2019年7月更新 - Qiita
What's PWA ? Progressive Web Apps （プログレッシブ ウェブ アップス）の略 Googleが推進している、モバイルユーザーの体験（UX）向上を目的とするプロジェクト・技術のこと PWAは、わざわざApple StoreやGoogle Play Storeからインストールする必要はありません 不安定なネットワークでも迅速に起動し、関連性の高いプッシュ通知を送信することができます。 ホーム画面にアイコンを表示することができ、トップレベルの全画面表示で読み込むことができます。 ▼このように、Webサイトを直接ホームに追加することでアプリケーション化されます 導入事例 大手WEBサイトからで導入がはじまりつつあります コンバージョンアップにも効果的です Trivago https://www.trivago.com Twitter Lite https://mobi
Is service worker ready?
ChromeSupported FirefoxSupported OperaSupported Samsung InternetSupported SafariSupported EdgeSupported Chrome: Shipped.Firefox: Shipped.Samsung Internet: Shipped. Based on Chromium 44.2403 with some additions and changes. (See "Service Worker" section.)Safari: Shipped.Edge: Shipped.Support does not include iOS versions of third-party browsers on that platform (see Safari support). ChromeSupported
Web app manifests | MDN
A web application manifest, defined in the Web Application Manifest specification, is a JSON text file that provides information about a web application. The most common use for a web application manifest is to provide information that the browser needs to install a progressive web app (PWA) on a device, such as the app's name and icon. A web application manifest contains a single JSON object wher
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 上でしか動作しない ラ
Service Worker、はじめの一歩 | 第1回 Service Workerとは
Service Worker、はじめの一歩 第1回 Service Workerとは Service Workerは、Webページの裏側で働く独立したJavaScript環境です。今回はその概要と、どのようなライフサイクルを持っているのかを解説します。全体像が把握しやすくなるはずです。 はじめに このシリーズで扱うService Workerとは、Webページの裏側で働く独立したJavaScript環境です。Service Workerを利用すると、Webページのオフライン対応をはじめ、これまでのWebではできなかった機能が実現できます。 Service Workerは2016年10月現在、Chrome、Firefox、Operaの各ブラウザがすでにサポートをしています。Microsoft Edgeは開発中、Safariは検討を進めています。それぞれのブラウザの実装状況はIs Servic
JavaScriptのコードとService Workerをユーザーに近いCDNのエッジで実行可能。Cloudflareが「Cloudflare Workers」を提供開始
CDNプロバイダのCloudflareは、同社が提供するグローバルなコンテンツデリバリーネットワーク（CDN）のエッジにおいて、開発者がJavaScriptのコードを配置し実行できる新機能「Cloudflare Workers」の一般提供を開始したと発表しました。 Cloudflare Workersを利用すると、開発者はネットワークの向こう側にあるクラウドではなく、利用者にもっとも近いCDNのエッジに位置するCloudflareのデータセンター内でJavaScriptのコードを実行できるようになります。 これによってクライアントに対して非常に高速にレスポンスを返すことができ、広範囲に分散された高い冗長性を持つ分散システムが構築可能になります。 同社は日本を含む世界中に127のデータセンターを展開しています。 「クラウドの夢」、Cloudflare Workersでできること Cloudf
Service Worker スクリプトのインストールと更新処理
Service Worker の実装が主要ブラウザで揃い始めて盛り上がってきましたね。その流れに便乗して久しぶりに Service Worker の仕様や実装に関する記事を書いてみました。今回は Service Worker スクリプトのインストールと更新処理についてです。 この記事は Service Worker スクリプトを少しでも手書きして動かしたことがある人を想定読者にしています。Service Worker について全く知らない人はまず別の入門記事を参照してください。また、細かいことを気にせずに Service Worker を使いたい人は Workbox といったライブラリやフレームワークの利用をおすすめします。 更新履歴 2019/09/24: Chrome 78 から importScripts() も更新対象になりました。それについて加筆しました。 2018/06/07:
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通知ではなく、ネットワークリクエストを横取りする機能を使ってオフライン対応をした。 ネットワ
Introduction to Service Worker: How to use Service Worker - HTML5 Rocks
Service Worker は非常に有用ですが、最初は扱いが難しい場合があります。Workbox により、Service Worker が使いやすくなります。 ただし、Service Worker は困難な問題を解決するため、そのテクノロジーの抽象化も、理解がなければ難しいものです。したがって、Workbox の詳細に入る前に、これらのドキュメントの最初の数部分で基盤となるテクノロジーについて説明します。 実行中の Service Worker のリストを表示するには、アドレスバーに「chrome://serviceworker-internals/」と入力します。 Service Worker がもたらすもの Service Worker は、ウェブブラウザとウェブサーバー間のプロキシとして機能する特別な JavaScript アセットです。オフライン アクセスの提供による信頼性の向上
Service Workerってなんなのよ (Service Workerのえほん) - Qiita
私 「ねぇ、Service Workerってあなた何者？」 Service Worker 「プログラム可能なネットワークプロキシです」 私 「.....(´Α｀lll)o0(ｲﾐﾌ)」 (この記事は元々英語で投稿した記事の翻訳版です。挿絵に入っているテキストが英語のままなのはご了承ください🙏) Service Workerってなんかカッコ良さそうだけど、実際問題なんなのかよくわからない ２０１５年７月、私はテキサス州オースティンで開催されたJavaScriptのカンファレンスに参加していた。ステージに立っていたのはJake Archibald、当時はなんかトイレの話ばっかりするおもしろイギリス人くらいにしか思ってなかったけれど、後々Service Workerのスペック策定に関わっているちょっとすごい人だと知る。 (なぜか)公衆トイレで発見したUXパターンについて話す傍ら、JakeはSe
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
FRESH! Web パフォーマンス改善 〜クライアントサイド編〜 | CyberAgent Developers Blog
You can read this post in English. みなさんこんにちは、FRESH! でフロントエンドの開発している鈴木(sutiwo)です。 前回は、FRESH!におけるPCブラウザのFlash脱却という HLS の Web プレイヤーについて記事を書きました。 今回はスマートフォン・ PC でのブラウザに関するパフォーマンス改善の取り組みとその結果についてお知らせします。 まずクライアントサイドのパフォーマンス改善を行うにあたり、弊社の Web Initiative Center* から 1000ch 氏に加わっていただきどのようなことを目標とするか議論しました。 * Web プロダクトの品質向上とWeb技術を使ったチャレンジを目的に設立された弊社の組織 議論の様子 議論を行った後、今回の改善で以下のことに取り組むことが決まりました。 Service Worker で
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - codegrid/2016-serviceworker
What Is A Service Worker? ⚙️How do they upgrade websites?