Progressive Web App (PWA)

2020/12/20 (增加連結)
2021/10/01 (增加連結)

簡介

• Progressive Web Apps in 100 Seconds // Build a PWA from Scratch (8:09)

  • What is a PWA

  • Tools of the Trade

    • Chrome Lighthouse

    • Workbox

    • Hacker News readers as Progressive Web Apps

    • PWA Asset Generator

  • Build a PWA from Scratch

  • Resources

    • 7 Ways to PWA that you don't know

    • Web.dev

• PWA Tutorial for Beginners (31部影片)

  • #1 - What Are PWA's? (7:23)

• 漸進式網絡應用程式（Progressive web app） / Progressive web apps

• 你應該要知道的新一代Web技術---漸進式網頁(PWA) 系列 (2019 第 11 屆 iT 邦幫忙鐵人賽)

• [教學] 將網頁變成Progressive Web Application (PWA) ，漸進式的網頁應用程式 (2019)

• PWA 實戰經驗分享 (2018)

  • PWA 到底是什麼？

  • manifest.json

  • Service Worker

  • Add to home screen banner

• 30 天 Progressive Web App 學習筆記 (2017 iT 邦幫忙鐵人賽)

• PWA學習筆記-1：cache、workbox基本使用

• PWA學習筆記-2：workbox CLI

• PWA學習筆記-3：workbox 參數

• PWA學習筆記-4：manifest.json

• PWA學習筆記-5：用firebase做web push

• Progressive Web Apps (google)

  • What are Progressive Web Apps?

    • The three app pillars

      • Capable

        • The web is quite capable in its own right today. For example, you can build a hyper-local video chat app using WebRTC, geolocation, and push notifications.

      • Reliable

        • A reliable Progressive Web App feels fast and dependable regardless of the network.

      • Installable

        • Installed Progressive Web Apps run in a standalone window instead of a browser tab.

  • Your First Progressive Web App

    • Introduction

  • Adding push notifications to a web app

• Are Progressive Web Apps the Future of Mobile Development?

  • What Is a PWA?

  • Service workers

  • Front-End Frameworks

  • Companies That Gained From Having a PWA

• Progressive Web Apps Will Replace Your Native App: There’s no way back, but we’re not there yet.

• Progressive Web Apps 101: the What, Why and How

• An introduction to Progressive Web Apps (2018.1) 寫這篇文章的時候，PWA還不能用在iPhone上

• PWA — The Power of simplicity

• Everything You Need to Know About PWAs

  • Everything You Need to Know About PWAs — Push Notifications

  • Everything You Need to Know About PWAs — Workbox

• Turn Your Website into a PWA

  • The functionalities include working offline, push notifications, and device hardware access and enabling creating user experiences similar to native applications.

• Build a PWA Using Only Vanilla JavaScript (**程式裡有些bug詳見回應**)

  • Progressive Web App (PWA)

  • Why should we use it?

  • Creating a Basic PWA

  • Web App HTML

  • Web App CSS

  • Importing Google Fonts

  • More Styling

  • Adding Media Queries

  • Add Vanilla JavaScript Functionality

  • What is a Web App Manifest?

  • Build a Manifest File

  • Generate a Manifest Online

  • What is Yarn?

  • Advantages of using yarn

  • Installing Yarn in your system

  • Initializing a yarn project

  • Installing a Package Called Serve

  • What is a ServiceWorker?

  • Registering the ServiceWorker First

  • Creating Our serviceWorker.js Using Vanilla JS

  • Install

  • Fetch

• Progressive Web Apps in 2020: Which Challenges to Overcome?

  • Development of Progressive Web Apps

    • PWA Features Are Still Relatively New To Most Developers

    • No Budget For PWA Development Within Companies

    • Missing Native Device Features

  • Distribution of Progressive Web Apps

    • Users Look For Apps in the App Store

    • Browser And Platform Support Is… Let’s Say Improvable

    • Businesses And Developers Don’t Spread The Word For PWAs

  • User Experience of Progressive Web Apps

    • Native Apps Still Win The UX Battle

    • Lack Of Platform-Specific UI Patterns

• Introduction to PWA set up

  • Set up the manifest.json

  • Set up the Service Worker

• To PWA or not To PWA? Our latest field experience

• Building a PWA was our best idea ever

• Why Progressive Web Apps Will Save The Open Web

• Making a PWA with literally 1 line of code

  • Create a JSON file, call it manifest.json, fill out the fields recommended by Google. Then create a JavaScript file, call it service-worker.js, register it from your client-side code. You’re done. You have a PWA that kinda words. It took you a couple of hours to figure everything out, and 30 minutes to actually write the code. Not bad.

  • with Progressier.com

<button class="progressier-install-button"></button>

• • • The surprising identity problem with PWAs

      • With Progressier.com

• What Web Can Do Today: Can I rely on the Web Platform features to build my app?

  • An overview of the device integration HTML5 APIs

• How to install YouTube as a Progressive Web App

• Your PWA is going to break in August 2021

  • With the upcoming release of Chrome, you’ll have to actually make use of the cache or your PWA will no longer be installable.

Desktop

• What PWAs for Desktop means for Users and Developers

Service worker

• Service workers: the little heroes behind Progressive Web Apps

• Service workers and caching strategies explained

• How to make your app work offline with the power of JavaScript

• Making a useful ‘offline’ page for your web app.

• WorkBox

  • PWA學習筆記-2：workbox CLI

  • PWA學習筆記-3：workbox 參數

  • Workbox is a set of libraries and Node modules that make it easy to cache assets and take full advantage of features used to build Progressive Web Apps.

  • Build a PWA using Workbox

  • Get Started

  • Precache Files

  • How to Generate Service Workers Automatically : Using Workbox with Webpack to Generate Service Workers

  • Workbox 4: Implementing refresh-to-update-version flow using the workbox-window module

Javascript

• Track Your Smartphone in 2D With JavaScript

React & Progressive Web Apps (PWAs)

• A Guide to Service Workers in React.js

  • What is a service worker?

  • How do I use a service worker?

• Create a Progressive Web App with ReactJS and Service Workers

  • What is Progressive Web Apps?

• Transform a React App into a Progressive Web App (PWA)

  • Step 1: Set Up a Simple React App

  • Step 2: Use the Audits Tab in Chrome Dev Tools

  • Step 3: Register a Service Worker

  • Step 4: Apply the Principle of "Progressive Enhancement"

  • Step 5: Add a Splash Icon

  • Step 6: Deploy Your React PWA

• Build a React PWA (Progressive Web App)

  • Preparation

  • Creating a Manifest

  • Checking the Manifest

  • Setting the Theme Color for Chrome

  • Creating a Service Worker

  • Registering the Service Worker

  • Testing Caching

  • Accessing data offline

  • Testing the App

• A Simple React Hook to Prompt iOS Users to Install Your Wonderful PWA.

• How to build a PWA with Create-React-App and custom service workers

  • PWAs in Create-React-App

  • Limitations of default PWAs in CRA

  • Understanding How CRA Generates A Service Worker

  • Overriding The Default Service Worker

• How to customize service workers with create-react-app

  • Working In Dev Mode

  • Combining Dev and Prod

• A Case Study of a React PWA Performance Optimization