タグ

2020年8月17日のブックマーク (5件)

  • Service Worker のライフサイクル  |  Articles  |  web.dev

    Service Worker のライフサイクル コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 Service Worker のライフサイクルは、最も複雑な部分です。その目的やメリットがわからなければ、戦闘を仕掛けてくるかもしれません。しかし、その仕組みを理解すれば、ウェブ パターンとネイティブ パターンの長所を組み合わせて、シームレスで邪魔にならないアップデートをユーザーに配信できます。 ここでは詳細を説明しますが、各セクションの始めに、知っておくべきことのほとんどを箇条書きで示します。 インテント ライフサイクルの目的は次のとおりです。 オフラインファーストを可能にする 現在の Service Worker に影響を与えることなく、新しい Service Worker が準備を整えられるようにします。 スコープ内のページが、全体にわたって同じ Serv

  • Service Worker スクリプトのインストールと更新処理

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

    Service Worker スクリプトのインストールと更新処理
  • Vue.jsのコンポーネントについて勉強してみた!備忘録【応用編】 - Qiita

    はじめに 昨日に引き続き、コンポーネントについて学習し、ここで備忘録としてまとめてみます! コンポーネントの勉強のきっかけとなった、タブの生成についても触れています!! 昨日の投稿↓ Vue.jsコンポーネント基編 今日も、いつも以上に強調させて頂きます、 備忘録です!! テキスト読みながらメモした、自習ノートのような感覚で見てくださった方が良いかと思います! 動的コンポーネント 動的コンポーネントとは、組み込みコンポーネントの1種。 組み込みコンポーネントとは、特にこちらが記述したりしなくても利用できるコンポーネントで、 要素を用います。これは、あらかじめこちらが用意した、複数のコンポーネントを動的に切り替えることが可能になります。 コンポーネントの入れ物(メタコンポーネント)のような存在です。 具体例1 例)3秒毎に切り替わるページ // sample.html <!DOCTYPE

    Vue.jsのコンポーネントについて勉強してみた!備忘録【応用編】 - Qiita
  • たった1行のCSSでこれなら簡単!すでに制作済みのWebサイト・スマホアプリをダークモードに対応させる方法

    「たった1行のCSS」とは、prefers-color-scheme: dark;の紹介ではありません。 Webサイトやスマホアプリのさまざまな要素すべてをダークモード用にカラーを変換するたった1行のCSSを紹介します。 すでに制作済みのWebサイトやスマホアプリをダークモード対応にしたい時だけでなく、ユーザースタイルシートとして利用することもできます。 One line - Dark Mode using CSS by Akhil Arjun 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 制作済みのサイト・アプリをダークモードに対応させる方法 CSSの解説 制作済みのサイト・アプリをダークモードに対応させる方法 ここで紹介するのは、すでに制作済みのWebサイト・スマホアプリをダークモードに対応させる超簡単な方法です。 前置き

    たった1行のCSSでこれなら簡単!すでに制作済みのWebサイト・スマホアプリをダークモードに対応させる方法
  • https://spyweb.media/2017/12/20/scss-nested-rules-referencing-parent-selector/