GoogleChromeLabs/so-pwa

Stars
255
Rank 159,729 (Top 4 %)
Language
JavaScript
License
Apache License 2.0
Created over 6 years ago
Updated over 1 year ago

GoogleChromeLabs/so-pwa

GoogleChromeLabs

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

A progressive web app to read Stack Overflow content.

"Beyond Single Page Apps" @ Google I/O 2018

The code in this project is described in more detail in this article, as well as the video for the corresponding Google I/O 2018 session:

About SO PWA

Live deployment: https://so-pwa.firebaseapp.com/

This is a sample progressive web app which uses the Stack Exchange API to fetch the top questions and answers from Stack Overflow for a given tag.

Under the hood, it's powered by the following technologies:

Service worker generation and Streams API logic via Workbox.
Static and dynamic web hosting via Firebase Cloud Functions.
"Universal" JavaScript via ES2015 source modules, bundled for the browser and Node by Rollup, with babel-preset-env ensuring compatibility with various runtimes.
Shared server + service worker routing logic using Express-style patterns and the regexparam library in the service worker.

Contributing

Please read the guide to contributing prior to filing any pull requests.

License

Copyright 2018 Google, Inc.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

squoosh

Make images smaller using best-in-class codecs, right in the browser.

comlink

Comlink makes WebWorkers enjoyable.

quicklink

⚡️Faster subsequent page-loads by prefetching in-viewport links during idle time

ndb

ndb is an improved debugging experience for Node.js, enabled by Chrome DevTools

carlo

Web rendering surface for Node applications

ProjectVisBug

FireBug for designers › Edit any webpage, in any state https://a.nerdy.dev/gimme-visbug

sw-precache

[Deprecated] A node module to generate service worker code that will precache specific resources so they work offline.

react-adaptive-hooks

Deliver experiences best suited to a user's device and network constraints

ui-element-samples

A collection of prototyped UI elements

sw-toolbox

[Deprecated] A collection of service worker tools for offlining runtime requests

webpack-libs-optimizations

Using a library in your webpack project? Here’s how to optimize it

critters

🦔 A Webpack plugin to inline your critical CSS and lazy-load the rest.

psi

PageSpeed Insights Reporting for Node

bubblewrap

Bubblewrap is a Command Line Interface (CLI) that helps developers to create a Project for an Android application that launches an existing Progressive Web App (PWAs) using a Trusted Web Activity.

lighthousebot

Run Lighthouse in CI, as a web service, using Docker. Pass/Fail GH pull requests.

preload-webpack-plugin

Please use https://github.com/vuejs/preload-webpack-plugin instead.

worker-plugin

👩‍🏭 Adds native Web Worker bundling support to Webpack.

prerender-loader

📰 Painless universal pre-rendering for Webpack.

simplehttp2server

A simple HTTP/2 server for development

jsvu

JavaScript (engine) Version Updater

size-plugin

Track compressed Webpack asset sizes over time.

clooney

Clooney is an actor library for the web. Use workers without thinking about workers.

browser-fs-access

File System Access API with legacy fallback in the browser

proxx

A game of proximity

dark-mode-toggle

A custom element that allows you to easily put a Dark Mode 🌒 toggle or switch on your site:

application-shell

Service Worker Application Shell Architecture

pwacompat

PWACompat to bring Web App Manifest to older browsers

container-query-polyfill

A polyfill for CSS Container Queries

idlize

Helper classes and methods for implementing the idle-until-urgent pattern

houdini-samples

Demos for different Houdini APIs

jsbi

JSBI is a pure-JavaScript implementation of the official ECMAScript BigInt proposal.

css-triggers

A reference for the render impact of mutating CSS properties.

howto-components

Literate code examples for common UI patterns.

tooling.report

tooling.report a quick way to determine the best build tool for your next web project, or if tooling migration is worth it, or how to adopt a tool's best practice into your existing configuration and code base.

page-lifecycle

PageLifecycle.js is a tiny JavaScript library that allows developers to easily observe Page Lifecycle API state changes cross browser

css-paint-polyfill

CSS Custom Paint / Paint Worklet polyfill with special browser optimizations.

web-audio-samples

Web Audio API samples by Chrome Web Audio Team

chrome-for-testing

picture-in-picture-chrome-extension

estimator.dev

🧮 Calculate the size and performance impact of switching to modern JavaScript syntax.

comlink-loader

Webpack loader to offload modules to Worker threads seamlessly using Comlink.

pwa-wp

WordPress feature plugin to bring Progressive Web Apps (PWA) to Core

ProgressiveWordPress

A Sample WordPress-based Progressive Web App

web-push-codelab

text-app

A text editor for ChromeOS and Chrome

gulliver

A PWA directory, focusing on collecting PWA best practices and examples.

wasm-feature-detect

A small library to detect which features of WebAssembly are supported.

progressive-tooling

A list of community-built, third-party tools that can be used to improve page performance

svgomg-twa

A sample that project Trusted Web Activities technology to wrap SVGOMG in an Android Application

web-vitals-report

Measure and report on your Web Vitals data in Google Analytics

text-editor

A text editor build on the Native File System APIs

pptraas.com

Puppeteer as a service

progressive-rendering-frameworks-samples

Samples and demos from the Progressive Rendering I/O talk

wasm-bindgen-rayon

An adapter for enabling Rayon-based concurrency on the Web with WebAssembly.

MiniMobileDeviceLab

A mini mobile web device lab

webm-wasm

webm-wasm lets you create webm videos in JavaScript via WebAssembly.

link-to-text-fragment

Browser extension that allows for linking to arbitrary text fragments.

cronet-sample

A sample for the Cronet library

buffer-backed-object

Buffer-backed objects in JavaScript.

pinch-zoom

webpack-training-project

A training project for learning Webpack optimizations

samesite-examples

Examples of using the SameSite cookie attribute in a variety of language, libraries, and frameworks.

airhorn

AutoWebPerf

AutoWebPerf provides a flexible and scalable framework for running web performance audits with arbitrary audit tools including PageSpeedInsights, WebPageTest and more.

first-input-delay

A JavaScript library for measuring First Input Delay (FID) in the browser.

tti-polyfill

Time-to-interactive polyfill

react-shrine

"Shrine" Progressive Web App sample built with React

dynamic-import-polyfill

A fast, tiny polyfill for dynamic import() that works in all module-supporting browsers

wasi-fs-access

This is a demo shell powered by WebAssembly, WASI, Asyncify and File System Access API.

native-url

Node's url module implemented using the built-in URL API.

two-up

adaptive-loading

Demos for Adaptive Loading - differentially deliver fast, lighter experiences for users on slow networks & devices

import-from-worker

It’s like import(), but runs the module in a worker.

sample-pie-shop

Example e-commerce site to explore PWA (Progressive Web App) use cases.

file-drop

A simple file drag and drop custom-element

serial-terminal

Demo application for the Web Serial API.

form-troubleshooter

postcss-jit-props

A CSS custom property helper based on PostCSS. Supply a pool of variables and this plugin will add them to the stylesheet as they are used.

audioworklet-polyfill

🔊 Polyfill AudioWorklet using the legacy ScriptProcessor API.

http2-push-manifest

Generate a list of static resources for http2 push.

pointer-tracker

Track mouse/touch/pointer events for a given element.

pr-bot

🤖 Compare your base branch to a pull request and run plugins over it to view differences

discovery

Discoveries on Sustainable Loading research

imagecapture-polyfill

MediaStream ImageCapture polyfill. Take photos from the browser as easy as .takePhoto().then(processPhoto)

tasklets

telnet-client

extension-manifest-converter

credential-management-sample

Credential Management Sample

wadb

A TypeScript implementation of the Android Debug Bridge(ADB) protocol over WebUSB

extension-update-testing-tool

Tool for testing the update flow for Chrome Extensions during development, including permission grants.

wasm-av1

Port of the AV1 Video codec to WebAssembly

houdini.how

A community-driven gathering place for CSS Houdini worklets and resources.

pwa-workshop-codelab

perf-track

Tracking framework performance and usage at scale

kv-storage-polyfill

A polyfill for the kv-storage built-in module.

http2push-gae

Drop-in HTTP2 push on App Engine

chromeos_smart_card_connector

Smart Card Connector App for Chrome OS

snapshot

devwebfeed

Firehose of team++ resources

sample-currency-converter

A sample currency conversion Progressive Web App