タグ

関連タグで絞り込む (1)

タグの絞り込みを解除

JavaScriptとpwaに関するorenonihongogayabaiのブックマーク (3)

  • ローカルネットワーク内でPWAを動かす(javascript)

    ローカルネットワーク内完結でPWAをAndroidで試そうと思って躓いたので備忘録。 まず最初にPWAの要であるServiceWorkerを動かすための条件を確認します。 ①httpsであること ②localhostであること ①または②のどちらかが必要になります。 セキュリティ上の理由からhttpsであることが大前提のようで、開発を意識してlocalhostは特別に許可されている感じ。 httpsで試す 最初にhttpsを試しました。どこかにデプロイしてしまえば楽なのですが、今回は外部のネットワークにはつながない想定なのでNG。じゃあどうするかというと、オレオレ証明(Self-Signed Certificates)でなんちゃってhttpsサーバーを立ててみました。 条件は満たしたのでいけると思ったのですが、結果から言うとオレオレ証明では禁止されています。 Androidに証明書を転送し

    ローカルネットワーク内でPWAを動かす(javascript)
  • WorkboxでPWAを導入する方法~オフライン対応編~ - Qiita

    目標:ServiceWorkerにキャッシュを保持して、とりあえずオフラインでも表示できるようにする。 PWAやってみたい ページスピードあげたい はじめに そもそもサービスワーカーって何!?という方はこちらの記事が分かりやすかったです。 参考:Service Workerってなんなのよ (Service Workerのえほん) 実装するにあたりWorkboxというGoogleのライブラリを使います。PWAのライブラリというよりはサービスワーカーの設定が簡単にできるライブラリという認識です。(※そのためホーム画面追加やプッシュ通知はこのライブラリには含まれません。多分。) 今回は最も簡単な方法をご説明したいので、GulpやWorkboxCLI等のビルトツールは使いません。キャッシュしたい(オフライン対応させたい)リソースを地道に書いていきます。(別の記事で書きます) Servicework

    WorkboxでPWAを導入する方法~オフライン対応編~ - Qiita
    orenonihongogayabai
    orenonihongogayabai 2021/09/09
    StaleWhileRevalidate、NetworkFirst
  • PWA 入門 〜iOS SafariでPWAを体験するまで〜 2019年7月更新 - Qiita

    What's PWA ? Progressive Web Apps (プログレッシブ ウェブ アップス)の略 Googleが推進している、モバイルユーザーの体験(UX)向上を目的とするプロジェクト技術のこと PWAは、わざわざApple StoreやGoogle Play Storeからインストールする必要はありません 不安定なネットワークでも迅速に起動し、関連性の高いプッシュ通知を送信することができます。 ホーム画面にアイコンを表示することができ、トップレベルの全画面表示で読み込むことができます。 ▼このように、Webサイトを直接ホームに追加することでアプリケーション化されます 導入事例 大手WEBサイトからで導入がはじまりつつあります コンバージョンアップにも効果的です Trivago https://www.trivago.com Twitter Lite https://mobi

    PWA 入門 〜iOS SafariでPWAを体験するまで〜 2019年7月更新 - Qiita
  • 1