2 | Dynamic data
3 | This page will download some dynamic data from a mock backend.
5 |
6 | The data will be cached in your browser's IndexedDB, while the relative images
7 | will be cached in your Cache Storage. After loading the data the first time, you
8 | should be able to see it even when offline. The images are served using a "cache first"
9 | approach; this means that after they are cached the first time they will always be loaded
10 | from the local cache. The data itself is cached the first time, and then it is loaded
11 | from IDB in the subsequent requests. However, each time a request is made, the
12 | Service Worker will still try to fetch the original data and update the IDB cache if needed.
13 | This approach is commonly referred to as "stale while revalidate".
14 |
15 |
16 |
25 |
--------------------------------------------------------------------------------
/components/dynamic-data/element.js:
--------------------------------------------------------------------------------
1 | import BaseElement from '../base.js';
2 |
3 | class MyDynamicData extends BaseElement {
4 | constructor() {
5 | super('/components/dynamic-data/template.html', '/components/dynamic-data/styles.css');
6 | }
7 |
8 | connectedCallback() {
9 | super.connectedCallback();
10 | this.fetchData();
11 | }
12 |
13 | async fetchData() {
14 | const [{ data }] = await Promise.all([
15 | fetch('/api/data').then((res) => res.json()),
16 | this.readyPromise,
17 | ]);
18 | const dataContainer = this._root.querySelector('#data-container');
19 | data.forEach(({ id, title, description, image }) => {
20 | const article = document.createElement('article');
21 | const img = document.createElement('img');
22 | img.src = image;
23 | img.alt = img.title = title;
24 | article.appendChild(img);
25 | const div = document.createElement('div');
26 | const h2 = document.createElement('h2');
27 | h2.textContent = title;
28 | div.appendChild(h2);
29 | const span = document.createElement('span');
30 | span.textContent = description;
31 | div.appendChild(span);
32 | article.appendChild(div);
33 | dataContainer.appendChild(article);
34 | });
35 | }
36 | }
37 |
38 | customElements.define('my-dynamic-data', MyDynamicData);
39 | export default MyDynamicData;
40 |
--------------------------------------------------------------------------------
/components/base.js:
--------------------------------------------------------------------------------
1 | const supportsAdoptingStyleSheets = 'adoptedStyleSheets' in Document.prototype;
2 |
3 | class BaseElement extends HTMLElement {
4 | constructor(templateUrl, stylesUrl) {
5 | super();
6 | this.readyPromise = Promise.all([
7 | fetch(templateUrl).then((res) => res.text()),
8 | fetch(stylesUrl).then((res) => res.text()),
9 | fetch('/components/shared-styles.css').then((res) => res.text()),
10 | ]).then(([template, styles, sharedStyles]) => {
11 | this._styles = `${sharedStyles} ${styles}`;
12 | this._tmpl = document.createElement('template');
13 | this._tmpl.innerHTML = `${supportsAdoptingStyleSheets ? '' : ``}${template}`;
14 | this._root = this.attachShadow({ mode: 'open' });
15 | if (supportsAdoptingStyleSheets) {
16 | this.constructor.prototype.stylesheet = new CSSStyleSheet();
17 | this.shadowRoot.adoptedStyleSheets = [this.constructor.prototype.stylesheet];
18 | }
19 | this._root.appendChild(this._tmpl.content.cloneNode(true));
20 | });
21 | }
22 |
23 | connectedCallback() {
24 | this.readyPromise.then(() => {
25 | if (
26 | supportsAdoptingStyleSheets &&
27 | this.constructor.prototype.stylesheet &&
28 | this.constructor.prototype.stylesheet.cssRules.length === 0
29 | ) {
30 | return this.constructor.prototype.stylesheet.replace(this._styles);
31 | }
32 | });
33 | }
34 | }
35 |
36 | export default BaseElement;
37 |
--------------------------------------------------------------------------------
/components/background-sync/template.html:
--------------------------------------------------------------------------------
1 |
2 | Background sync
3 |
5 | This page allows you to send a POST request to a mock backend. The POST request won't be directly
6 | executed by the website, but it will use the Background Sync API to tell the Service Worker
7 | to execute it when possible. When the POST request is made, the server will do some mock heavy, asynchronous
8 | operations that will take random time between 0 and 5 seconds. A push notification will be sent to
9 | advise the user that everything went ok as soon as these operations have been completed.
10 | This approach allows us to build a seamless experience for the user, that is able to send
11 | the request and then close the website, even if the request hasn't been executed yet.
12 |
13 | First of all, press the button below to enable notifications
14 |
15 |
17 | Then, press the button below to send a POST request to the back end
18 |
19 |
21 |
22 | You should receive a notification when the POST request has been received and handled by the server.
27 |
28 |
--------------------------------------------------------------------------------
/components/shared-styles.css:
--------------------------------------------------------------------------------
1 | *, *::before, *::after, :host {
2 | box-sizing: border-box;
3 | }
4 |
5 | main > * {
6 | display: none;
7 | }
8 |
9 | main > [active] {
10 | display: block;
11 | }
12 |
13 | section {
14 | padding: 2rem 3rem;
15 | background: var(--section-bg-color);
16 | color: var(--primary-text-color);
17 | }
18 |
19 | p {
20 | text-align: justify;
21 | }
22 |
23 | hr {
24 | width: calc(100% - 1rem);
25 | border: 0;
26 | padding: .025rem;
27 | margin: .5rem;
28 | background-color: var(--divider-color);
29 | }
30 |
31 | a {
32 | text-decoration: none;
33 | color: var(--accent-color);
34 | }
35 |
36 | a:hover, a:focus {
37 | text-decoration: underline;
38 | }
39 |
40 | button {
41 | font-size: .875rem;
42 | font-weight: 500;
43 | padding: 0 8px 0 8px;
44 | min-width: 64px;
45 | height: 36px;
46 | color: var(--accent-color);
47 | background-color: transparent;
48 | text-decoration: none;
49 | text-transform: uppercase;
50 | border-radius: .125rem;
51 | border: none;
52 | outline: none;
53 | cursor: pointer;
54 | }
55 |
56 | button:hover:not([disabled]) {
57 | text-decoration: underline;
58 | }
59 |
60 | button[disabled] {
61 | cursor: not-allowed;
62 | color: var(--secondary-text-color);
63 | opacity: .5;
64 | }
65 |
66 | @media (min-width: 640px) {
67 | section {
68 | max-width: 37.5rem;
69 | margin: 1.5rem auto;
70 | border-radius: .5rem;
71 | box-shadow: 0 .06rem .065rem 0 rgba(0, 0, 0, 0.14), 0 .003rem .15rem 0 rgba(0, 0, 0, 0.12), 0 .09rem .0035rem -.065rem rgba(0, 0, 0, 0.2);
72 | }
73 | }
74 |
--------------------------------------------------------------------------------
/functions/data.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": 1,
4 | "title": "Random thing 1",
5 | "description": "Just a random redish thing",
6 | "image": "https://placeholder.pics/svg/256/c62828/fff-c62828"
7 | },
8 | {
9 | "id": 2,
10 | "title": "Random thing 2",
11 | "description": "Just a random purpleish thing",
12 | "image": "https://placeholder.pics/svg/256/6a1b9a/fff-6a1b9a"
13 | },
14 | {
15 | "id": 3,
16 | "title": "Random thing 3",
17 | "description": "Just a random indigoish thing",
18 | "image": "https://placeholder.pics/svg/256/283593/fff-283593"
19 | },
20 | {
21 | "id": 4,
22 | "title": "Random thing 4",
23 | "description": "Just a random light blueish thing",
24 | "image": "https://placeholder.pics/svg/256/0277bd/fff-0277bd"
25 | },
26 | {
27 | "id": 5,
28 | "title": "Random thing 5",
29 | "description": "Just a random tealish thing",
30 | "image": "https://placeholder.pics/svg/256/00695c/fff-00695c"
31 | },
32 | {
33 | "id": 6,
34 | "title": "Random thing 6",
35 | "description": "Just a random deep orangeish thing",
36 | "image": "https://placeholder.pics/svg/256/bf360c/fff-bf360c"
37 | },
38 | {
39 | "id": 7,
40 | "title": "Random thing 7",
41 | "description": "Just a random brownish thing",
42 | "image": "https://placeholder.pics/svg/256/4e342e/fff-4e342e"
43 | },
44 | {
45 | "id": 8,
46 | "title": "Random thing 8",
47 | "description": "Just a random blue greyish thing",
48 | "image": "https://placeholder.pics/svg/256/37474f/fff-37474f"
49 | }
50 | ]
51 |
--------------------------------------------------------------------------------
/generate-firebase-json.js:
--------------------------------------------------------------------------------
1 | const pushManifest = require('./push-manifest.json');
2 | const { writeFileSync } = require('fs');
3 | const { resolve } = require('path');
4 |
5 | const firebaseJson = {
6 | hosting: {
7 | public: '.',
8 | ignore: [
9 | 'firebase.json',
10 | 'generate-firebase-json.js',
11 | 'README.md',
12 | '**/.*',
13 | '**/node_modules/**/*',
14 | '**/functions/**/*',
15 | ],
16 | rewrites: [
17 | {
18 | source: '/api/**',
19 | function: 'api',
20 | },
21 | {
22 | source: '**',
23 | destination: '/index.html',
24 | },
25 | ],
26 | headers: [
27 | {
28 | source: '/api/**',
29 | headers: [
30 | {
31 | key: 'Cache-Control',
32 | value: 'no-cache',
33 | },
34 | ],
35 | },
36 | {
37 | source: '**/sw.js',
38 | headers: [
39 | {
40 | key: 'Service-Worker-Allowed',
41 | value: '/',
42 | },
43 | {
44 | key: 'Cache-Control',
45 | value: 'no-cache',
46 | },
47 | ],
48 | },
49 | {
50 | source: '**',
51 | headers: [
52 | {
53 | key: 'Cache-Control',
54 | value: 'private, max-age=1209600',
55 | },
56 | ],
57 | },
58 | ...Object.entries(pushManifest)
59 | .map(([path, deps]) => ({
60 | source: path,
61 | headers: [{
62 | key: 'Link',
63 | value:
64 | Object
65 | .entries(deps)
66 | .reduce((str, [depPath, { type }]) => `${str},;rel=preload;as=${type}`, '')
67 | .substring(1),
68 | }],
69 | })),
70 | ],
71 | },
72 | };
73 |
74 | writeFileSync(
75 | resolve(__dirname, 'firebase.json'),
76 | `${JSON.stringify(firebaseJson, null, 2)}\n`,
77 | );
78 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Vanilla PWA
5 | Please enable JavaScript to view this website.
50 |
51 |
52 |
--------------------------------------------------------------------------------
/functions/index.js:
--------------------------------------------------------------------------------
1 | const express = require('express');
2 | const functions = require('firebase-functions');
3 | const bodyParser = require('body-parser');
4 | const webPush = require('web-push');
5 | const mockData = require('./data.json');
6 |
7 | const app = express();
8 | const api = express.Router();
9 | api.use(bodyParser.json());
10 |
11 | webPush.setVapidDetails(
12 | `mailto:${functions.config().webpush.subject}`,
13 | functions.config().webpush.publickey,
14 | functions.config().webpush.privatekey
15 | );
16 |
17 | api.get('/data', (req, res) => {
18 | res.json({
19 | success: true,
20 | data: mockData,
21 | });
22 | });
23 |
24 | api.post('/post', (req, res) => {
25 | // For this simple example, we require the user to send its subscription data on each request.
26 | // In a real world application, you would have another endpoint where the user would send
27 | // its subscription, and the back end would save it in a DB
28 | if (
29 | !req.body ||
30 | !req.body.subscription ||
31 | !req.body.subscription.endpoint ||
32 | !req.body.subscription.keys ||
33 | !req.body.subscription.keys.p256dh ||
34 | !req.body.subscription.keys.auth) {
35 | res.status(400).json({
36 | success: false,
37 | data: 'Bad Request',
38 | });
39 | return;
40 | }
41 | // At this point, imagine that the server has to do some kind of asynchronous
42 | // heavy work for us. Instead of blocking us, the server will respond 200 OK
43 | // to tell the client that its request has been enqueued and will be completed
44 | // at some time later on. The client will be notified via web push when the work
45 | // is done.
46 | setTimeout(() => webPush.sendNotification(req.body.subscription, JSON.stringify({
47 | title: 'Done!',
48 | body: 'Your POST request has been received successfully',
49 | actions: [{
50 | action: 'dismiss',
51 | title: 'Dismiss',
52 | }, {
53 | action: 'open-background-sync-page',
54 | title: 'Send another',
55 | }],
56 | // The async heavy work will finish randomly in a time span between 0 and 5 seconds
57 | })), Math.random() * 5000);
58 | res.json({
59 | success: true,
60 | data: 'OK',
61 | });
62 | });
63 |
64 | app.use('/api', api);
65 |
66 | exports.api = functions.https.onRequest(app);
67 |
--------------------------------------------------------------------------------
/components/home/template.html:
--------------------------------------------------------------------------------
1 |
2 | Home
3 | Is it possible to write a Progressive Web App without using any library, framework and build tool? Yes, it
5 | is , and that's exactly what Vanilla PWA is. Of course it isn't meant to be used for an important project,
6 | since only a few browsers support the technologies used to build it, but it is a great way to understand how the
7 | great things modern frameworks provide work.
8 | These are the native modern technologies used in this PWA:
9 |
30 | Take a look at its source code to check
31 | how the magic happens!
32 |
33 |
--------------------------------------------------------------------------------
/components/shell/template.html:
--------------------------------------------------------------------------------
1 |
14 |
15 |
20 |
21 |
24 |
25 |
26 |
Choose a theme
27 |
28 | Light
29 | Dark
30 | Auto
31 | Negative
32 | Grayscale
33 | Sepia
34 | HDR
35 |
36 |
37 |
39 |
Update available!
40 |
41 | Ignore
42 | Update now
43 |
44 |
46 |
49 |
--------------------------------------------------------------------------------
/components/sensors/template.html:
--------------------------------------------------------------------------------
1 |
2 | Sensors
3 |
5 | This page allows you to test your device sensors, which can be accessed through
6 | the Generic Sensor API .
7 |
8 | Linear acceleration
9 |
10 | The linear acceleration sensor measures acceleration that is applied to the
11 | device hosting the sensor, excluding the contribution of a gravity force.
12 | When a device is at rest, for instance, lying flat on the table, the sensor
13 | would measure ≈ 0 m/s2 acceleration on three axes.
14 |
15 |
16 | Gyroscope
17 |
18 | The Gyroscope sensor measures angular velocity in rad/s around the device's
19 | local X, Y and Z axis. Most of the consumer devices have mechanical (MEMS)
20 | gyroscopes, which are inertial sensors that measure rotation rate based on
21 | inertial Coriolis force. A MEMS gyroscopes are prone to drift that is caused
22 | by sensor's gravitational sensitivity which deforms the sensor's internal
23 | mechanical system. Gyroscopes oscillate at relative high frequencies, e.g.,
24 | 10's of kHz, and therefore, might consume more power compared to other sensors.
25 |
26 |
27 | Absolute orientation
28 |
29 | The absolute orientation sensor is a fusion sensor that measures rotation of
30 | a device in relation to the Earth’s coordinate system.
31 |
32 |
33 | Relative orientation
34 |
35 | The relative orientation sensor provides data representing rotation of a device
36 | hosting motion sensors in relation to a stationary reference coordinate system.
37 |
38 |
39 | Ambient light
40 |
41 | The ambient light sensor provides information about ambient light levels, as
42 | detected by the device’s main light detector, in terms of lux units.
43 |
44 |
45 | Magnetometer
46 |
47 | The magnetometer provides information about the magnetic field as detected by
48 | the device's primary magnetometer sensor. The magnetometer sensor measures the
49 | magnetic field for all three physical axes (x, y, z) in μT (micro Tesla).
50 |
51 |
52 |
53 |
--------------------------------------------------------------------------------
/.github/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | ## Contributing to Vanilla PWA
2 |
3 | First off, thanks for taking the time to contribute!
4 |
5 | The following is a set of guidelines for contributing to this PWA. These are mostly guidelines, not rules.
6 | Use your best judgment, and feel free to propose changes to this document in a pull request.
7 |
8 | ### How can I contribute?
9 |
10 | #### Reporting bugs
11 | Before reporting a bug, please make sure it hasn't already been reported by visiting the
12 | [issue section](https://github.com/Dabolus/vanilla-pwa/issues).
13 |
14 | If the bug you found hasn't been reported yet, create a new issue and assign it the proper label(s).
15 | Besides this, there isn't any specific guideline on how the bugs should be reported, Just be sure
16 | to be as clear as possible when describing it.
17 |
18 | #### Suggesting enhancements
19 | Same as the bug reporting. First of all, check if the enhancement has already been suggested.
20 | If it doesn't exist, create a new issue and give it the `enhancement` label, plus any other proper label.
21 |
22 | Keep in mind that what you may find useful might be completely useless for other users,
23 | so please, make sure that the enhancement can actually be useful for everyone before proposing it.
24 | If you find that it is actually useful only for you, consider forking the project and implementing that
25 | enhancement just for yourself.
26 |
27 | ### Styleguides
28 |
29 | #### Commit messages
30 | - Start the commit message with the type of commit, that can be one of the following:
31 | - **feat:** a new feature
32 | - **fix:** a bug fix
33 | - **docs:** changes to documentation
34 | - **style:** formatting, missing semi colons, etc; no code change
35 | - **refactor:** refactoring production code
36 | - **chore:** updating Firebase configuration or any other configuration in general; no production code change
37 | - Use the present tense ("Add feature" not "Added feature")
38 | - The type of the message has to be all lowercase; the rest of the message has to start with an uppercase letter
39 | - Limit the first line to 72 characters or less
40 | - Reference issues and pull requests liberally after the first line
41 | - When only changing documentation, include `[ci skip]` in the commit title
42 |
43 | An example of a great commit message might be:
44 |
45 | `docs: Fix typo in the readme [ci skip]`
46 |
47 | #### Pull Requests
48 | - Specify what has been changed/added/removed
49 | - Write a short and concise title. Be more specific in the description
50 | - Do not include issue numbers in the PR title; you have to add them at the bottom of the description
51 | - End all files with a newline
52 |
--------------------------------------------------------------------------------
/db-helpers.js:
--------------------------------------------------------------------------------
1 | self.dbName = 'vanilla-pwa-db';
2 | self.dbVersion = 1;
3 |
4 | // Opens the DB, adding the necessary object stores if needed.
5 | // Returns a promise that resolves with the DB if everything goes well.
6 | self.openDB = () =>
7 | new Promise((resolve, reject) => {
8 | const openDbReq = indexedDB.open(self.dbName, self.dbVersion);
9 | openDbReq.onupgradeneeded = ({ oldVersion }) => {
10 | const db = openDbReq.result;
11 | switch (oldVersion) {
12 | // 0 = the DB has not been touched yet
13 | case 0:
14 | db.createObjectStore('data', { keyPath: 'id' });
15 | db.createObjectStore('fetch-queue', {
16 | keyPath: 'id',
17 | autoIncrement: true,
18 | });
19 | }
20 | };
21 | openDbReq.onsuccess = () => resolve(openDbReq.result);
22 | openDbReq.onerror = reject;
23 | });
24 |
25 | // Adds an object or an array of objects to the specified object store.
26 | // Returns a promise with the result of the transaction if everything goes well.
27 | self.putIntoDB = (objectStore, objs) =>
28 | Promise.all((Array.isArray(objs) ? objs : [objs]).map(obj =>
29 | self.openDB()
30 | .then((db) => new Promise((resolve, reject) => {
31 | const req =
32 | db.transaction(objectStore, 'readwrite')
33 | .objectStore(objectStore)
34 | .put(obj);
35 | req.onsuccess = () => resolve(req.result);
36 | req.onerror = reject;
37 | }),
38 | )));
39 |
40 | // Given an ID or an array of IDs, removes all the objects matching that ID(s) from the specified object store.
41 | // Returns a promise with the result of the transaction if everything goes well.
42 | self.removeFromDB = (objectStore, ids) =>
43 | Promise.all((Array.isArray(ids) ? ids : [ids]).map(id =>
44 | self.openDB()
45 | .then((db) => new Promise((resolve, reject) => {
46 | const req =
47 | db.transaction(objectStore, 'readwrite')
48 | .objectStore(objectStore)
49 | .delete(id);
50 | req.onsuccess = () => resolve(req.result);
51 | req.onerror = reject;
52 | }),
53 | )));
54 |
55 | // Gets all the objects contained in the specified object store.
56 | // Returns a promise that resolves to the array of objects if everything goes well.
57 | self.getAllFromDB = (objectStore) =>
58 | self.openDB()
59 | .then((db) => new Promise((resolve, reject) => {
60 | const req = db.transaction(objectStore).objectStore(objectStore).getAll();
61 | req.onsuccess = () => resolve(req.result);
62 | req.onerror = reject;
63 | }));
64 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## Vanilla PWA
2 |
3 | Is it possible to write a Progressive Web App without using any library, framework and build tool? **Yes, it is**, and that's exactly what Vanilla PWA is. Of course it isn't meant to be used for an important project, since only a few browsers support the technologies used to build it, but it is a great way to understand how the great things modern frameworks provide work.
4 |
5 | These are the native modern technologies used in this PWA:
6 |
7 | - [HTML Templates](https://html.spec.whatwg.org/multipage/scripting.html#the-template-element)
8 | - [CSS Variables](https://www.w3.org/TR/css-variables/)
9 | - [Level 5 CSS Media Queries](https://drafts.csswg.org/mediaqueries-5/)
10 | - [Custom Elements](https://html.spec.whatwg.org/multipage/custom-elements.html)
11 | - [Shadow DOM](https://dom.spec.whatwg.org/#shadow-trees)
12 | - [ES Modules](https://html.spec.whatwg.org/multipage/webappapis.html#integration-with-the-javascript-module-system)
13 | - [Service Worker API](https://w3c.github.io/ServiceWorker)
14 | - [Fetch API](https://fetch.spec.whatwg.org)
15 | - [Notifications API](https://notifications.spec.whatwg.org)
16 | - [Storage API (Cache API, IndexedDB)](https://storage.spec.whatwg.org)
17 | - [Background Sync API](https://wicg.github.io/BackgroundSync/spec/)
18 | - [Web Share API](https://wicg.github.io/web-share/)
19 | - Many ES6/7/8 features ([async functions](https://tc39.github.io/ecmascript-asyncawait/), [object rest/spread](https://tc39.github.io/proposal-object-rest-spread/), etc.)
20 |
21 | ### Testing locally
22 |
23 | Most of the PWA can be tested by simply serving the content of this directory.
24 | However, some more complicated examples (dynamic data caching, push notifications and background sync) require a mock back end that takes the requests and does some server side work. In case you want to test that features too, you have two possibilities:
25 |
26 | - Create your own mock back end (as you can see from `functions/index.js` it is incredibly simple)
27 | - Use Firebase to test the project like I do
28 |
29 | In both cases, you will need to configure web push with a public and a private key, otherwise the notifications won't work. The simplest way to obtain your configuration is to head over [this website](https://web-push-codelab.glitch.me/).
30 |
31 | If you are using your own back end, I highly suggest you to save this data in
32 | some environment variables. If you are using Firebase, you will need to create a `.runtimeconfig.json` file in the `functions` directory following this format:
33 | ```json
34 | {
35 | "webpush": {
36 | "subject": "your email",
37 | "publickey": "your public key",
38 | "privatekey": "your private key"
39 | }
40 | }
41 | ```
42 | Note: **this only applies to local development**. If you want to deploy the PWA, be sure to ignore this file and execute the following commands to set the variables instead:
43 | ```bash
44 | $ firebase functions:config:set webpush.subject="your email"
45 | $ firebase functions:config:set webpush.publickey="your public key"
46 | $ firebase functions:config:set webpush.privatekey="your private key"
47 | ```
48 |
49 | Now you are ready to go! With Firebase, just use `firebase serve` to test the entire environment (hosting + functions) locally.
50 |
--------------------------------------------------------------------------------
/components/sensors/element.js:
--------------------------------------------------------------------------------
1 | import BaseElement from '../base.js';
2 |
3 | class MySensors extends BaseElement {
4 | constructor() {
5 | super('/components/sensors/template.html', '/components/sensors/styles.css');
6 | }
7 |
8 | connectedCallback() {
9 | super.connectedCallback();
10 | this.setupSensors();
11 | }
12 |
13 | async setupSensors() {
14 | await this.readyPromise;
15 | if ('LinearAccelerationSensor' in window) {
16 | const acceleration = new LinearAccelerationSensor({ frequency: 60 });
17 | const accelerationData = this._root.querySelector('#acceleration-data');
18 | acceleration.addEventListener('reading', () =>
19 | accelerationData.innerHTML =
20 | `x: ${acceleration.x}y: ${acceleration.y}z: ${acceleration.z}`);
23 | acceleration.start();
24 | }
25 |
26 | if ('Gyroscope' in window) {
27 | const gyroscope = new Gyroscope();
28 | const gyroscopeData = this._root.querySelector('#gyroscope-data');
29 | gyroscope.addEventListener('reading', () =>
30 | gyroscopeData.innerHTML =
31 | `x: ${gyroscope.x}y: ${gyroscope.y}z: ${gyroscope.z}`);
34 | gyroscope.start();
35 | }
36 |
37 | if ('AbsoluteOrientationSensor' in window) {
38 | const absOrientation = new AbsoluteOrientationSensor();
39 | const absOrientationData = this._root.querySelector('#abs-orientation-data');
40 | absOrientation.addEventListener('reading', () =>
41 | absOrientationData.innerHTML =
42 | `quaternion: ${absOrientation.quaternion}`);
43 | absOrientation.start();
44 | }
45 |
46 | if ('RelativeOrientationSensor' in window) {
47 | const relOrientation = new RelativeOrientationSensor();
48 | const relOrientationData = this._root.querySelector('#rel-orientation-data');
49 | let rotationMatrix = new Float32Array(16);
50 | relOrientation.addEventListener('reading', () => {
51 | relOrientation.populateMatrix(rotationMatrix);
52 | relOrientationData.innerHTML =
53 | `rotation matrix: ${rotationMatrix}`;
54 | });
55 | relOrientation.start();
56 | }
57 |
58 | if ('AmbientLightSensor' in window) {
59 | const ambientLight = new AmbientLightSensor();
60 | const ambientLightData = this._root.querySelector('#ambient-light-data');
61 | sensor.addEventListener('reading', () =>
62 | ambientLightData.innerHTML =
63 | `illuminance: ${ambientLight.illuminance}`);
64 | ambientLight.start();
65 | }
66 |
67 | if ('Magnetometer' in window) {
68 | const magnetometer = new Magnetometer();
69 | const magnetometerData = this._root.querySelector('#magnetometer-data');
70 | magnetometer.addEventListener('reading', () =>
71 | magnetometerData.innerHTML =
72 | `x: ${magnetometer.x}y: ${magnetometer.y}z: ${magnetometer.z}`);
75 | magnetometer.start();
76 | }
77 | }
78 | }
79 |
80 | customElements.define('my-sensors', MySensors);
81 | export default MySensors;
82 |
--------------------------------------------------------------------------------
/.github/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Contributor Covenant Code of Conduct
2 |
3 | ## Our Pledge
4 |
5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
6 |
7 | ## Our Standards
8 |
9 | Examples of behavior that contributes to creating a positive environment include:
10 |
11 | * Using welcoming and inclusive language
12 | * Being respectful of differing viewpoints and experiences
13 | * Gracefully accepting constructive criticism
14 | * Focusing on what is best for the community
15 | * Showing empathy towards other community members
16 |
17 | Examples of unacceptable behavior by participants include:
18 |
19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances
20 | * Trolling, insulting/derogatory comments, and personal or political attacks
21 | * Public or private harassment
22 | * Publishing others' private information, such as a physical or electronic address, without explicit permission
23 | * Other conduct which could reasonably be considered inappropriate in a professional setting
24 |
25 | ## Our Responsibilities
26 |
27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
28 |
29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
30 |
31 | ## Scope
32 |
33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
34 |
35 | ## Enforcement
36 |
37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at mail@dabolus.app. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
38 |
39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
40 |
41 | ## Attribution
42 |
43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
44 |
45 | [homepage]: http://contributor-covenant.org
46 | [version]: http://contributor-covenant.org/version/1/4/
47 |
--------------------------------------------------------------------------------
/components/background-sync/element.js:
--------------------------------------------------------------------------------
1 | import BaseElement from '../base.js';
2 | import '../../db-helpers.js';
3 |
4 | class MyBackgroundSync extends BaseElement {
5 | constructor() {
6 | super('/components/background-sync/template.html', '/components/background-sync/styles.css');
7 | }
8 |
9 | connectedCallback() {
10 | super.connectedCallback();
11 | this.prepareExperiment();
12 | }
13 |
14 | async prepareExperiment() {
15 | await this.readyPromise;
16 | this.notificationsButton = this._root.querySelector('#notifications-button');
17 | this.postButton = this._root.querySelector('#post-button');
18 | this.notificationsButton.addEventListener('click', () => this.askForNotifications());
19 | this.postButton.addEventListener('click', () => this.postToServer());
20 | this.updateButtons();
21 | }
22 |
23 | async askForNotifications() {
24 | if (this.pushSubscription) {
25 | return;
26 | }
27 | const registration = await navigator.serviceWorker.getRegistration('/');
28 | if (!registration) {
29 | return;
30 | }
31 | this.pushSubscription = await registration.pushManager.subscribe({
32 | userVisibleOnly: true,
33 | // Insert your public key here
34 | applicationServerKey: this.urlBase64ToUint8Array('BBs97jHBz23RRCZEPMAmA3VJe4QG7U0tHwBx7WnrChqQtu5s1RQrv-ij7fBfaS7Js176XX2TEGjUWbI0zjxR_G4'),
35 | }).catch(() => this.updateButtons('denied'));
36 | this.updateButtons(Notification.permission);
37 | }
38 |
39 | updateButtons(status) {
40 | switch (status) {
41 | case 'denied':
42 | this.notificationsButton.textContent = this.postButton.textContent = 'Notifications denied';
43 | this.notificationsButton.disabled = this.postButton.disabled = true;
44 | break;
45 | case 'granted':
46 | this.notificationsButton.textContent = 'Notifications allowed';
47 | this.notificationsButton.disabled = true;
48 | this.postButton.textContent = 'Send POST request';
49 | this.postButton.disabled = false;
50 | break;
51 | case 'sent':
52 | this.postButton.textContent = 'POST request sent';
53 | this.postButton.disabled = true;
54 | break;
55 | default:
56 | this.notificationsButton.textContent = 'Enable notifications';
57 | this.notificationsButton.disabled = false;
58 | this.postButton.textContent = 'You have to enable the notifications first';
59 | this.postButton.disabled = true;
60 | }
61 | }
62 |
63 | urlBase64ToUint8Array(base64String) {
64 | const padding = '='.repeat((4 - base64String.length % 4) % 4);
65 | const base64 = (base64String + padding)
66 | .replace(/-/g, '+')
67 | .replace(/_/g, '/');
68 |
69 | const rawData = window.atob(base64);
70 | const outputArray = new Uint8Array(rawData.length);
71 |
72 | for (let i = 0; i < rawData.length; ++i) {
73 | outputArray[i] = rawData.charCodeAt(i);
74 | }
75 | return outputArray;
76 | }
77 |
78 | async postToServer() {
79 | if (Notification.permission !== 'granted' || !this.pushSubscription || this.postRequestSent) {
80 | return;
81 | }
82 | if (!navigator.serviceWorker.controller) {
83 | return;
84 | }
85 | const registration = await navigator.serviceWorker.getRegistration('/');
86 | if (!registration) {
87 | return;
88 | }
89 | // Add the message to the queue on IDB
90 | await self.putIntoDB('fetch-queue', {
91 | url: '/api/post',
92 | method: 'POST',
93 | headers: {
94 | 'Accept': 'application/json',
95 | 'Content-Type': 'application/json',
96 | },
97 | body: JSON.stringify({
98 | subscription: this.pushSubscription.toJSON(),
99 | }),
100 | });
101 | // Tell the Service Worker to fire the background sync with the "fetch" tag
102 | await registration.sync.register('fetch');
103 | this.postRequestSent = true;
104 | this.updateButtons('sent');
105 | }
106 | }
107 |
108 | customElements.define('my-background-sync', MyBackgroundSync);
109 | export default MyBackgroundSync;
110 |
--------------------------------------------------------------------------------
/firebase.json:
--------------------------------------------------------------------------------
1 | {
2 | "hosting": {
3 | "public": ".",
4 | "ignore": [
5 | "firebase.json",
6 | "generate-firebase-json.js",
7 | "README.md",
8 | "**/.*",
9 | "**/node_modules/**/*",
10 | "**/functions/**/*"
11 | ],
12 | "rewrites": [
13 | {
14 | "source": "/api/**",
15 | "function": "api"
16 | },
17 | {
18 | "source": "**",
19 | "destination": "/index.html"
20 | }
21 | ],
22 | "headers": [
23 | {
24 | "source": "/api/**",
25 | "headers": [
26 | {
27 | "key": "Cache-Control",
28 | "value": "no-cache"
29 | }
30 | ]
31 | },
32 | {
33 | "source": "**/sw.js",
34 | "headers": [
35 | {
36 | "key": "Service-Worker-Allowed",
37 | "value": "/"
38 | },
39 | {
40 | "key": "Cache-Control",
41 | "value": "no-cache"
42 | }
43 | ]
44 | },
45 | {
46 | "source": "**",
47 | "headers": [
48 | {
49 | "key": "Cache-Control",
50 | "value": "private, max-age=1209600"
51 | }
52 | ]
53 | },
54 | {
55 | "source": "/",
56 | "headers": [
57 | {
58 | "key": "Link",
59 | "value": ";rel=preload;as=script,;rel=preload;as=script,;rel=preload;as=style,;rel=preload;as=script,;rel=preload;as=style,;rel=preload;as=document,;rel=preload;as=script,;rel=preload;as=style,;rel=preload;as=document"
60 | }
61 | ]
62 | },
63 | {
64 | "source": "/home",
65 | "headers": [
66 | {
67 | "key": "Link",
68 | "value": ";rel=preload;as=script,;rel=preload;as=script,;rel=preload;as=style,;rel=preload;as=script,;rel=preload;as=style,;rel=preload;as=document,;rel=preload;as=script,;rel=preload;as=style,;rel=preload;as=document"
69 | }
70 | ]
71 | },
72 | {
73 | "source": "/dynamic-data",
74 | "headers": [
75 | {
76 | "key": "Link",
77 | "value": ";rel=preload;as=script,;rel=preload;as=script,;rel=preload;as=style,;rel=preload;as=script,;rel=preload;as=style,;rel=preload;as=document,;rel=preload;as=script,;rel=preload;as=style,;rel=preload;as=document"
78 | }
79 | ]
80 | },
81 | {
82 | "source": "/background-sync",
83 | "headers": [
84 | {
85 | "key": "Link",
86 | "value": ";rel=preload;as=script,;rel=preload;as=script,;rel=preload;as=style,;rel=preload;as=script,;rel=preload;as=style,;rel=preload;as=document,;rel=preload;as=script,;rel=preload;as=style,;rel=preload;as=document"
87 | }
88 | ]
89 | },
90 | {
91 | "source": "/sensors",
92 | "headers": [
93 | {
94 | "key": "Link",
95 | "value": ";rel=preload;as=script,;rel=preload;as=script,;rel=preload;as=style,;rel=preload;as=script,;rel=preload;as=style,;rel=preload;as=document,;rel=preload;as=script,;rel=preload;as=style,;rel=preload;as=document"
96 | }
97 | ]
98 | }
99 | ]
100 | }
101 | }
102 |
--------------------------------------------------------------------------------
/components/shell/element.js:
--------------------------------------------------------------------------------
1 | import BaseElement from '../base.js';
2 | import { setupRouter } from '../utils.js';
3 |
4 | class MyShell extends BaseElement {
5 | get pages() {
6 | return {
7 | 'home': 'Home',
8 | 'dynamic-data': 'Dynamic data',
9 | 'background-sync': 'Background sync',
10 | 'sensors': 'Sensors',
11 | };
12 | };
13 |
14 | constructor() {
15 | super('/components/shell/template.html', '/components/shell/styles.css');
16 | this.setTheme(localStorage.getItem('theme') || 'light');
17 | this.page = 'home';
18 | }
19 |
20 | async connectedCallback() {
21 | super.connectedCallback();
22 | setupRouter((location) => this.navigateTo(location));
23 | await this.readyPromise;
24 | this._updateNotification = this._root.querySelector('#update-notification');
25 | this._themesDialog = this._root.querySelector('#themes-dialog');
26 | this._root.querySelector('#ignore').addEventListener('click', () => this.toggleUpdateNotification(false));
27 | this._root.querySelector('#update-now').addEventListener('click', () => this.update());
28 | this._root.querySelector('#theme-selector').addEventListener('click', () => this.toggleThemesDialog());
29 | this._themesDialog.addEventListener('click', () => this.toggleThemesDialog());
30 | this._root.querySelectorAll('#themes > li')
31 | .forEach((li) => li.addEventListener('click', () => this.setTheme(li.dataset.theme)));
32 | this._root.querySelector('#share-button').addEventListener('click', () => this.share());
33 | this.checkUpdates();
34 | }
35 |
36 | setTheme(theme) {
37 | this.setAttribute('theme', theme);
38 | localStorage.setItem('theme', theme);
39 | }
40 |
41 | share() {
42 | navigator.share({
43 | title: document.title,
44 | text: `Check out ${this.pages[this.page]} on Vanilla PWA!`,
45 | url: window.location.href,
46 | });
47 | }
48 |
49 | async navigateTo({ pathname }) {
50 | let path = decodeURIComponent(pathname).substring(1);
51 | if (!path || !Object.keys(this.pages).includes(path)) {
52 | history.replaceState({}, '', '/home');
53 | path = 'home';
54 | }
55 | const elem = await import(`../${path}/element.js`);
56 | this.page = path;
57 | // At this point the element should already be ready,
58 | // but we await its promise just to be sure.
59 | await this.readyPromise;
60 | for (const link of this._root.querySelectorAll('nav > *')) {
61 | if (link.getAttribute('href') === `/${path}`) {
62 | link.setAttribute('active', '');
63 | } else {
64 | link.removeAttribute('active');
65 | }
66 | }
67 | for (const page of this._root.querySelectorAll('main > *')) {
68 | if (Object.getPrototypeOf(page).constructor.name === elem.default.prototype.constructor.name) {
69 | page.setAttribute('active', '');
70 | } else {
71 | page.removeAttribute('active');
72 | }
73 | }
74 | document.title = `Vanilla PWA - ${this.pages[path]}`;
75 | }
76 |
77 | toggleUpdateNotification(state) {
78 | const shouldShow = typeof state === 'undefined' ? !this._updateNotification.className : state;
79 | this._updateNotification.className = shouldShow ? 'active' : '';
80 | }
81 |
82 | toggleThemesDialog(state) {
83 | const shouldShow = typeof state === 'undefined' ? !this._themesDialog.className : state;
84 | this._themesDialog.className = shouldShow ? 'active' : '';
85 | }
86 |
87 | async checkUpdates() {
88 | if (!navigator.serviceWorker.controller) {
89 | return;
90 | }
91 | const registration = await navigator.serviceWorker.getRegistration('/');
92 | if (!registration) {
93 | return;
94 | }
95 | if (registration.waiting) {
96 | this.newSw = registration.waiting;
97 | this.toggleUpdateNotification(true);
98 | return;
99 | }
100 | if (registration.installing) {
101 | this.trackInstallation(registration.installing);
102 | return;
103 | }
104 | registration.addEventListener('updatefound', () =>
105 | this.trackInstallation(registration.installing));
106 | navigator.serviceWorker.addEventListener('controllerchange', () =>
107 | window.location.reload());
108 | }
109 |
110 | trackInstallation(sw) {
111 | sw.addEventListener('statechange', () => {
112 | if (sw.state === 'installed') {
113 | this.newSw = sw;
114 | this.toggleUpdateNotification(true);
115 | }
116 | });
117 | }
118 |
119 | update() {
120 | this.toggleUpdateNotification(false);
121 | if (!this.newSw) {
122 | return;
123 | }
124 | this.newSw.postMessage({ action: 'update' });
125 | }
126 | }
127 |
128 | customElements.define('my-shell', MyShell);
129 | export default MyShell;
130 |
--------------------------------------------------------------------------------
/push-manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "/": {
3 | "components/base.js": {
4 | "type": "script",
5 | "weight": 1
6 | },
7 | "components/utils.js": {
8 | "type": "script",
9 | "weight": 1
10 | },
11 | "components/shared-styles.css": {
12 | "type": "style",
13 | "weight": 1
14 | },
15 | "components/shell/element.js": {
16 | "type": "script",
17 | "weight": 1
18 | },
19 | "components/shell/styles.css": {
20 | "type": "style",
21 | "weight": 1
22 | },
23 | "components/shell/template.html": {
24 | "type": "document",
25 | "weight": 1
26 | },
27 | "components/home/element.js": {
28 | "type": "script",
29 | "weight": 1
30 | },
31 | "components/home/styles.css": {
32 | "type": "style",
33 | "weight": 1
34 | },
35 | "components/home/template.html": {
36 | "type": "document",
37 | "weight": 1
38 | }
39 | },
40 | "/home": {
41 | "components/base.js": {
42 | "type": "script",
43 | "weight": 1
44 | },
45 | "components/utils.js": {
46 | "type": "script",
47 | "weight": 1
48 | },
49 | "components/shared-styles.css": {
50 | "type": "style",
51 | "weight": 1
52 | },
53 | "components/shell/element.js": {
54 | "type": "script",
55 | "weight": 1
56 | },
57 | "components/shell/styles.css": {
58 | "type": "style",
59 | "weight": 1
60 | },
61 | "components/shell/template.html": {
62 | "type": "document",
63 | "weight": 1
64 | },
65 | "components/home/element.js": {
66 | "type": "script",
67 | "weight": 1
68 | },
69 | "components/home/styles.css": {
70 | "type": "style",
71 | "weight": 1
72 | },
73 | "components/home/template.html": {
74 | "type": "document",
75 | "weight": 1
76 | }
77 | },
78 | "/dynamic-data": {
79 | "components/base.js": {
80 | "type": "script",
81 | "weight": 1
82 | },
83 | "components/utils.js": {
84 | "type": "script",
85 | "weight": 1
86 | },
87 | "components/shared-styles.css": {
88 | "type": "style",
89 | "weight": 1
90 | },
91 | "components/shell/element.js": {
92 | "type": "script",
93 | "weight": 1
94 | },
95 | "components/shell/styles.css": {
96 | "type": "style",
97 | "weight": 1
98 | },
99 | "components/shell/template.html": {
100 | "type": "document",
101 | "weight": 1
102 | },
103 | "components/dynamic-data/element.js": {
104 | "type": "script",
105 | "weight": 1
106 | },
107 | "components/dynamic-data/styles.css": {
108 | "type": "style",
109 | "weight": 1
110 | },
111 | "components/dynamic-data/template.html": {
112 | "type": "document",
113 | "weight": 1
114 | }
115 | },
116 | "/background-sync": {
117 | "components/base.js": {
118 | "type": "script",
119 | "weight": 1
120 | },
121 | "components/utils.js": {
122 | "type": "script",
123 | "weight": 1
124 | },
125 | "components/shared-styles.css": {
126 | "type": "style",
127 | "weight": 1
128 | },
129 | "components/shell/element.js": {
130 | "type": "script",
131 | "weight": 1
132 | },
133 | "components/shell/styles.css": {
134 | "type": "style",
135 | "weight": 1
136 | },
137 | "components/shell/template.html": {
138 | "type": "document",
139 | "weight": 1
140 | },
141 | "components/background-sync/element.js": {
142 | "type": "script",
143 | "weight": 1
144 | },
145 | "components/background-sync/styles.css": {
146 | "type": "style",
147 | "weight": 1
148 | },
149 | "components/background-sync/template.html": {
150 | "type": "document",
151 | "weight": 1
152 | }
153 | },
154 | "/sensors": {
155 | "components/base.js": {
156 | "type": "script",
157 | "weight": 1
158 | },
159 | "components/utils.js": {
160 | "type": "script",
161 | "weight": 1
162 | },
163 | "components/shared-styles.css": {
164 | "type": "style",
165 | "weight": 1
166 | },
167 | "components/shell/element.js": {
168 | "type": "script",
169 | "weight": 1
170 | },
171 | "components/shell/styles.css": {
172 | "type": "style",
173 | "weight": 1
174 | },
175 | "components/shell/template.html": {
176 | "type": "document",
177 | "weight": 1
178 | },
179 | "components/sensors/element.js": {
180 | "type": "script",
181 | "weight": 1
182 | },
183 | "components/sensors/styles.css": {
184 | "type": "style",
185 | "weight": 1
186 | },
187 | "components/sensors/template.html": {
188 | "type": "document",
189 | "weight": 1
190 | }
191 | }
192 | }
193 |
--------------------------------------------------------------------------------
/images/icons/safari-pinned-tab.svg:
--------------------------------------------------------------------------------
1 |