Introducing Learn HTML | Blog | web.dev
Introducing Learn HTML Stay organized with collections Save and categorize content based on your preferences. Today we are launching Learn HTML—the next course in our series to help get you up to speed with modern web development. Today we are excited to announce the latest in our series of courses on web.dev. Learn HTML is a brand new course written by Estelle Weyl that will take you through all
各種WebAPIの簡単な使い方と、組み合わせで実現する新たな体験・可能性を考える
2020年2月1日、「PWA Night CONFERENCE 2020」が開催されました。Web体験を進化させる、新しいWeb開発コンセプト「PWA」をテーマに、Web開発に携わるエンジニアたちが集まった本イベント。プレゼンテーション「Webでできる体験を考える会」に登壇したLINE株式会社の折原レオナルド賢氏は、既存のWebAPIを用いてできることや実現できるユーザー体験について、自身の経験や今回の発表に際して行った検証結果を用いて紹介しました。講演資料はこちら Webでできる体験を考える 折原レオナルド賢氏：それでは「Webでできる体験を考える会」ということで始めたいと思います。去年の今頃、こんな記事を書かせていただきました。 もしかしたらこれによって今回呼んでもらったのかなと思いますので、この話の内容も含めていろいろ「Web APIってどういうもの？」という発表をしていきたいと
やっていこう。PWA
「PWA Night vol.4 ～PWAのミライや活用方法をみんなで考えよう～」にて登壇した発表資料です。 https://pwanight.connpass.com/event/128434
PWA Starter Kit - PWAを学ぶためのテンプレート
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました PWA（Progressive Web Apps）というキーワードがトレンドになっています。しかしPWAは特定の技術を指すのではなく、Webでの体験をよりネイティブ並に向上させるという概念でしかありません。そのため何から取り組んだら良いかが分かりづらいです。 そこで勉強のベースに使ってみたいのがPWA Starter Kitです。PWAに関する要素が盛り込まれたテンプレートです。 PWA Starter Kitの使い方 こちらがテンプレートです。 カウンター。これは再読み込みすると消えてしまいます。 ショッピングカート。 マニフェストファイルもきちんと設定されています。 PWA Starter KitではPWAとして必要になる要素（レスポンシブ、SPA、アプリマニフェスト）などの要
フロントエンドに明るくない人のためのPWAざっくり解説｜Yuichiro_Matsuda
フロントエンドエンジニアをしているまっちゃそ（CSSおじさん）です。 25歳なのでおじさんとは言えないかもしれませんが、周りに大学生インターン生が多く、気持ち的にはおじさんなのでCSSおじさんを名乗っています。 この記事は「PWA Advent Calendar 2018」1日目の記事です。 １日目と言いつつ、この記事を書いているのは12/4です。自分でアドベントカレンダー作ったくせに初日を落とすという本当にダメな感じになってしまって、もうホントごめんなさい、という気持ちです。 モチベーションPWAで新しくプロダクトを作る機会を得るため、少しずつ調査や説明をしてフロントエンドが専門ではないエンジニアの方や、非エンジニアの方などに説明する機会があったので、まとめておこうと思いました。 前提Serverless Framework + Nuxt.jsでWebアプリケーションを構築する際に調べた
PWA Directory
PWA Directory: A Directory of Progressive Web Apps
PWAのホーム画面アイコン追加の仕様が変更、A2HS bannerからMini-infobarへ。Chrome 68から
[レベル: 上級] PWA の最も代表的な機能の1つである、”Add to Home Screen”（ホーム画面にアイコン追加）」の仕様が変更されます。 バナー型のプロンプトが現在は出現しますが、もっとコンパクトなバー型のプロンプトに変わります。 Chrome 68 以降は A2HS banner から Mini-infobar へ 仕様変更は、2018年7月にベータ版がリリース予定の Chrome 68 から適用されます。 現行の Chrome では一定の条件を満たすとスクリーンの下にバナーが出現して、ホーム画面アイコンの追加をユーザーに促します。 このバナーは “A2HS banner” と呼ばれます（”A2HS” は Add to (two) Home Screen の略)。 [鈴木補足] beforeinstallprompt イベントを呼び出すことでも A2HS バナーは表示可能
PWAで表示速度が2倍に！ スピード改善を妥協しない日経電子版に学ぶ、PWAのメリット＆デメリット - エンジニアHub｜Webエンジニアのキャリアを考える！
PWAで表示速度が2倍に！ スピード改善を妥協しない日経電子版に学ぶ、PWAのメリット＆デメリット ネイティブアプリに近い体験を簡単に提供できるとして注目を集めている「PWA」。実際に導入し、表示速度が2倍になったという日経新聞電子版の開発者に「PWA」のメリットとデメリットを伺いました。 PWA（Progressive Web Apps）は本当に「アリ」なのか――？ ネイティブアプリの開発にはWebとは異なる専門知識が必要であり、またAndroidやiOSなどOSごとでも異なるため、リソースが膨大にかかるという課題があります。そこで昨今は、XamarinやReact Nativeなどのクロスプラットフォーム開発ツールを使い、ネイティブアプリやWebの開発を一本化しようという動きが活発になっています。 一方で、ネイティブアプリに近い体験を簡単に提供できるとして注目を集めているのが、Goog
next.js で lighthouse 満点を目指した - Qiita
なぜやるか 普通にやってても満点は難しい。まずは無で100点を目指す。 Google が Mobile First Index やりだしたら多分 lighthouse のスコアも使うだろうという予想 next.js というある程度現実的なフレームワークを使うことで適度に YakShaving もこなせるだろうという予想 使ったもの next.js: export mode workbox 結果 コード https://github.com/mizchi/next-pwa-boilerplate デプロイ先(netlify) https://eloquent-spence-e8f2bb.netlify.com/ PWA 91点は、 netlify 使っている制限で、HTTP to HTTPS のリダイレクトを設定するにはカスタムドメインを設定する必要があり、金を払いたくないので諦めた。設定す
pixiv chatstoryのPWA採用事例 - pixiv inside
ピクシブ福岡オフィスの @ikasoumen です。iOS版が先行してリリースされていたチャットストーリー投稿アプリの「pixiv chatstory」。 昨年の12月から、Android版の提供もはじまりました。 ホーム画面にインストールできるWebアプリ ネイティブで実装されているiOS版と違い、Androidでは全てHTML + CSS + JSで作られているWebアプリを、Google playストアを経由せずにpixiv chatstoryの公式サイトから直接Android端末へとインストールすることができます。 従来の「ホーム画面に追加」されたWebページと違って、Chromeのヘッダーが非表示になっていたり、URLを開く際にアプリとして選択できたりと、まるでネイティブアプリかのような体験を得られます。 これには、Progressive Web App(PWA)の特徴の一部を利
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
とある個人開発 PWA の SEO 奮戦記