タグ

PWAに関するrikubaのブックマーク (4)

  • Progressive Web Apps on Windows - Microsoft Edge Development | Microsoft Docs

    Progressive Web Apps (PWAs) are applications that you build by using web technologies, and that can be installed and can run on all devices, from one codebase. PWAs provide native-like experiences to your users on supporting devices. They adapt to the capabilities supported by each device and they can also run in web browsers, like websites. To start building a PWA, see Get started with Progressiv

    Progressive Web Apps on Windows - Microsoft Edge Development | Microsoft Docs
  • モバイル/オフラインでも動作するはてなブックマーク検索のPWAを作った

    はてなブックマーク検索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 使い方 使い方は特に難しい話でもないですが、次のように任意のはてな

    モバイル/オフラインでも動作するはてなブックマーク検索のPWAを作った
    rikuba
    rikuba 2018/06/18
  • App Shell モデルの素振り(前編)webpack と Workbox を利用した構築

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

    App Shell モデルの素振り(前編)webpack と Workbox を利用した構築
  • アーキテクチャ  |  web.dev

    PWA の信頼性、インストール可能性、機能性を実現するテクノロジーを最大限に活用するようにアプリケーションを設計するには、まず、アプリケーションとその制約を理解し、両方に適したアーキテクチャを選択します。 SPA と MPA 現在、ウェブ開発には、シングルページ アプリ(SPA)とマルチページ アプリ(MPA)の 2 つの主要なアーキテクチャ パターンがあります。 シングルページ アプリとは、アプリが取得または提供するデータに基づいて、ページの HTML レンダリングのほとんどまたは全部を、クライアント側の JavaScript で制御できるようにすることです。アプリでは、ブラウザの組み込みナビゲーションをオーバーライドして、ルーティング機能とビュー処理機能に置き換えます。 マルチページ アプリでは、通常、プリレンダリングされた HTML がブラウザに直接送信されます。多くの場合、ブラウザ

    アーキテクチャ  |  web.dev
    rikuba
    rikuba 2018/03/27
  • 1