既存サイトにPWAを導入する(オフライン対応・プッシュ通知)

Android対応

1.マニフェスト記述

ホーム画面に追加したアイコンから起動した場合の表示の制御
アイコン画像やアプリの名前、ステータスバーの表示、縦画面横画面など

(Androidのみ)

2.ServiceWorkerの登録

windowロード時発火
同時に通知を許可するかどうかの確認アラート
一度通知を許可しないを選択した場合、その後ユーザー側で操作しない限り再度通知のアラートは出せない

対応していない端末では登録されない
→ios(safari,chorome)では登録されない

PUSH通知参考

フロントエンドBlogの2017年8月28日公開の記事、「Firebaseを使って簡単にプッシュ通知を行う方法」です。

3.Serviceworker中身

通知をJSON形式で取得する方法不明

4.プッシュ通知

ios対応

2018/01/12
Serviceworkerは未対応

ホーム画面に追加してネイティブアプリの様に表示する

普通にリンクするとブラウザを起動しての遷移になるのでJSでリンクを設定する必要がある AJAXなど
参考:http://d.hatena.ne.jp/izit_kosuke/20110219/1298073430

オフライン対応

アプリケーションキャッシュを使えばできるらしい

北斗市公式キャラクター ずーしーほっきー ©2013 北海道北斗市 を使用させていただいております。ウェブページをできる限りネイティブアプリっぽくみせて配信するために色々研究しました。 もくじ はじめに ウェブアプリとは 今回制作したもの ネイティブアプリとの比較 ストア以外での配信方法 ホームアイコンの設定方法 フ...

PUSH通知は無理っぽい

ネイティブアプリを作成する必要がある

参考

# Service Workerとは ブラウザが Web ページとは別にバックグラウンドで実行するスクリプト オフラインのアプリを実現・サポートするために作られたものです ちなみに、ブラウザの対応状況はこんな感じ
リッチなオフライン体験、定期的なバックグラウンド同期、プッシュ通知など、これまでネイティブ アプリを必要としていた機能が Web にもやってきます。 Service Worker はそれらの機能を提供する基盤技術です。
Googleが昨年発表した、Webアプリをネイティブアプリのように使えるようにするしくみ「PWA(Progressive Web Apps」が話題です。既存サイトをPWA化する方法をサンプルコードをもとに解説します。
このコードラボでは、プッシュ通知をウェブアプリに追加する方法を学びます。
流行りのPWA(プログレッシブ ウェブアプリ)をざっくり開発して、知識を身につけていきましょう。この記事では、初心者向けにPWA(プログレッシブ ウェブアプリ)の概要から実際の開発までを紹介しています。

シェアする

  • このエントリーをはてなブックマークに追加