Firebase、Flamelink、Nuxt、Netlify、PWAを使ってJAMstackなブログを作る
Firebase、Flamelink、Nuxt、Netlify、PWAを使ってJAMstackなブログを作るFirebasePWANetlifyJAMstackNuxt 長々としたタイトル通りのブツを作りました。 その技術内容を紹介をします。 ブログサイト STUDIO Blog | Webデザインのための、クリエイティブメディア Studio Designのマーケティングブログです。 元々Mediumを使っていたところから新規に作ることになったのですが、「じゃあ当然headless CMSでCDNでPWAなサイトですよね！？」と自分なりのフロント技術観を振りかざしてしまいました。 パフォーマンス キャッシュなしのファーストページはまあまあ及第点でしょうか。 遷移時や再訪時だとキャッシュ優先でネットワークを待たないのでより速くなります。 技術構成 まずはコンテンツのデータベースを選びます。
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
React と PWA で講義の時間確認するだけのやつを作った - Qiita
以前作ったものを PWA 対応と、ついでに見た目を変えました。 アプリは「4限何時からだっけ？」を解決する、完全に身内向けのものです。 ですが主に PWA のイントロについて書きたいと思います。 使っているもの React.js Flow styled-components GitHub pages リポジトリ: https://github.com/elzup/dentime PWA 対応 Google Chrome Developer tools の Audits のナビゲーションに従ったのみです。 manifest.json で icon やテーマカラー、バックグラウンドカラーの設定をしました。自動で作られるスプラッシュ画面やナビゲーションバーの色に関係してきます。 設定内容は Devtool の Applications タブで確認できます。 あとは「noscripts タグ入れて
Nuxt.jsでPWAを手っ取り早く本番環境で試す手順を雑に紹介する - Qiita
まずはじめに、現状ではNuxt2でPWAはうまくいきませんのでご注意を。 今回、開発環境は Docker for Mac、本番環境は Heroku を想定しています。 WindowsでVagrant上にDockerを立てる場合はローカルでは別途設定、オプション追加、パスの追加指定が必要となります。 まずは初期ディレクトリ、初期ファイルを作成します。 FROM node:9 RUN mkdir -p /nuxt COPY . /nuxt WORKDIR /nuxt RUN npm uninstall -g yarn && \ npm install -g yarn && \ chmod u+x /usr/local/bin/yarn && \ yarn global add nuxt vue-cli create-nuxt-app ENV HOST 0.0.0.0 EXPOSE 3000
【OGP／PWA】サイト公開時に設定したい内容 - Qiita
最近WEBサイト作ってて、そろそろOGPとかmanifest.jsonあたりは設定したほうがいいよってアドバイスももらい始めたのでマジメに実装していこうと思います。 そんで、自分用のメモ。いつもググってしまうので記事にどっちも書いておこう！と思い立ったわけです。以前作成しましたあの楽器のWebに実装してみました。結構カンタンにできますので、参考に。 なお、あの楽器をWeb実装した記事は以下になります。 【初音ミク】Innocence【3DPV】に出てくる「あの楽器」のWeb版 タイトル／説明／OGPを設定していこう。 OGPとは OGPは、TwitterやFacebook、その他サイトなどでURL参照を貼った時に表示される画像／タイトル／説明です。これを設定しておくと拡散時に「このサイトは何のサイトなのか」といった情報がパット見で判別できるようになるため設定をおすすめします。 <meta
Nuxt.jsでPWA化してみたらとても簡単だった - ShoYamane.me
掲題の件、Nuxt.jsのプリセットでPWAのアドオン機能があるため、試してみました。結論からいうとmanifestだけ設定すればあとは全部勝手にやってくれるのでとても便利ですねこれ。 WordPressでPWA化をやってみたことがあるのですが、読み込むイメージファイルやjsを手動で設定しなければいけないため保守性が大変そうですが、Nuxt.jsのPWAアドオンはその辺上の画像のように全部やってくれるのでとても便利です。 Lighthouseのスコア 通常時 CreateJSとGoogle Font外してみた時 導入方法 pwa - Nuxt.js 導入方法も簡単でドキュメント見てもらえればわかると思うのですが、以下のとおりです。 module.exports = { modules: ['@nuxtjs/pwa'], manifest: { name: 'appName', short_
Nuxt.js+Firebase HostingのサイトをPWA化してLighthouseで(ほぼ)100点満点を目指す - razokulover publog
1年くらい前に仕事でNuxt.jsをいじる機会があったんだけどそれ以来使ってなかった。 ただ、GW中にNuxt tech bookを読んだところ久々にいじりたくなってしまい。 そこでちょうどFirebase HostingとPWA化に関して調べてたとこだったので、Nuxt.jsのサイトをPWA化してFirebase Hostingで動かす手慣らしでもしておこうかと思いやってみた。 ただ、普通にやっても面白くないので一応Lighthouseのスコアを満点にすることを目指してみることにした。 コンテンツはNuxtのスターターキットの初期生成されるページ。このページを対象に行う。 以下、Firebase Hostingの設定・Nuxtのプロジェクト作成・PWA設定・Lighthouseのスコア上げの流れで説明してます。 一応ソースはこちらで。 nuxt-firebase-hosting-samp
SCOUTER開発者ブログ
2024-04-29 CSSってどんな勉強をしたらいいの？おすすめの勉強法3選！ 文字やタブなどWebサイトのデザインを作成するマークアップ言語がCSSです。 CSSを勉強すると、おしゃれなWebサイトやかっこいいWebサイトが作れるようになります。 また、Webサイトを作るときに必要なHTMLを理解するのにも役立ちます。 CSSを勉強するならできるだけ効率よく勉強できるようになりたいですよね。 ではCSSの勉強法はどのようなものがあるのでしょうか。 CSSの勉強法は、スクール […] 2024-04-29 WEBエンジニアから見たXserverの使い勝手と評判 レンタルサーバーのおすすめサイトを見ると、大体どこでも上がってくる有料のレンタルサーバーの一つに「Xserver」があります。 このXserverとは、どのようなサーバーで、サービスにはどのようなものがあるのか。 ホームページ関連
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - kamatte-me/nuxt-firebase-pwa: Run the Nuxt.js application (SPA * SSR * PWA) on Firebase.
【GIG勉強会Vol.18】「Nuxt.jsを使ったPWAへの対応アプリ開発」とデザインプロトタイピングツール「Figma」の活用事例｜東京のWEB制作会社・ホームページ制作会社｜株式会社GIG
Nuxt.js で作った静的サイトを PWA 化する - Qiita
Nuxt.jsとFirebaseでSPA×SSR×PWA×サーバーレスを実現する - DMM inside
