Years ago, I did some research into how native applications responded to a lack of network connectivity. Whilst I've lost the link to the analysis (I could swear it was on Google+), the overarching narrative was that many native applications are inextricably tied to the internet that they just straight up refuse to function. Sounds like a lot of web apps, the thing that set them apart from the web

日経電子版の最近の取り組みをマイクロフロントエンドとPWAに絡めて紹介します。（Developers Summit 2019でお話した内容です）

Stay organized with collections Save and categorize content based on your preferences. 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.

はてなブックマーク検索PWAというはてなブックマークでブクマしたデータをオフラインでも検索できるPWAを作りました。 サイト: https://hatebupwa.netlify.com/ ソース: https://github.com/azu/hatebupwa はてなブックマークの自分のブクマを検索できるPWAを作りました。 Service Workerに対応してるブラウザ(IOS Safari 11.3+を含む)ではオフラインでも検索できます。https://t.co/RCVkRYAFz0 モバイルはホームスクリーンアプリで、macOSはアプリ版もあります。https://t.co/5MDuyC9baN pic.twitter.com/KAc3KV690b — azu (@azu_re) April 16, 2018 使い方 使い方は特に難しい話でもないですが、次のように任意のはてな

Theme 第 17 回のテーマは Service Worker です。 今回は @kinu さんと @nhiroki_ さんをお迎えして、 今実装や仕様策定が進んでいる Service Worker について、なぜこうした仕様が出てきたのか、これを用いて何ができるのか、これがどう Web を変えるのか。 実装や仕様の裏話や、これが普及してからの懸念点なども含めて、じっくり議論しました。 また、 Service Worker へのフィードバックは bug tracker (基本は英語ですが、日本語でも良いそうです)、もしくは #serviceworker です。 Show Note 関連仕様 ServiceWorker AppCache Push API Notifications API Fetch Permissions API Service Worker の始まり(0:00) Se

Service Worker の実装が主要ブラウザで揃い始めて盛り上がってきましたね。その流れに便乗して久しぶりに Service Worker の仕様や実装に関する記事を書いてみました。今回は Service Worker スクリプトのインストールと更新処理についてです。 この記事は Service Worker スクリプトを少しでも手書きして動かしたことがある人を想定読者にしています。Service Worker について全く知らない人はまず別の入門記事を参照してください。また、細かいことを気にせずに Service Worker を使いたい人は Workbox といったライブラリやフレームワークの利用をおすすめします。 更新履歴 2019/09/24: Chrome 78 から importScripts() も更新対象になりました。それについて加筆しました。 2018/06/07:

Inside Frontend #2 の発表資料です https://inside-frontend.com

2018年4月25日をもちまして、 『CodeIQ』のプログラミング腕試しサービス、年収確約スカウトサービスは、 ITエンジニアのための年収確約スカウトサービス『moffers by CodeIQ』https://moffers.jp/ へ一本化いたしました。 これまで多くのITエンジニアの方に『CodeIQ』をご利用いただきまして、 改めて心より深く御礼申し上げます。 また、エンジニアのためのWebマガジン「CodeIQ MAGAZINE」は、 リクナビNEXTジャーナル( https://next.rikunabi.com/journal/ )に一部の記事の移行を予定しております。 今後は『moffers by CodeIQ』にて、 ITエンジニアの皆様のより良い転職をサポートするために、より一層努めてまいりますので、 引き続きご愛顧のほど何卒よろしくお願い申し上げます。 また、Cod

Intro Service Worker の初心者向けのチュートリアルや、使ってみた系のエントリも増えてきました。 しかし、 Service Worker は通常のブラウザ用 JS の開発と少し経路が違い、慣れるまで開発やデバッグもなかなか難しいと思います。 そこで特に難しい部分、そして分かっていないと実際にデプロイした際に難しいと思う部分について、実際に動きを確認しながら解説したいと思います。 なお、 Service Worker の基本的な概念などについては、他のチュートリアルなどを見て理解している前提で進めます。 思いつきで撮ったので色々ミスも有ります、また Chrome Dev Tools の UI はどうせ変わるのでそのつもりで見てください。 TODO になっている動画は、そのうち撮って追加します。 List claim controllerchange updatefound

IndexedDB は、ユーザーのブラウザー内にデータを永続的に保存する手段です。ネットワークの状態にかかわらず高度な問い合わせ機能を持つウェブアプリケーションを作成できますので、アプリケーションがオンラインとオフラインの両方で動作するようになります。 このチュートリアルでは、IndexedDB の非同期 API の使い方を見ていきます。IndexedDB について詳しくない場合は、始めに IndexedDB の主な特徴と基本用語をお読みください。 IndexedDB API のリファレンスドキュメントとして、IndexedDB API の記事とそのサブ記事をご覧ください。この記事では、IndexedDB で使用されるオブジェクトの種類と、非同期 API のメソッドについて説明します (同期 API は仕様から削除されました)。 IndexedDB で推奨される基本パターンは、以下のように

この記事は、「3分クッキング ServiceWorkerで阿部寛さんを超える」の続きです。 ng buildでServiceWorkerのリソースキャッシュが簡単にできることを説明しましたが、実際のキャッシュ戦略を考えるといろいろ不足があります。 ユーザーアップロード画像 CDNに配置しているコンテンツ XHRのレスポンス内容 これらはng buildでは生成されないものです。そのための設定方法を紹介します。 ngsw-config.json @angular/service-workerでは、ServiceWorkerのスクリプト自体はngsw-worker.jsになります。Angularのアプリ開発者はjsonとして用意されているインターフェースng-config.jsonを設定する形になります。 ng-config.jsonの設定項目の詳細は、Angularドキュメント（日本語版）の

(この記事は3分で読めます) ServiceWorkerは、ブラウザネットワークのプロキシであり、ブラウザの通信をインターセプトすることが主な目的です。 ServiceWorkerは、Push通知のためだけではありません。昨年秋に日経新聞1やdev.toで話題になったServiceWorkerは、リソースキャッシュの用途です。 既存のAngularアプリケーションにこのリソースキャッシュを導入します。 TL;DL ServiceWorkerのリソースキャッシュにフォーカスする。 既存のAngularアプリケーションを4ステップで調理する。 阿部寛さんのホームページ2と実食勝負する。 味の秘訣を解説する レシピ Angular-CLIで作成されたプロジェクト ×1 Angular5.0.0~ ×1 Angular-CLI1.6.0~3　×1 chrome49〜 ×1 (~00:30) Ser

html5j Webプラットフォーム部 第19回勉強会 W.A.S.M featuring PWA https://html5j-webplat.connpass.com/event/74013/

ブックマークしました ここにツイート内容が記載されます https://b.hatena.ne.jp/URLはspanで囲んでください Twitterで共有

if ('serviceWorker' in navigator) { // register service worker navigator.serviceWorker.register('/sw.js') .then((registration) => { registration.update() .then(() => { registration.unregister(); }); }); }

App Shell モデルという設計パターン App Shell モデルは、共通のガワ部分を構成する HTML、CSS、JavaScript をシェルと定義し、その中に入る動的なコンテンツ部分と構造的に分離して扱えるように設計されます。 アプリケーション シェル（App Shell）アーキテクチャは、ネイティブ アプリのように瞬時に、そして確実にユーザーの画面に読み込める Progressive Web App を構築する方法の 1 つです。 アプリの「シェル」とは、ユーザー インターフェースが機能するために必要な最小限の HTML、CSS、JavaScript です。これらをオフラインで使用できるようにキャッシュしておくことで、ユーザーが同じページに再アクセスした際に、瞬時に高いパフォーマンス が発揮されます。つまり App Shell は、ユーザーがアクセスするたびにネットワークからす