ブックマーク / amymd.hatenablog.com (1)

  • 【3ステップではじめる】PWAによる「ホーム画面に追加」バナーの実装 - エンジニアのたまご

    概要 PWAのService Workerを使って、Webサイトに訪れた時に、「ホームに追加する」バナーの表示をする機能を実装をしました 割りと簡単に実装できたので、その方法をご紹介します! ↓こんなバナーが表示されるようになります ▲Polymer Shop demoのバナー表示例 概要 PWA(Progressive Web Apps)とは Service Workerについて SWの動作環境 【3ステップではじめる】「ホーム画面に追加」バナーの表示 通知条件 1. アイコンやアプリ名などの設定を行う:manifest.json 2. serviceWorker.jsを作成する 3. 作成したファイルをheaderで読み込む デバッグ方法 Android実機からの確認 Desktop Chromeからの確認 気をつけておくこと PWA(Progressive Web Apps)とは P

    hapilaki
    hapilaki 2018/05/30
    chrome://flags/#bypass-app-banner-engagement-checks にアクセスし、「有効化」を選択する chrome://flags/#enable-app-banners にアクセスし、「有効化」を選択する Chromeを再起動する ChromeのDev toolからApplicationタブを開き、[Add to Homescreen][web制作]
  • 1