タグ

*web制作とpwaに関するokudenのブックマーク (4)

  • bento-starter - PWAを学ぶ、実装するのに参考にしたいスターターキット MOONGIFT

    PWA(Progressive Web Apps)というキーワードに注目が集まっていますが、実際のところ何からはじめれば良いのか分からない人は多いのではないでしょうか。PWAは固有の技術を指し示すものではないので、特に分かりづらいでしょう。 そこで参考にしたいのがbento-starterです。PWAとは何か、を学ぶのにぴったりなスターターキットです。 bento-starterの使い方 こちらがそのテンプレートです。 マニフェストファイル、Service Workerもちゃんとインストールされます。 Lighthouseを使った評価はほぼパーフェクトです。 PWAの要素となるCACHE APIの利用はもちろん、アプリマニフェストやアクセシビリティもきちんと提供されています。このbento-starterをベースにしたり、ここから学べることは多数あるでしょう。Service Workerの

    bento-starter - PWAを学ぶ、実装するのに参考にしたいスターターキット MOONGIFT
  • マイクロソフト、Progressive Web Appsの開発支援ツール「PWA Builder 2.0」公開

    Progressive Web Apps(PWA)とは、Webの標準技術を用いて開発されたWebアプリケーションの一種。通常のWebアプリケーションとして振る舞うことに加えて、リソースをローカルに保存しオフラインでの実行にも対応し、Service Workerによるバックグラウンド処理やプッシュ通知なども可能。デスクトップにWebアプリケーション単独のアイコンを登録し、ダブルクリックで実行可能なため、まるでネイティブアプリケーションのように振る舞うことができます。 すでにChrome、Firefox、Safari、iOS、AndroidWindowsなど主要なWebブラウザやプラットフォームはPWA対応を実現しており、ネイティブアプリケーションのようにPWAを実行するだけでなく、AppStoreやGoogle Playストアで配布することも可能です。 PWA Builder 2.0はこう

    マイクロソフト、Progressive Web Appsの開発支援ツール「PWA Builder 2.0」公開
  • 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 Starter Kit - PWAを学ぶためのテンプレート
  • PWAの将来性についての考察 - astamuse Lab

    デザイン部でフロントエンドエンジニアをしているkitoです。 先日、iOS 11.3のリリースでiPhoneでもPWAの一部の機能が利用できるようになりました。(プッシュ通知等は利用できない)今回は、Web界隈で急速に注目を上げ始めているPWA(Progressive Web Apps)の将来性を考察したいと思います。 いわゆるフロントエンド界隈では、新しいツールや技術が短いスパーンで登場しては消えていくということを繰り返しています。新陳代謝が激しい故に、革新的な技術がいち早く取り入れられる若々しいエコシステムは利点ではありますが、反面、苦労して学習した技術やツールが、立ちどころに古びて投資が無駄になってしまうケースも間々あります。これは現代のフロントエンドエンジニアには避けられない運命でしょう。とはいえ、それをむしろ楽しみ新しい技術の到来やそれをリードする若きエンジニアたちの登場を喜ぶべ

    PWAの将来性についての考察 - astamuse Lab
  • 1