https://github.com/pedrochamberlain/pwa-example
Build a Progressive Web Application from scratch.
https://github.com/pedrochamberlain/pwa-example
pwa tutorial
Last synced: 8 days ago
JSON representation
Build a Progressive Web Application from scratch.
- Host: GitHub
- URL: https://github.com/pedrochamberlain/pwa-example
- Owner: pedrochamberlain
- License: mit
- Created: 2021-02-09T17:22:48.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-02-10T04:06:35.000Z (about 5 years ago)
- Last Synced: 2025-10-04T11:39:41.668Z (5 months ago)
- Topics: pwa, tutorial
- Language: HTML
- Homepage: https://youtu.be/sFsRylCQblw
- Size: 1000 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Building a Progressive Web Application from Scratch
Based on a Fireship tutorial
## What is a PWA?
- PWAs are browser based web applications (HTML5 / CSS / JavaScript). By using the latest browser features, they implement native app-typical capabilities and features, including all listed above. Running in a separate browser window without address bar, they are visually and functionally near-indistinguishable to apps.
- "Progressive" means: A PWA must be designed to maintain basic functionality even if run offline and/or on a browser that does not support some features.
- PWAs don’t install in the classical sense. An icon is added to the screen and advanced browser caching is used. The browser provides a secure execution environment to which PWAs are ‘installed’.
- Service workers are a huge aspect of PWAs. They cache pages in order to view them offline. [Learn more on Service Workers & Caching here.](https://www.youtube.com/watch?v=ksXwaWHCW6k)
## How to build a PWA
1. Create the following files: `index.html`, `manifest.json`, `service-worker.js`. Download a logo for your PWA. [You can use mine.](https://github.com/pedrochamberlain/pwa-example/blob/main/logo.png)
2. Reference `manifest.json` on `index.html`:
```html
```
3. Load the service worker on `index.html`:
```html
[...]
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
}
```
4. Add some self-explanatory info to the app in your `manifest.json`. Here's an example:
```json
{
"name": "PWA Example",
"short_name": "PWA Example",
"start_url": "/?home=true",
"icons": [],
"theme_color": "#000000",
"background_color": "#FFFFFF",
"display": "fullscreen",
"orientation": "portrait"
}
```
You may question why `icons` has no values. Creating assets for a PWA can be quite a hassle because we have to resize the same icon for different devices. To facilitate our process, we'll use the [`pwa-asset-generator`](https://github.com/onderceylan/pwa-asset-generator) library.
Install the library and run the following command in your project's folder:
```zsh
npx pwa-asset-generator logo.png icons
```
5. In `service-worker.js`, use Workbox, Google's PWA library, via CDN:
```javascript
importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.0.2/workbox-sw.js');
workbox.routing.registerRoute(
({request}) => request.destination === 'image',
new workbox.strategies.CacheFirst()
);
```
Your PWA is now ready to use!
Run `npx serve` in your command line to test it up.
## Browser Support
Browser|Windows|macOS|Android|iOS|
-------|-------|-----|-------|---|
Chrome|Yes|Yes|Yes|Yes|
Firefox|No|No|Partial|No|
Safari|N/A|Yes|N/A|iOS 11.3+|
*Last updated February 9th, 2021.*
## Documentation
- [Workbox – JavaScript library for PWAs](https://developers.google.com/web/tools/workbox/modules/workbox-sw)
- [PWA Asset Generator - Automates asset generation and image declaration](https://github.com/onderceylan/pwa-asset-generator)
- [PWA Tutorial – Fireship](https://www.youtube.com/watch?v=sFsRylCQblw)
- [Intro To Service Workers & Caching - Traversy Media](https://www.youtube.com/watch?v=ksXwaWHCW6k)