├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .nvmrc
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── firebase.json
├── functions
├── package-lock.json
└── package.json
├── package-lock.json
├── package.json
├── postcss.config.js
├── rollup.config.js
├── src
├── app.mjs
├── lib
│ ├── constants.mjs
│ ├── content-indexing.mjs
│ ├── partials.mjs
│ ├── periodic-background-sync.mjs
│ ├── route-matchers.mjs
│ ├── routes.mjs
│ ├── templates.mjs
│ └── urls.mjs
├── server.js
├── service-worker.mjs
├── static
│ ├── icon.png
│ ├── manifest.json
│ ├── offline.svg
│ ├── partials
│ │ ├── about.html
│ │ ├── foot.html
│ │ ├── head.html
│ │ └── navbar.html
│ └── robots.txt
└── styles.css
└── workbox-config.js
/.eslintignore:
--------------------------------------------------------------------------------
1 | **/node_modules
2 | build/
3 | functions/index.js
4 |
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2018 Google Inc.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | **/
16 |
17 | module.exports = {
18 | extends: [
19 | 'eslint:recommended',
20 | 'google',
21 | ],
22 | env: {
23 | serviceworker: true,
24 | browser: true,
25 | node: true,
26 | es6: true,
27 | },
28 | globals: {
29 | workbox: false,
30 | },
31 | parserOptions: {
32 | ecmaVersion: 2017,
33 | sourceType: 'module',
34 | },
35 | rules: {
36 | 'require-jsdoc': 0,
37 | },
38 | overrides: [{
39 | files: ['**/*.mjs'],
40 | parserOptions: {
41 | sourceType: 'module',
42 | },
43 | }, {
44 | files: [
45 | '{functions,src}/*.{mjs,js}',
46 | '*.{mjs,js}',
47 | ],
48 | plugins: [
49 | 'header',
50 | ],
51 | rules: {
52 | 'header/header': [2, 'block', {
53 | pattern: 'Copyright \\d{4} Google Inc.',
54 | }],
55 | },
56 | }],
57 | };
58 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Directories
2 | .firebase/
3 | build/
4 | node_modules/
5 |
6 | # Files
7 | .firebaserc
8 | *.log
9 | functions/index.js
10 |
--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | v14.17.1
2 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # How to Contribute
2 |
3 | We'd love to accept your patches and contributions to this project. There are
4 | just a few small guidelines you need to follow.
5 |
6 | ## Contributor License Agreement
7 |
8 | Contributions to this project must be accompanied by a Contributor License
9 | Agreement. You (or your employer) retain the copyright to your contribution,
10 | this simply gives us permission to use and redistribute your contributions as
11 | part of the project. Head over to
33 |
${displayName}
37 | at
38 |
${date}
39 |
48 | ${title}
49 |
50 | `;
51 | }
52 |
53 | export function index(tag, items, sort) {
54 | if (!items) {
55 | return html`Unable to list questions for the tag.
`;
56 | }
57 |
58 | const titleString = (sort === SORT_ORDERS.VOTES ? 'Top' : 'Active') +
59 | ` "${tag}" Questions`;
60 | const title = html`
61 | ${titleString}
62 | `;
63 |
64 | const form = html`
65 |
71 | `;
72 |
73 | const questionCards = items.map((item) => questionCard({
74 | id: item.question_id,
75 | title: unescape(item.title),
76 | }));
77 |
78 | const questions = html`${questionCards}
`;
79 |
80 | const metadataScript = html`
81 |
84 | `;
85 |
86 | return html`
87 | ${title}
88 | ${form}
89 | ${questions}
90 | ${metadataScript}
91 | `;
92 | }
93 |
94 | export function question(item) {
95 | if (!item) {
96 | return html`Unable to load question.
`;
97 | }
98 |
99 | const ownerProfile = profile({
100 | anchorLink: item.link,
101 | date: formatDate(item.creation_date),
102 | displayName: item.owner.display_name,
103 | imageUrl: item.owner.profile_image,
104 | profileLink: item.owner.link,
105 | });
106 |
107 | const title = unescape(item.title);
108 |
109 | const question = html`
110 | ${title}
111 | ${ownerProfile}
112 | ${unsafeHTML(item.body)}
113 | `;
114 |
115 | const answers = item.answers ? item.answers
116 | .sort((a, b) => a.score < b.score)
117 | .map((answer) => {
118 | const answererProfile = profile({
119 | anchorLink: answer.link,
120 | date: formatDate(answer.creation_date),
121 | displayName: answer.owner.display_name,
122 | imageUrl: answer.owner.profile_image,
123 | profileLink: answer.owner.link,
124 | });
125 |
126 | return html`
127 | ${answererProfile}
128 | ${unsafeHTML(answer.body)}
129 | `;
130 | }) : [];
131 |
132 | const metadataScript = html`
133 |
136 | `;
137 |
138 | return html`
139 | ${question}
140 | Sorry, this page couldn't be loaded.
149 | Try a cached page instead.
150 | ${message}
151 | `;
152 | }
153 |
--------------------------------------------------------------------------------
/src/lib/urls.mjs:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2018 Google Inc.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | **/
16 |
17 | const PATH = `https://api.stackexchange.com/2.2/questions`;
18 |
19 | // As per https://api.stackexchange.com/docs/throttle
20 | // While this is a read-only, non-secret key, please register your own
21 | // and replace this value if you fork this project!
22 | const KEY = `LJ54sdY)tUYvfsHg2kwLvQ((`;
23 | const SITE = 'stackoverflow';
24 |
25 | export function listQuestionsForTag(tag, sort) {
26 | const url = new URL(PATH);
27 |
28 | url.searchParams.set('filter', '!C(o*VY))7BGSrm5xK');
29 | url.searchParams.set('key', KEY);
30 | url.searchParams.set('order', 'desc');
31 | url.searchParams.set('pagesize', 100);
32 | url.searchParams.set('site', SITE);
33 | url.searchParams.set('sort', sort);
34 | url.searchParams.set('tagged', tag);
35 |
36 | return url.href;
37 | }
38 |
39 | export function getQuestion(questionId) {
40 | const url = new URL(PATH);
41 | url.pathname += `/${questionId}`;
42 |
43 | url.searchParams.set('filter',
44 | '!oDhDpbIIc)pcGHpmWvn_fa0Hu6PKHizd-W.RnKEVsIq');
45 | url.searchParams.set('key', KEY);
46 | url.searchParams.set('site', SITE);
47 |
48 | return url.href;
49 | }
50 |
--------------------------------------------------------------------------------
/src/server.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2018 Google Inc.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | **/
16 |
17 | // CommonJS imports from node_modules or core.
18 | import axios from 'axios';
19 | import express from 'express';
20 | import functions from 'firebase-functions';
21 | import https from 'https';
22 | import LRU from 'lru-cache';
23 | import {renderToString} from '@popeindustries/lit-html-server';
24 |
25 | // Local ES2105 imports.
26 | import {DEFAULT_SORT, DEFAULT_TAG} from './lib/constants.mjs';
27 | import * as templates from './lib/templates.mjs';
28 | import * as urls from './lib/urls.mjs';
29 | import routes from './lib/routes.mjs';
30 |
31 | // HTML imports.
32 | import aboutPartial from '../build/partials/about.html';
33 | import footPartial from '../build/partials/foot.html';
34 | import headPartial from '../build/partials/head.html';
35 | import navbarPartial from '../build/partials/navbar.html';
36 |
37 | // See https://cloud.google.com/functions/docs/bestpractices/networking#http_requests_with_an_axios_package
38 | const apiClient = axios.create({
39 | baseURL: '',
40 | timeout: 10000,
41 | });
42 |
43 | const httpsAgent = new https.Agent({
44 | keepAlive: true,
45 | });
46 |
47 | // Once a browser client has an active service worker, it will no longer need
48 | // to obtain API responses from this server process. But, to cut down on the
49 | // number of API requests that fresh browser clients might trigger, let's put
50 | // in some light-weight caching that's local to this process.
51 | const apiCache = new LRU({
52 | max: 100,
53 | maxAge: 1000 * 60 * 5, // 5 minutes.
54 | });
55 |
56 | async function requestData(url) {
57 | const cachedResponse = apiCache.get(url);
58 | if (cachedResponse) {
59 | return cachedResponse;
60 | }
61 |
62 | const networkResponse = await apiClient.request({
63 | httpsAgent,
64 | url,
65 | });
66 |
67 | const data = networkResponse.data;
68 | apiCache.set(url, data);
69 | return data;
70 | }
71 |
72 | const app = express();
73 |
74 | app.get(routes.get('about'), async (req, res) => {
75 | res.send(headPartial + navbarPartial + aboutPartial + footPartial);
76 | });
77 |
78 | app.get(routes.get('questions'), async (req, res) => {
79 | res.write(headPartial + navbarPartial);
80 |
81 | const questionId = req.params.questionId;
82 | try {
83 | const data = await requestData(urls.getQuestion(questionId));
84 | const questionHTML = await renderToString(
85 | templates.question(data.items[0]));
86 | res.write(questionHTML);
87 | } catch (error) {
88 | const errorHTML = await renderToString(templates.error(error.message));
89 | res.write(errorHTML);
90 | }
91 |
92 | res.write(footPartial);
93 | res.end();
94 | });
95 |
96 | app.get(routes.get('index'), async (req, res) => {
97 | res.write(headPartial + navbarPartial);
98 |
99 | try {
100 | const tag = req.query.tag || DEFAULT_TAG;
101 | const sort = req.params.sort || DEFAULT_SORT;
102 | const data = await requestData(urls.listQuestionsForTag(tag, sort));
103 | const indexHTML = await renderToString(
104 | templates.index(tag, data.items, sort));
105 | res.write(indexHTML);
106 | } catch (error) {
107 | const errorHTML = await renderToString(templates.error(error.message));
108 | res.write(errorHTML);
109 | }
110 |
111 | res.write(footPartial);
112 | res.end();
113 | });
114 |
115 | export const handleRequest = functions.https.onRequest(app);
116 |
--------------------------------------------------------------------------------
/src/service-worker.mjs:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2018 Google Inc.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | **/
16 |
17 | import {CacheableResponsePlugin} from 'workbox-cacheable-response';
18 | import {CacheFirst, StaleWhileRevalidate} from 'workbox-strategies';
19 | import {cleanupOutdatedCaches, matchPrecache, precacheAndRoute}
20 | from 'workbox-precaching';
21 | import {clientsClaim} from 'workbox-core';
22 | import {ExpirationPlugin} from 'workbox-expiration';
23 | import {registerRoute} from 'workbox-routing';
24 | import {strategy as streamsStrategy} from 'workbox-streams';
25 | import {renderToStream} from '@popeindustries/lit-html-server';
26 |
27 | import {API_CACHE_NAME, DEFAULT_TAG, DEFAULT_SORT} from './lib/constants.mjs';
28 | import * as templates from './lib/templates.mjs';
29 | import * as urls from './lib/urls.mjs';
30 | import partials from './lib/partials.mjs';
31 | import {initialize as pbsInitialize} from './lib/periodic-background-sync.mjs';
32 | import routeMatchers from './lib/route-matchers.mjs';
33 |
34 | precacheAndRoute(self.__WB_MANIFEST);
35 | cleanupOutdatedCaches();
36 |
37 | const apiStrategy = new StaleWhileRevalidate({
38 | cacheName: API_CACHE_NAME,
39 | plugins: [
40 | new ExpirationPlugin({maxEntries: 50}),
41 | ],
42 | });
43 |
44 | registerRoute(
45 | routeMatchers.get('about'),
46 | streamsStrategy([
47 | () => matchPrecache(partials.head),
48 | () => matchPrecache(partials.navbar),
49 | () => matchPrecache(partials.about),
50 | () => matchPrecache(partials.foot),
51 | ]),
52 | );
53 |
54 | registerRoute(
55 | routeMatchers.get('questions'),
56 | streamsStrategy([
57 | () => matchPrecache(partials.head),
58 | () => matchPrecache(partials.navbar),
59 | async ({event, params}) => {
60 | try {
61 | const questionId = params[1];
62 | const questionResponse = await apiStrategy.handle({
63 | event,
64 | request: urls.getQuestion(questionId),
65 | });
66 | const data = await questionResponse.json();
67 | return renderToStream(templates.question(data.items[0]));
68 | } catch (error) {
69 | return renderToStream(templates.error(error.message));
70 | }
71 | },
72 | () => matchPrecache(partials.foot),
73 | ]),
74 | );
75 |
76 | registerRoute(
77 | routeMatchers.get('index'),
78 | streamsStrategy([
79 | () => matchPrecache(partials.head),
80 | () => matchPrecache(partials.navbar),
81 | async ({event, url}) => {
82 | try {
83 | const sort = url.searchParams.get('sort') || DEFAULT_SORT;
84 | const tag = url.searchParams.get('tag') || DEFAULT_TAG;
85 | const listResponse = await apiStrategy.handle({
86 | event,
87 | request: urls.listQuestionsForTag(tag, sort),
88 | });
89 | const data = await listResponse.json();
90 | return renderToStream(templates.index(tag, data.items, sort));
91 | } catch (error) {
92 | return renderToStream(templates.error(error.message));
93 | }
94 | },
95 | () => matchPrecache(partials.foot),
96 | ]),
97 | );
98 |
99 | // Gravatar images support CORS, so we won't be storing opaque responses.
100 | registerRoute(
101 | ({url}) => url.origin === 'https://www.gravatar.com',
102 | new CacheFirst({
103 | cacheName: 'profile-images',
104 | plugins: [
105 | new ExpirationPlugin({
106 | maxEntries: 50,
107 | purgeOnQuotaError: true,
108 | }),
109 | ],
110 | }),
111 | );
112 |
113 | registerRoute(
114 | ({request}) => request.destination === 'image',
115 | new CacheFirst({
116 | cacheName: 'other-images',
117 | plugins: [
118 | new CacheableResponsePlugin({statuses: [0, 200]}),
119 | new ExpirationPlugin({
120 | maxEntries: 10,
121 | purgeOnQuotaError: true,
122 | }),
123 | ],
124 | }),
125 | );
126 |
127 | self.skipWaiting();
128 | clientsClaim();
129 |
130 | pbsInitialize();
131 |
--------------------------------------------------------------------------------
/src/static/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoogleChromeLabs/so-pwa/f1fa063a498a26a1a449fbfbca6b8e9bf6a337fc/src/static/icon.png
--------------------------------------------------------------------------------
/src/static/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "SO PWA",
3 | "name": "SO Progressive Web App",
4 | "icons": [{
5 | "src": "/icon.png",
6 | "sizes": "512x512",
7 | "type": "image/png"
8 | }],
9 | "start_url": "/?utm_source=homescreen",
10 | "display": "minimal-ui",
11 | "background_color": "#ededed",
12 | "theme_color": "#0093c4"
13 | }
14 |
--------------------------------------------------------------------------------
/src/static/offline.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/static/partials/about.html:
--------------------------------------------------------------------------------
1 | About SO PWA
2 |
3 | This is a sample
4 | progressive web app
5 | which uses the
6 | Stack Exchange API to fetch
7 | the top questions and answers from
8 | Stack Overflow for a given tag.
9 |
10 |
11 | Under the hood, it's powered by the following technologies:
12 |
13 |
14 |
15 | Service worker generation and
16 | Streams API logic via
17 | Workbox .
18 |
19 |
20 | Static and dynamic web hosting via
21 | Firebase Cloud Functions .
22 |
23 |
24 | "Universal" JavaScript via ES2015 source modules, bundled for the browser
25 | and Node by
26 | Rollup , with
27 | babel-preset-env
28 | ensuring compatibility with various runtimes.
29 |
30 |
31 | Shared server + service worker routing logic using
32 | Express-style
33 | patterns and the
34 | regexparam
37 |
38 | Shared server + service worker HTML generation logic, using
39 | lit-html-serverlit-html
43 |
44 |
45 | This project is open source, and
46 | available on GitHub .
47 |
48 |
51 |
--------------------------------------------------------------------------------
/src/static/partials/foot.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | All content comes from the Stack Exchange Network, using the
5 | public API ,
6 | and is licensed under
7 | CC BY-SA 3.0
8 |
9 |
10 |
11 |
12 |