Overcoming the 50 MiB limitation on PWA cache for iOS
We are building a progressive web app for iOS devices and we know about the 50 MiB cache limitation imposed by the Safari web browser. How can we handle this limitation when we know that our app's service worker might have to cache data more than 50 MiB if we include all the static resources, videos and pictures etc. Our first preference is to keep the app running offline even after the cache is f
Webプッシュ通知機能などPWAをサポートする機能と新テーマ「Owned Media」を追加 | MovableType.net
閲覧ユーザーがデバイスやネットワーク環境に左右されず、より快適にウェブサイトを利用できるよう、複数のブラウザーで対応が進んでいる PWA（Progressive Web Apps）をサポートする機能を追加しました。また、今回のアップデートを大きく反映させた新テーマ「Owned Media」も公開しています。 今回 MovableType.net が追加した機能と、主にできるようになったことは次の通りです。 「ウェブアプリ マニフェスト（manifest.json）」の設定 ウェブサイトのブックマークを、スマートフォンなどの端末のホーム画面に保存できるよう設定可能に Webプッシュ通知機能の追加 Webプッシュ通知の登録（購読）と、登録者へ任意のタイミング・内容で通知が可能に。（※こちらはスタンダードプラン以上で利用可能） オフラインキャッシュの有効化とコントロール オフラインキャッシュを利
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はウェブ
自社運営のWebアプリをPWA化した際にハマった話（OAuthなど） - APC 技術ブログ
はじめに 先進サービス開発事業部の高橋です。主にフロントエンド開発を担当しています。今回は私たちの部署で運営しているソーシャルRSSサービス「NEIGHBORS」をPWA化した際にやったことを書いていこうと思います。 NEIGHBORS | ひとりの興味をみんなの知識に とはいえ、比較的短期間で実装するという目標を掲げていたということもあり、プッシュ通知みたいなすごくネイティブっぽい機能は実装しておらず、キャッシュコントロールやホームに追加してアプリっぽく振る舞うといった比較的簡易な形で落ち着かせています。なので、この記事ではPWAの実装自体について詳しく記載していくというよりは、それまで動いていた機能がPWAというかServiceWorkerを使うことでうまく動かなくなった点に重きを置いています。 PWAとは PWA(Progressive Web App)とは、ざっくりいうと、Webア
PWAにおけるキャッシュの更新方法
PWAで一番厄介な問題と言えばキャッシュではないでしょうか。開発中などで、キャッシュを更新したい時にできなかったり、キャッシュを読み込んでしまって修正が反映されずにバグ解決に時間を取られるかも知れません。 そこでちょっとしたTipsを紹介します。 Service Worker登録時の工夫 それは registration.onupdatefound を仕込んでおくということです。このメソッドはService Workerが更新されているかどうかを検知してくれます。もし更新されている場合は、updateメソッドを使って更新できます。 This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, o
【解決方法】iOS端末でPWAのスプラッシュ画面が真っ白になる - Qiita
問題 iOS端末でPWA（プログレッシブウェブアプリ）のスプラッシュ画面が真っ白になり、アイコン、アプリ名などが表示されない。 バージョン iOS 11.3 詳細 manifest.jsonでName、background_color、iconを設定した場合、 Androidの場合は上記を組み合わせたスプラッシュ画面が表示される iOSの場合は真っ白な画面が表示される manifest.json { "name": "Weather PWA", "short_name": "Weather", "icons": [{ "src": "images/icons/icon-128x128.png", "sizes": "128x128", "type": "image/png" }, { "src": "images/icons/icon-144x144.png", "sizes": "144
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 上でしか動作しない ラ
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
Service Worker のライフサイクル | Articles | web.dev
Service Worker のライフサイクル コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 Service Worker のライフサイクルは、最も複雑な部分です。その目的やメリットがわからなければ、戦闘を仕掛けてくるかもしれません。しかし、その仕組みを理解すれば、ウェブ パターンとネイティブ パターンの長所を組み合わせて、シームレスで邪魔にならないアップデートをユーザーに配信できます。 ここでは詳細を説明しますが、各セクションの始めに、知っておくべきことのほとんどを箇条書きで示します。 インテント ライフサイクルの目的は次のとおりです。 オフラインファーストを可能にする 現在の Service Worker に影響を与えることなく、新しい Service Worker が準備を整えられるようにします。 スコープ内のページが、全体にわたって同じ Serv
PWA (Progressive Web Apps) とは | murashun.jp
［ ＋ expand ］PWA (Progressive Web Apps) とはプログレッシブレスポンシブネットワークに依存しないアプリケーション感覚常に最新安全発見しやすい再エンゲージメント可能インストール可能リンク可能Web App Manifestbackground_color メンバーdescription メンバーdir メンバーdisplay メンバーicons メンバーlang メンバーname メンバーorientation メンバーprefer_related_applications メンバーrelated_applications メンバーscope メンバーshort_name メンバーstart_url メンバーtheme_color メンバーmanifest.json の存在をブラウザに伝えるWeb App Manifest をテストするService Wo
ウェブ向けのストレージ | Articles | web.dev
ウェブ向けのストレージ コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 インターネット接続は不安定であったり、存在しない場合があります。そのため、プログレッシブ ウェブアプリでは、オフライン サポートと信頼性の高いパフォーマンスが一般的な機能となっています。完全なワイヤレス環境であっても、キャッシュやその他のストレージ技術を適切に使用することで、ユーザー エクスペリエンスが大幅に向上する可能性があります。静的なアプリケーション リソース（HTML、JavaScript、CSS、画像など）とデータ（ユーザーデータ、ニュース記事など）をキャッシュに保存するには、いくつかの方法があります。では、どちらのソリューションが最適なのでしょうか。どれくらい保存できますか？強制排除を防ぐにはどうすればよいですか？ 何を使用すればよいですか？ リソースの保存に関する一般的な
Service Workerを使った消極的なキャッシュ
Service Workerを使った消極的なキャッシュ 前略（Service Workerとはなんぞやという方はこちら）、キャッシュさせたいリソースをService Workerのインストール中に全てインストールさせている例が多いが、そのリソース全てをキャッシュさせることを保証しなくても良いケースが大半だと思う（オフライン化ではなくパフォーマンス向上という観点だと特に）。 優先度を付ける 以下、Service Worker内の処理（The offline cookbookから拝借）。event.waitUntil()及びその中の処理はPromiseでチェーンされているので、Promiseを返却しているcache.addAll()はキャッシュが確実に行われるが、チェーンさせていないcache.addAll()はキャッシュ作業が実施されるものの保証はされない。 self.addEventLis
PWAの基礎知識（その3）「オンライン、オフライン判定」
PWA（Progressive Web App）という単語がトレンドになっています。PWAは特定の技術を指す言葉ではなく、様々な技術が組み合わさったスマートフォンにおけるWebアプリのベストプラクティスと言えます。 今回はそんなPWAの基礎になる、Service Workerについて紹介します。 利用できるWebブラウザについて Can I useによると、モダンなブラウザの中でService Workerが使えないのはIEとOpera miniだけになっています。スマートフォンであれば安心して利用できるようになっています。 オンライン/オフラインは navigator.onLine で判定する オンラインかオフラインの判定として使えるのが navigator.onLine です。trueの場合はオンライン、falseはオフラインです。 オフラインの時だけ表示を変える ではオンラインの時だ
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
【PWA】「ホーム画面に追加」の「Site cannot be installed: the page does not work offline」エラー対策
結論：serviceWorker用のJSファイルに「self.addEventListener('fetch', function(event) {});」と追記すれば直る。 自作のWebアプリで「ホーム画面に追加」機能を加えようと以下を用意しました。 manifest.json seviceWorker.js（空のファイル） HTMLのヘッダーで上記「manifest.json」を読み込むようにして、HTMLのフッターには以下のJSを追記。 window.addEventListener('load', function() { if ('serviceWorker' in navigator) { navigator.serviceWorker.register("/serviceWorker.js") .then(function(registration) { console.lo
シンプルだけどパワフル、PWAのホーム画面アイコン追加 #PWATokyo
9月22日に Google の東京オフィスで開催された Progressive Web Apps Roadshow Tokyo 2017 に参加しました。 Google の デベロッパーアドボケイト、北村英志 氏は、「Integrated Experiences」というタイトルで、PWA における「ホーム画面アイコン追加」と「Payment Request API」について、その有能性を説明しました。 この記事では、「ホーム画面へのアイコン追加」にフォーカスしてレポートします。 シンプル、でもパワフルなホーム画面アイコン 「ホーム画面へのアイコン追加」はシンプルですがパワフルな機能です。 たとえば、PWA 対応した Twitter は毎日100万のユーザーがホーム画面アイコン経由でアクセスします。 楽天レシピは、ホーム画面アイコンで次のような成果を手にしています。 ホーム画面アイコンを追加
ブラウザプッシュ通知とユーザー個別に内容を送信する実装方法 in GAMY - Qiita
ブラウザプッシュ通知が流行りだした Webプッシュ、ブラウザプッシュなどと呼ばれる機能はブラウザのPush APIを使い実装され、現在ChromeとFirefoxで使えるようになっています。 毎週のように新たなブラウザプッシュが送れるサービスが登場していますが、基本的には一律ですべてのユーザーに送信するものが多いように感じます。 その中でもFaceBookはユーザー個別にネイティブアプリと同様の内容でブラウザにプッシュ通知を送っています。 ユーザー個別で通知内容をカスタマイズしたいのと、 その辺のサービスを使ってロックインされると困るので、FaceBookのコードを参考にしつつ自分で実装してみました。 ChromeとFirefoxで微妙にPushの送り方が違うので、今回はGCM（Google Cloud Messaging）用の解説です。 Pushを送ってみるとこんな感じ Service
「ホーム画面に追加」からはじめる『PWA(Service Worker)』 - Qiita
Android ChromeでService Workerが使えるようになり、徐々に盛り上がりを見せそろそろ使ってみても良いんじゃ・・・という匂いも感じ始めています。 ブラウザプッシュでの通知やキャッシュなどの機能にService Workerの注目が集まりがちですが、これらの実装はかなり複雑でやっかいです。 その中でも一番実装が簡単なService Worker(?)がホーム画面に追加の機能です。 この機能はService WorkerのJSは１文字書く必要がないので、Service Workerの実装を始める前にやっておくのも良いと思います。 実際に実装してみると、下からにゅるっと出てきます 条件 HTTPS接続（または localhost） Android Chrome 42以上 が必要です。SSLは https://letsencrypt.org/ で無料で入れられるので入れましょ
WordPressでAMP + PWA（プログレッシブ ウェブアプリ）を実装する方法を模索しながら、今はこうやっています｜今村だけがよくわかるブログ
WordPressでAMP + PWA（プログレッシブ ウェブアプリ）を実装する方法を模索しながら、今はこうやっています ここ最近、PWA（プログレッシブ ウェブアプリ）という技術について見聞きする機会が増えてきて、AMP（Accelerated Mobile Pages）と組み合わせて実装する方法について、私の周囲では話題になっていました。 「PWAとかAMPってなんですか？」という方は、以下のページをご参考ください。 はじめてのプログレッシブ ウェブアプリ | Web | Google DevelopersAccelerated Mobile Pages Projectというわけで「WordPressでAMP + PWAを実装するにはどうすればいいのか」。ここ最近いろいろと試していましたが「この方法だとどうかな？」と思って試したことや、現在まで得た知識、感想などを以下にまとめました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
『ホームに追加』させたいBASIC認証下にあるテストサイトで、iOSやiPhoneでアイコンが認識できない問題の対策とTwitterやFacebookにシェアする時の情報取得へのアプローチ | aoi.ooo