フロントエンドのデベロッパーが2021年に向けて何に注目すべきかを紹介します。 特に上級職や転職など、ステップアップを目指す人は要チェックです！ 10 Things Front-End Developers Should Learn in 2021 by Simon Holdorf 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. フレームワーク 2. 静的サイトジェネレーター（SSG） 3. JAMstack 4. プログレッシブウェブアプリ（PWA） 5. GraphQL 6. コードエディタ/IDE 7. テスト環境 8. クリーンなコード 9. Git 10. ソフトスキル 終わりに はじめに 2021年は、フロントエンドの開発がテクノロジー業界で最もホットなトレンドの1つになることは間違いないでしょう。フ
PWA(Progressive Web Apps)対応サイトの作り方・実装方法まとめ・入門 － AWS上で学習したPWA導入例とLighthouse Report Viewerの使い方 - NRIネットコムBlog
小西秀和です。 現在、AWSの静的ウェブサイトホスティングで入門するAWS Amplify(Console、CLI) － 概要編などAWSのサーバーレスな静的ウェブサイトホスティングをテーマにしたブログ記事を執筆しています。 今回もAWSは関係しますが、フロントエンドに近い話題で、最近動向が本格的になってきたと感じているPWA(Progressive Web Apps)について私が自主的に学習した内容を記事にしてみました。 私の場合はAmazon S3、Amazon CloudFront、AWS Certificate Manager、Amazon Route53を使用した静的ウェブサイトに最小限のコンテンツをデプロイしてPWAの実装について学習しました。 また、Lighthouse Report ViewerというPWAなどの品質テストができるツールを使用して、PWAの基準に合格し、Pe
はじめに Reproで開発を担当しているEdward Fox (edwardkenfox) です。2021年頃から Repro Booster というプロダクトの立ち上げに携わっており、開発を通して得た知見を共有できればと思い立ち筆を取るに至りました。4年ぶりのテックブログ執筆で少しばかり緊張していますが（？）、張り切ってやっていこうと思います。 Repro Boosterとは 2022年11月に正式リリースした、ウェブサイトの表示速度向上を実現するサービスです。「タグを入れたその日から、Webサイトが速くなる」というタグラインのもと、タグ（JavaScript）の設置だけでウェブサイトの表示速度が簡単に実現できるということで、リリース以来多くのお客様・サイトでご利用いただいています。 Repro BoosterではServiceWorkerと呼ばれる技術を最大限活用して多くの機能が実現さ
今回の話はWasmというよりもService Workerの話がメインになりますが、WasmとService Workerを組み合わせることで、ブラウザー上でサーバー処理をリアルに再現することができるので、このタイトルにしています。 まずは動画をご覧ください。 見ていただくと分かるように、ブラウザー上でPHPのコードを書くとその実行結果が右側に表示されています。 特に面白い点が、お問い合わせフォームのPOST後の処理までもブラウザー上だけで実行できているという点です。 これはWasmとService Workerを組み合わせて実現しています。 大体以下のようなプロセスで実現しています。 Wasmはブラウザー側でも実行可能ですが、あえてService Worker上で実行しているのは、URLへのリクエストに対してそのリクエストにインターセプト（介入）することで、POST後の処理などもブラウザ
PWAをNativeAppだと錯覚させる
こんにちは、@kaa_a_zuです。PWAという単語を聞いて、皆さんは何を想像しますか？A2HS、オフライン利用、プッシュ通知など様々な機能があるかと思います。今回は、あまり知られていないけど、WebAppを確実にNativeAppに近付ける機能についてご紹介をします。また、この記事は 2021年のPWA(Progressive Web App)のアドベントカレンダー 19日目の内容になります。 私が想定している読者は、全てのWeb開発に関わる方々です。中でも「既にPWAサービスを展開している」「既存のPWAを今すぐにNativeAppに近づけたい」という開発者に届けることができたら嬉しいです。 目次 PWA と ProjectFugu について マニフェストファイルの基礎 さらにNativeAppに近付ける マニフェストファイル(2021年末版) 1. PWA と ProjectFugu
Service Worker のライフサイクルとスコープを理解する - 30歳からのプログラミング
Service Worker は独自のライフサイクルを持っている。ブラウザにインストールされ、有効化され、そして新しい Service Worker に置き換えられる。 Service Worker を正しく使うためには、このライフサイクルに対する理解が不可欠である。これを理解していないと、意図した通りに動かせず、古い Service worker が動作し続けてしまうなどの不具合を起こしてしまう恐れがある。 そのためこの記事では、Service Worker はどのようなライフサイクルを辿るのかを見ていく。 また、Service Worker の挙動には「スコープ」という概念も影響してくるため、スコープについても説明する。 プッシュ通知やオフライン対応などの、Service Worker を使うとどんなことが出来るようになるのか、といったことについては扱わない。それらの機能の基盤である
FirestoreとLINE Messaging APIでチャットシステムを内製してる話 〜運用での学びを添えて〜 - Leverages Tech Blog
はじめに はじめまして！ Leverages（レバレジーズ）Advent Calendar 2019 18日目担当の吉澤です。 普段は、看護師向けの転職サイトや社内システムの開発・運用などをしています。 今回は、LINEでの顧客対応に用いられるチャットシステムの構築についてと実際運用してみてどうなの？みたいなところを書いていこうと思います。 何作ってるの？ ↓ざっくりこんな感じのやつを作っています。 開発に至った背景については以下の記事に書かれています。 markezine.jp LINEのMessaging APIとFirestoreを用いて、社内のSFA/CRMシステムから顧客とLINEのやり取りができるような機能です。 以下、内製のSFA/CRMシステムを社内システムと略します。 構成 全体的な構成としては以下の様になっています。 サーバーサイド まず、ユーザーがメッセージを送るとL
PWAは、Webサイトを「アプリ化」する技術のことで、現在では多くのWebサイトに取り入れられています。 その理由は、ユーザーエクスペリエンスの向上につながり、アプリよりも開発コストを削減することができるからです。 そこで本記事では、PWAとは何か、導入するメリット・デメリットなどを紹介します。Webサイトのアプリ化を検討している方は、ぜひ参考にしてみてください。 PWAとは「Progressive Web Apps」の略で、Webサイトをネイティブアプリのように利用できるようにする仕組み・技術のことです。 ネイティブアプリとは、iPhoneならApp Store、AndroidならGoogle Playといったアプリストアからインストールして使用するアプリのこと。「アプリ」と聞いて多くの人がイメージするのが、このネイティブアプリでしょう。 PWAを実装したWebサイトは、オフラインで動作
React JSを使用した【PWA】化の構築方法 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
GoogleはProgressive Web App(PWA)という新しいテクノロジーを提供しました。 PWAテクノロジーは市場に出回ってからしばらく経ちますが、その人気はここ数年で急上昇しております。 PWA開発の基本と定義を見ていきましょう。 PWAとは？ PWAで構築する理由 ReactでPWA Webアプリ作成 Manifest.json アプリのビルド Service Workerの登録 最後に PWAとは？ PWA（Progressive Web App）は、Webアプリケーションとネイティブアプリケーションの利点を組み合わせたアプリケーションであり、ハードウェア機能を含めたクロスプラットフォームアプリを提供します。 PWAは、ネイティブアプリよりも開発とサポートが迅速で、低コストであるため、注目されています。 この技術は、モバイルアプリとWebサイトの両方で最高のユーザーエク
令和4年のPush通知を改めて整理する
はじめに iOSのPush通知は定期的にアップデートを繰り返しており、常に最新の技術を追っていく必要があります。 本記事では令和4年時点での全体像把握のため、概要の整理を行いました。 ※ あくまで全体感のキャッチアップを目的としているため、各トピックの詳細な解説は行っていません。 Push通知とは サーバーサイドから、任意のタイミングでユーザーの特定端末に通知を送信できる仕組み AppleのPush通知基盤であるAPNsに通知の送信をリクエストし、そこからユーザー端末に対してデータが送信される 似たものとしてローカル通知があるが、こちらはアプリ内の特定タイミングで通知を登録するもの 公式ドキュメントはこちら 要素 APNs Appleが提供しているPush通知基盤 ユーザー端末へのPush通知の送信はここを介して行われる Production環境とSandbox環境がある Producti
WebWorkerでゴリゴリの重い処理をさせて横から制御したい時の手段 | g200kg Music & Software
これは Javascript のかなり細かい部分の話なので似たようなケースで困った事がある人以外にとってはどうでも良い話だと思いますが......。 JavaScript は元々シングルスレッド構造なのであまり重い処理をさせるには向いていないのだ、という事は昔から言われていました。 重い処理をしようとした時にまず影響を受けやすいのは UI 周りの動作です。 UI をちゃんと動かしつつ重い処理をさせるためには、処理を小分けにしてタイマーから駆動する等の手法がとられます。 またこの時、コールバックで小分けにした処理を繋げるとソースが見づらくなるので Promise や async/await を使う、という手段が定石となっていったのですが、そもそも、ひとまとまりの重い処理をやらせたいならやっぱり別スレッドで走らせたい、という事で WebWorker というものが作られました。 これによって J
ServiceWorkerの事前読み込みとキャッシュ化でプロダクトを高速化した話 - KAKEHASHI Tech Blog
はじめに こんにちは、KAKEHASHIのMusubiInsightチームでエンジニアをしている高田です。 MusubiInsightとは、薬剤師さんの業務データを可視化するBIツールになります。 そんなMusubiInsightにおいて、表示の高速化を狙いにServiceWorkerという技術を導入したので、紹介したいと思います。 MusubiInsightの課題 ServiceWorkerが何か、という話をする前に、MusubiInsightの課題について触れておきます。 ありがたいことに、MusubiInsightのユーザー数は堅調に増加していますが、それに伴いパフォーマンス低下の課題が浮き彫りになってきました。 特に、薬局数や薬剤師数の多い法人様では1リクエストでのAPIの計算量が大きく、なかなかレスポンスが返ってこないために、ユーザー体験を損なってしまっていました。 そこで、チー
2019年もあと残りわずか。 年末は振り返りをする良い機会ですよね。 そんなわけで今年の Chrome の進化の話や、Chrome 周りの出来事をまとめていきたいと思います。 自分の主観でインパクトが大きかったものから順番に上げていきます。 ※ 本記事は STORES.jp Advent Calendar 2019 - Adventar の10日目の記事です。 Native lazy loading ページ表示速度改善でよく使われる手法の画像の lazy load（遅延読み込み）。 lazy load は今まで lazy load 用の JavaScript のライブラリを読み込んで実装するのが一般的でしたが、Chrome 76からの機能でブラウザの機能として lazy load を実行できるようになった、というものです。 lazy load をさせたい要素に対して、loading="la
週刊Railsウォッチ（20200428後編）Rubyのバックトレース順序が戻る、KubernetesでRailsをスケール、セキュリティソフト入れますか？ほか｜TechRacho by BPS株式会社
2020.04.28 週刊Railsウォッチ（20200428後編）Rubyのバックトレース順序が戻る、KubernetesでRailsをスケール、セキュリティソフト入れますか？ほか こんにちは、hachi8833です。ついさっき見つけた記事がよかったので貼りました。 元記事: 世界各地の親が｢ネット授業｣に悲鳴を上げる訳 | ほしいのは「つかれない家族」 | 東洋経済オンライン | 経済ニュースの新基準 各記事冒頭には⚓でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを（鍋のように）社内有志でつっついたときの会話の再構成です👄 毎月第一木曜日に「公開つっつき会」を開催しています: お気軽にご応募ください ⚓Ruby ⚓Rubyのバックトレース順序が戻る Wow! I really appreciate th
プッシュ通知はサーバーからアプリに対して通知を送信できるもので、スマートフォンのアプリ等で日常的に触れていると思います。今回はWebアプリでプッシュ通知を利用する為のPushAPIについて調べたことを紹介したいと思います。 PushAPI Webアプリがプッシュ通知を利用できるようにPushAPIが用意されています。用意されたAPIを利用することで簡単にプッシュ通知が利用できるようになっています。 developer.mozilla.org Service Worker PushAPIの説明に入る前にService Workerについて軽く説明します。 developer.mozilla.org Service WorkerはWebアプリとは別スレッドで動作し、Webアプリ、ブラウザー、ネットワークの間にいるプロキシサーバーのような存在です。WebアプリごとにこのService Worke
目標：ServiceWorkerにキャッシュを保持して、とりあえずオフラインでも表示できるようにする。 PWAやってみたい ページスピードあげたい はじめに そもそもサービスワーカーって何!?という方はこちらの記事が分かりやすかったです。 参考：Service Workerってなんなのよ (Service Workerのえほん) 実装するにあたりWorkboxというGoogleのライブラリを使います。PWAのライブラリというよりはサービスワーカーの設定が簡単にできるライブラリという認識です。（※そのためホーム画面追加やプッシュ通知はこのライブラリには含まれません。多分。） 今回は最も簡単な方法をご説明したいので、GulpやWorkboxCLI等のビルトツールは使いません。キャッシュしたい（オフライン対応させたい）リソースを地道に書いていきます。（別の記事で書きます） Servicework
【Other】【CSS / jQuery / javascript】PWAでプッシュ通知を実装してみる（１）準備と解説｜虹色ミツバチ
NOTIFICATION 当サイトの更新をプッシュ通知で受け取ることができます。 プッシュ通知を受け取る プッシュ通知を解除する PWAでプッシュ通知を実装するのが大変だったので書いておきます。 目標はこんな感じ。 freoをPWA化する プッシュ通知の購読をサイトから簡単に行えるようにする プッシュ通知の送信は手動で行うものとする（サイトの更新のお知らせとか簡単なものしかしないので） 色々やって結果がこれ。 サイトをWindows・Android・iOSにインストールできるようになった 一度キャッシュした画面ならサイトをオフラインでも閲覧できるようになった サイトの表示が軽くなった サイト上にプッシュ通知の購読状況が表示されるようになった サイト上でプッシュ通知の購読開始・購読停止ができるようになった フォアグラウンドのGoogleChrome、Firefoxを利用している複数人に対して
背景 現在のWeb開発では、複雑なアプリケーションの要件や、複数のタブの使用の普及に伴い、フロントエンドエンジニアは異なるタブ間のデータ通信や共同作業の問題を解決する必要があります。これには、データの共有、リアルタイム通信の実現、あるタブでの操作が他のタブに即座に反映されることの確保などが含まれます。オンラインのチームコラボレーションツールでは、複数のタブで同時にドキュメントを編集することができるようにしたり、電子商取引サイトでは、ユーザーが1つのタブで商品をカートに追加し、別のタブでカートのリアルタイム更新を確認できるようにする必要があります。特に、Ptengine では、図1に示すような視覚的なイベント設定プロセスにおいて、タブ間通信が必要です。 本文では、さまざまなタブ間通信の方法について詳しく説明し、実際の課題の解決方法を理解するのに役立ちます。初心者でも経験豊富なプロフェッショナ
直近プッシュ通知の実装が必要になったためハマったところ中心に結果をメモる。 受け取り側 pwa-moduleはOneSignalをサポートしているため、Nuxtでプッシュ通知をやりたい場合これを使うのが一番簡単。 pwa.nuxtjs.org とりあえずpwa moduleとone signal moduleを入れてnuxt.config.jsに設定を書けば受け取り側の設定は終わる。 yarn add @nuxtjs/onesignal @nuxtjs/pwa nuxt.config.js // 省略 modules: [ '@nuxtjs/onesignal', '@nuxtjs/pwa' ], oneSignal: { init: { appId: 'One Signalコンソールで発行したID', allowLocalhostAsSecureOrigin: true, // loca
Workbox + webpackでServiceWorkerのオフラインキャッシュと戯れる - Hivelocity (ハイベロシティ) デジタルでビジネスを最適化
HivelocityでフロントエンドエンジニアをしているHaradaです。 先日PWAのカンファレンスに参加する機会があったので、最近のPWA事情について知識をアップデートしておこうと前から気になっていたWorkboxを使ったデモを作成してみたので、その辺りを少しご紹介したいと思います。 せっかくなので、将来的に自社プロダクトへの実装も視野に入れて、今回はwebpackからWorkboxを使用する構成でトライしてみました。 Workboxとは 普段開発に従事していない人でも、トレンドとしてPWA（Progressive Web Apps）という言葉は聞いたことがあると思います。 端的に言うと、Webサイトでスマホアプリのような機能や動作を実現するための仕組みです。 一般的にPWAの利点として主に以下のようなものが挙げられています。 ホーム画面へのアイコン追加プッシュ通知オフラインでも動作す
PWAとは？ PWAとは、「Progressive Web Apps」の略称で、PCやスマホでWebアプリを表示する際に、ネイティブアプリのような動作を可能にする仕組みのことです！ PWAを導入するメリットとして OSによる制限がないこと プッシュ通知を送ることができること ホーム画面にアイコンを設置できること Webアプリ上でキャッシュを使用でき、ローカルのキャッシュに保存できるため、再びアプリを開いた際の読み込みのスピードが従来よりも速くなること などが挙げられます！ 実装 まずは、app/views/layouts/application.html.erbに以下のように2箇所追記します！ <!DOCTYPE html> <html> <head> <title>Example</title> <%= favicon_link_tag('favicon.ico') %> + <link
Firebase Cloud Messaging でウェブプッシュ通知するFirebase Cloud Messaging(FCM) でウェブプッシュ通知の送受信をします。プッシュサービスを含むプッシュ通知を取り巻く全体像を広く浅く解説します。通知メッセージのクリック処理や、ユーザートークンの削除についても触れています。 はじめにFirebase Cloud Messaging (通称 FCM) はクロスプラットフォームにメッセージ送信する仕組みです。 これを使うことで、Web プッシュプロトコル を考えることなく、プッシュ通知を実装できます。 FCM は無料で利用できるので、ユーザーエンゲージメントを高める手段として有効です。 今回は、FCM をウェブアプリで使う方法を紹介します。 FCM と利用制限FCM は 多くの Web API を利用します。具体的には、Window スコープでは
はじめに 聖地の写真を共有するサービス「Holy Place Photo」にService Workerによるキャッシュを実装しました。 そのためネットワークがオフラインでも下記のようにサクサク動きます!!!! Service Worker Demo pic.twitter.com/t04xSRl7B2 — tiwu (@tiwu_official) 2019年2月25日 また、LighthouseのPWAのスコアは100を取れました。 この記事ではService Workerを利用したキャッシュの設計、Laravel + Vue.jsのWebアプリケーションでの実装を解説していきたいと思います。 注意書き 僕の考えた最強のService Workerのキャッシュの設計のため唯一の正解ではありません キャッシュの設計はサービスによって違うと思うのでこの記事は一つの参考にしてください まずS
PWA(Progressive Web Apps)とは、Webサイトにネイティブアプリのような機能を持たせたものです。ブラウザからインストールできて、オフラインでも動作させること可能になります。また、特別なツールは必要なく、HTMLとJavaScriptで作成できます。今回は、PWAとはどのような仕組みで構成されるのか確認してみましょう。 今回作成するPWAのサンプル - ファイルを4つ用意すると作れる PWAの機能について WebサイトがPWAに対応するとどんな良いことがあるのでしょうか。まず、ネイティブアプリのように、インストールできるというのが大きなメリットです。スマートフォンであれば「ホーム画面」にアプリを配置できます。PCでもアプリケーションフォルダにショートカットが作成されるので、起動が容易になります。例えば、以下はChromeでTwitterを開いてインストールしたところです
作ったもの https://ramen-sender.vercel.app どんなアプリ？ プッシュ通知を購読し、プッシュ通知送信ボタンを押すとプッシュ通知を購読している自分も含めたユーザ全員にラーメン画像のプッシュ通知を送りつけることが出来ます。 また、飯テロといえば深夜なので毎日24時にラーメン画像がプッシュ通知で送られてきます。 送られてくるラーメン画像はすべて私が撮ったものです。 なんで作ったの？ iOSのsafariのPWAでもPush通知ができるようになる！ iOS16で実装される！ みたいな情報があったから、iOS16出たしなんか作ってみよう！って思ってたんだけど 実際に使えるようになるのは2023年中(予定)らしい。 はい解散！ ではなく、その代わり？というか前段なのかな、MacOS 13 Venturaのsafari16でプッシュ通知が対応した1らしい！っていうのを見つけ
AWS Amplify の ServiceWorker で Web Push 対応を実装してみる - クライアント編 - Qiita
Web Push、送りたいことありますよね。 この記事は Web Push 通知を使うアプリを AWS Amplify で作ってみる話です。 特にクライアント側を AWS Amplify でどう実装するかを見てみます。 当初サーバー側もあわせて書こうとしたのですが、分量が多くなりそうだったので今回は一旦クライアント編として、サーバー編はまた Amplify の API カテゴリを絡めたものを後日書きます（たぶん）。 Web Push やりたいときにやらなきゃいけないこと Web Push を運用しようとすると、けっこう色々やることがあります。 Push を受け取るクライアント側 Service Worker の実装 購読状態管理、Service Worker 登録等を行うフロントアプリケーションの実装 購読処理時に払い出されるエンドポイントをサーバーサイドに送信 Push を送るサーバー側
はじめましての方ははじめまして。 またお前かな方はこんにちは。 Nな人（えぬなひと）と申します。 普段はQiitaや自前ブログ「Nな人のWeb示録」で記事を投稿しておりますが、 今回はノリでZennに記事を書いていこうと思います。 では、やっていきましょうか。 目的 service workerなるものを使えば、ブラウザでPush通知が使える！（iPhone以外） アプリケーションではなく、Webの技術で作れるってすごい！先進的！（iPhone以外） ということで、ServiceWorkerで個人的に一番やってみたかった、WebPushを実装していこうと思います。 これでアプリを作らなくてもPush通知が送れるようになりますね！（iPhone以外） とても便利な世界になってきました。（iPhone以外） お断り ServiceWorkerには 「manifest.json」や「servic
はじめに Service Workerって聞いたことあります？ Service Workerとは Webページとは別にバックグランドで実行するスクリプト DOMに直接アクセスできない ブラウザを開いていなくても動作可能 プログラム可能なネットワークプロキシとして動作可能 HTTPS必須（またはlocalhost） どんな時に使える？ Cache APIやPush API、Fetch APIと一緒に使うとこで下記のようなことが可能になる キャッシュ・アセットの制御 プッシュ通知 オフライン対応 PWA対応 利用事例（1） Webでプッシュ通知するサービスを個人開発で作ってみた＋ServiceWorkerPushAPIの実装方法まとめ Service Worker + Push APIでプッシュ通知のSaasを作った話 実装についても説明してある 利用事例（2） Mercari Web版 に
スマホアプリで手軽にプッシュ通知を実施してみたく、色々調べてみました。 本域でプッシュ通知を実装するにはiOS「APNs」、Android「GCM」を実装することとなり、色々手間と制約が大きかった。色々調べたところ、PWAと言うフレームワークがあり、プッシュ通知ができそうなので、調べてみた。 ただ最終的にはPWAでの通知はできなかったので、悪しからず読んでください。 PWAとは Progressive Web Appsの略。 Google（Android Chrome）を中心に策定・展開されている appleのiOSに対しては一応の対応が行われているが、一部機能（PUSH機能）が利用できない もうちょっと詳しく ・ブラウザからの表示だけではなく、アプリの形式(ホーム画面に追加可能)でスマートフォンに配置することができる ・キャッシュが利用でき、オフラインでも表示可能。 ・プッシュ通知が利用
はじめに この記事はWebの基礎をおさらいカレンダー Advent Calendar 2022です。 このカレンダーでは、なんとなくわかった気になっている、Webの知識をおさらいするカレンダーです。 興味をもし持ってくださった方は、購読いただけると嬉しいです！ 今回はPWAについて説明します！ PWAとは Progressive Web Appsの略で、Googleが提唱した概念のことです。 Webアプリとネイティブアプリの利点を兼ね備えたWebアプリのことです。 Webアプリはインストールせずともすぐ使えて、アクセスしやすく、他の人にも共有がしやすいという特徴があります。 一方、ネイティブアプリはオフラインでも動作できたり、ホーム画面のアイコンからすぐにアクセスできたり、通知を飛ばせたりします。 こういった双方の良い特徴を融合させて作られたWebアプリのことをPWAといいます。 PWAを
iOS/iPadOS 16.4からサポートされたWebプッシュが意外と話題になっておらず、通知が出てる動画を探してもなかなか見つからなかったので実装してみました。 通知自体はスマホのプッシュ通知と同じで面白みがないので先に動画を貼ります。 iOS まずは通知の許可を得るために"ボタンをクリック"のような能動的な処理が必要になります。どうもGlobalに処理を書くとブラウザによってエラーになるようで。 次に通知の送信。「5秒後に通知を送信」ボタンをクリックしてexpressのWebAPIを叩きます。バックエンド側は"5秒経ったらWebプッシュを送信"という設定にして、その間にホーム画面に戻っておきます。そして5秒後にネイティブアプリのようにPWAアプリがバックグラウンドにいても通知が届くという流れです。 環境構築 プッシュ通知を受けるフロントと送るバックエンドが必要になります。サンプルという
PWAのホームアイコンにFCMを使ってWebプッシュ通知を送信する方法。 – 釣りとキャンプとコーヒーと
Android/iOSアプリへのPUSH通知とWebプッシュ通知について iOSアプリのプッシュ通知は Appleが提供しているPUSH通知サービスの「APNs（Apple Push Notification Service）」、Android アプリへのPUSH通知はGoogleが提供しているPUSH通知サービスの「FCM（Firebase Cloud Messaging）」を利用して実現されています。 一方でWebプッシュ通知はブラウザそのものにWebプッシュ通知を受け取れる機能を用意しておき、各ブラウザベンダーが提供しているPUSHサーバー（PUSHサービス）を経由してPUSH通知をブラウザに送っています。そして、そのブラウザに備わっているService Workerが、Webプッシュ通知をユーザーに表示します。 Webプッシュの通知機能は各ブラウザベンダーが提供しており、本来は各ブ
*1: ブラウザキャッシュは効くが、現実的な利用は厳しいためバツとします。 iOS とそれ以外のプラットフォームで対応状況が分かれています。 調べたところ、iOS 版の Chrome アプリは WKWebView を内部のレンダリングエンジンとして利用しているようです。 つまり、 WKWebView が PWA の要件を満たす API を提供してくれない限り、この状況が改善する見込みはありません。 Do all browsers on iOS use WKWebview or UIWebVIew? - Stack Overflow このように、同一ブラウザであっても、実現できないことを理解しておきましょう。 PWA の動作要件 サイトを PWA に対応させるには、次の3つの項目を満たす必要があります。 Web App Manifest Service Worker HTTPS Web Ap
GMO Developers Day 2023のサイト制作裏話 / 開発者向けブログ・イベント | GMO Developers
12/5-6 に弊社最大のテックカンファレンス「GMO Developers Day 2023」が開催されました。 自分はdevday特設サイトのフロントエンド・webコーディング周りを担当しておりましたので、今回はその制作裏話をまとめてみました。 対応範囲 デザインコーディングフォーム実装配信・アンケート連携実装各切り替えタイミングに合わせた時限設定の実装2023管理用のWordPressの用意 ティザーページ メインページ キャンペーン詳細ページ 配信ページ フォームページ×3 (フォーム回答完了ページ×2) メインページ内にはデザインコーディングから少し外れたような機能実装も含まれていますが、大雑把に分けると上記のような対応範囲で制作にあたりました。 サイト構成 ディレクトリ構成自体は昨年改修されたものをもとに、2023年用のディレクトリを新設しています。 /developersda
概要 このエントリでは、1画面だけのWEBアプリをオフライン（コンピュータがインターネットにつながっていない時）でも動作するために、Service Workerを使うときについて紹介します。 Service Worker に関する詳しい説明は、末尾の参照先をご確認ください。 できること Qiitaに「PDFをブラウザ全画面モードにしてスライドショーができる、ビデオ会議で便利かもしれないツールを作ってみた」というエントリを以前書いたのですが、こういった簡単なWEBアプリをオフラインでも動かせるようになります。 以下を含みます。 このエントリでは、ServiceWorkerのAPIを直接利用するときについて説明しています。 初回インストール後のアップデートについて説明しています。 なるべく小さな変更で実現できるようにしています。（Service Workerの機能をすべて使うことを目的とはしま
参考：アプリの作成費用はいくら必要？種類別・機能別で徹底解説！│LISKUL PWAのメリットPWAのメリットは以下の通りです。 プッシュ通知を送れるから接触機会が増やせるアプリ開発よりも費用安いアプリのダウンロード・アップデートを行う必要がない検索エンジンからの流入も期待できるからアクセスアップにつながるオフライン時でも利用できるプッシュ通知を送れるから接触機会が増やせるPWAを導入することでWebサイトの更新時やキャンペーン施策を実施した時にプッシュ通知を送付することが可能です。 プッシュ通知とはユーザーのスマートフォンに通知を発信する機能で、プッシュ通知を行うことでユーザーに最新情報を共有でき、Webサイトを開いてもらえる接触機会を増やすことができます。 プッシュ通知による接触機会が増えることで、Webサイトへのアクセス・CV向上が見込めます。 参考：プッシュ通知サービス厳選7選！無
PWA（Progressive Web Apps）の理解と実践 - RAKUS Developers Blog | ラクス エンジニアブログ
こんにちは、masakaです。 前の会社でPWAについて少し調べていたのですが、特に発表することもなかったので 今回はその内容をブログにしてみました。 ざっくりとした説明と、簡単な実装をやってみたいと思います。 PWAとは PWAの代表的な機能 Webとネイティブアプリ、それぞれの特徴とPWAが求めるもの PWAを支える三つの柱 結局のところ、PWAとは PWAの対応状況 デスクトップ環境もPWAの対象に [実践編] PWA化への第一歩 PWA化のために必要なこと - [Web App Manifest]と[Service Worker] manifest Service Worker Webサイトからインストール出来るようにする - A2HS サンプルアプリとWebサーバの準備 A2HSを実装する オフラインでも実行できるようにする おわりに PWAとは ネイティブアプリみたいなWebア
Service Worker と Push API でブラウザタブを閉じていても通知を受け取る 今更ながら Service Worker とやらを触ってみた。Web Worker の一種で、通常 HTML 内から呼び出される JavaScript とは別に、バックグラウンドで処理ができる JS の世界のこと。 先日、new Notification() で発火させられる通知バナーの話をしたが、Service Worker と Push API を組合せると、ブラウザタブを閉じていても Service Worker がバックグランドで起動しているので、サーバから送信した通知をクライアントのブラウザで受け取れるのである。 この辺、最初は関係性を理解するのが大変だが、動作するサンプルプロジェクトも作ったので、それも使いながら整理していく。 Service Worker 周りは API 仕様がちょ
[Javascript] Service Worker 初心者入門、概要から使い方まで 2019.01.23 Javascript Javascript, ServiceWorker, 並列処理 Service Worker とは Service Worker とは、Webページとは別にバックグラウンド(別スレッド)で動作するJavascript環境のことです。Javascriptは言語仕様として単一スレッドでしか動作することができませんが、Service Worker を使うことでこれを実現できます。 Service Worker を使用することでプッシュ通知やバックグラウンドでのデータ同期が可能になり、Webアプリのオフライン環境での動作をサポートすることができます。 Javascript の並行処理と非同期処理 Javascript では setTimeout や Promise を
![[Javascript] Service Worker 初心者入門、概要から使い方まで](https://cdn-ak-scissors.b.st-hatena.com/image/square/39345b783600478f9f7560588281a42a5162c520/height=288;version=1;width=512/https%3A%2F%2Fwebbibouroku.com%2Fwp-content%2Fuploads%2Feye_javascript.png)
PWAアプリをネイティブアプリに近づけることができる、JavascriptのAPIやコードをまとめました。PWAだけに限定されたものではありませんが、PWAでより威力を発揮するものをピックアップしています。 PWAインストール・プロンプトの制御 ネイティブアプリっぽく使ってもらうには、PWAをインストール（ホームに追加）してもらうのが最初の一歩です。 PWAアプリでは、「ユーザーがPWAページに2回以上のアクセスしている、かつそのアクセスに5分以上の間隔がある」という条件で、ホーム画面への追加を促すポップアップがブラウザで表示されますが、PWAのインストールプロンプトは「beforeinstallprompt」イベントをリッスンすることで表示コントロールができます。 function installBtn(){ let deferredPrompt; window.addEventList
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンドのデベロッパーが2021年に向けてチェックしておきたいこと
ServiceWorkerの落とし穴8選 - Repro Tech Blog
Service WorkerとWasmを組み合わせてサーバー処理をブラウザーでリアルに再現する
PWAとは？Webサイトを「ほぼアプリ化」する方法 | 株式会社パンタグラフ
Chrome周りで2019年に変化したことまとめ - Qiita
Push APIでプッシュ通知を実装 - interprism's blog
WorkboxでPWAを導入する方法～オフライン対応編～ - Qiita
マルチ通信：クロスタブ通信の多様な選択肢の探究 - Qiita
Nuxtのpwa-moduleでプッシュ通知令和版 - うしろのこの本ください
【Rails】WebアプリにPWAを導入してネイティブアプリっぽくしてみた！ - Qiita
Firebase Cloud Messaging でウェブプッシュ通知する | miyauci.me
僕の考えた最強のService Workerキャッシュ戦略で爆速サービスを作った - Qiita
ゼロからはじめるJavaScript(14) ブラウザからインストールできるアプリPWAを作ってみよう
ラーメン画像をプッシュ通知で送りつけあって飯テロするクソWebアプリを作った - Qiita
JSとPHPでWebPushを送信するWebアプリケーションを作ってみる
Service Worker入門〜導入方法から事例紹介まで〜@オトナのプログラミング勉強会 - Qiita
プッシュ通知を手軽に作成してみたかったのでPWAを使ってみる - Qiita
PWAについて 簡単な実装方法も紹介！ - Qiita
iPhoneでWebプッシュを実装する - yasudacloudの日記
Progressive Web Apps (PWA) への対応まとめ
1画面だけのWEBアプリをオフラインでも動くようにするためにServiceWorkerを使う - Qiita
「PWA」とは？ネイティブアプリとの違いと開発方法・手順まとめ | LISKUL
Service Worker と Push API でブラウザタブを閉じていても通知を受け取る - Neo's World
[Javascript] Service Worker 初心者入門、概要から使い方まで
PWAアプリをネイティブアプリに近づけるためのJavascriptまとめ - WEBZINNE