├── src
├── App.css
├── react-app-env.d.ts
├── components
│ ├── Search
│ │ ├── index.ts
│ │ ├── SearchResult.tsx
│ │ └── Search.tsx
│ ├── A.tsx
│ ├── Main.tsx
│ ├── Manifest.tsx
│ ├── Header.tsx
│ ├── CopyCode.tsx
│ └── Footer.tsx
├── setupTests.js
├── types
│ └── Manifest.ts
├── index.css
├── index.js
├── App.test.ts
├── contexts
│ └── ManifestsContext.tsx
├── App.tsx
├── logo.svg
└── serviceWorker.js
├── public
├── favicon.ico
├── logo192.png
├── logo512.png
├── robots.txt
├── manifest.json
└── index.html
├── .husky
└── pre-commit
├── netlify.toml
├── .vscode
└── launch.json
├── .github
└── workflows
│ └── ci.yml
├── tsconfig.json
├── .gitignore
├── LICENCE
├── README.md
└── package.json
/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
11 |
12 |
15 |
16 | );
17 | }
18 |
19 | export default Main;
20 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 | import * as serviceWorker from './serviceWorker';
6 |
7 | ReactDOM.render(
8 |
9 | ,
11 | document.getElementById('root')
12 | );
13 |
14 | // If you want your app to work offline and load faster, you can change
15 | // unregister() to register() below. Note this comes with some pitfalls.
16 | // Learn more about service workers: https://bit.ly/CRA-PWA
17 | serviceWorker.unregister();
18 |
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "Shovel",
3 | "name": "Shovel",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
1 | # This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
3 |
4 | name: CI
5 |
6 | on:
7 | push:
8 | branches: [ master ]
9 | pull_request:
10 | branches: [ master ]
11 |
12 | jobs:
13 | build:
14 | name: Build and Test
15 |
16 | runs-on: ubuntu-latest
17 | container: node:14
18 |
19 | steps:
20 | - uses: actions/checkout@v2
21 | - run: npm i
22 | - run: npm run build
23 | - run: npm run test
24 |
--------------------------------------------------------------------------------
/src/components/Manifest.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from "react";
2 | import ManifestsContext from "../contexts/ManifestsContext";
3 | import SearchResult from "./Search/SearchResult";
4 |
5 | interface ManifestProps extends React.ComponentPropsWithRef<"div"> {
6 | bucket: string;
7 | name: string;
8 | }
9 |
10 | export default function Manifest(props: ManifestProps) {
11 | const manifests = useContext(ManifestsContext);
12 | const manifest = manifests.find(
13 | (manifest) =>
14 | manifest.name === props.name && manifest.bucket === props.bucket
15 | );
16 |
17 | if (manifest) return
12 |
13 |
14 |
16 |
17 | Find scoop manifests instantly from the comfort of your browser
18 |
19 | {props.children}
20 |
21 |
22 | );
23 | }
24 |
25 | export default Header;
26 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
25 |
26 | # dependencies
27 | /node_modules
28 | /.pnp
29 | .pnp.js
30 |
31 | # testing
32 | /coverage
33 |
34 | # production
35 | /build
36 |
37 | # misc
38 | .DS_Store
39 | .env.local
40 | .env.development.local
41 | .env.test.local
42 | .env.production.local
43 |
44 | npm-debug.log*
45 | yarn-debug.log*
46 | yarn-error.log*
47 |
48 | .eslintcache
--------------------------------------------------------------------------------
/LICENCE:
--------------------------------------------------------------------------------
1 | Copyright 2020 Mert Demir
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4 |
5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6 |
7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Shovel
2 |
3 | > Find [scoop](https://scoop.sh) manifests instantly from the comfort of your browser.
4 |
5 | ## Motivation
6 |
7 | Scoop manifests can be hard to find via internet searches as their manifests often don't show up in the top results. At the same time, searching via scoop itself is rather slow.
8 |
9 | The goal of this web app is to provide a fast and comfortable alternative.
10 |
11 | ## Development
12 |
13 | Run with `npm run start`, test with `npm run test` and build with `npm run build`.
14 |
15 | This app uses a `manifests.json` file generated and hosted in [shovel-data](https://github.com/mertd/shovel-data).
16 |
17 | ### Technologies
18 |
19 | - Language: TypeScript
20 | - SPA Framework: React
21 | - UI Framework: Chakra UI
22 | - Linter: ESLint
23 | - Formatter: Prettier
24 |
25 | ## Licence & Attribution
26 |
27 | MIT
28 |
29 | This software builds on the work of contributors to these projects:
30 | * [scoop](https://github.com/lukesampson/scoop)
31 | * [scoop buckets](https://github.com/lukesampson/scoop/blob/master/buckets.json)
32 | * Projects as listed in the package.json
33 |
--------------------------------------------------------------------------------
/src/App.test.ts:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { render, waitFor } from "@testing-library/react";
3 | import App from "./App";
4 | import userEvent from "@testing-library/user-event";
5 |
6 | test("renders spinner", () => {
7 | const { getByText } = render(App());
8 | const spinner = getByText("Loading...");
9 | expect(spinner).toBeInTheDocument();
10 | });
11 |
12 | test("renders search bar", async () => {
13 | const { getByPlaceholderText } = render(App());
14 | await waitFor(() => {
15 | const searchBar = getByPlaceholderText("Search");
16 | expect(searchBar).toBeInTheDocument();
17 | });
18 | });
19 |
20 | test("searches for a manifest", async () => {
21 | const { getByPlaceholderText, getByText } = render(App());
22 | await waitFor(async () => {
23 | const searchBar = getByPlaceholderText("Search");
24 | userEvent.type(searchBar, "sudo", {
25 | delay: 1,
26 | });
27 | await waitFor(() => {
28 | const name = getByText("gsudo");
29 | expect(name).toBeInTheDocument();
30 | });
31 | });
32 | });
33 |
34 | test("shows a single manifest", async () => {
35 | const { getByText } = render(App());
36 | window.location.href = "/bucket/main/manifest/gsudo";
37 | await waitFor(async () => {
38 | const name = getByText("gsudo");
39 | expect(name).toBeInTheDocument();
40 | });
41 | });
42 |
--------------------------------------------------------------------------------
/src/components/CopyCode.tsx:
--------------------------------------------------------------------------------
1 | import { Code, useToast, Button, Icon } from "@chakra-ui/react";
2 | import React from "react";
3 | import { Clipboard } from "react-feather";
4 |
5 | interface CopyCodeProps extends React.ComponentPropsWithRef<"div"> {
6 | code: string;
7 | }
8 |
9 | /**
10 | * Display a line of code together with a button that allows for easy copying.
11 | */
12 | export default function CopyCode(props: CopyCodeProps) {
13 | const toast = useToast();
14 |
15 | async function toClipboard() {
16 | try {
17 | await navigator.clipboard.writeText(props.code);
18 | toast({
19 | status: "success",
20 | title: "Copied",
21 | description: "You can paste the command into your terminal now 📋",
22 | duration: 3000,
23 | });
24 | } catch (error) {
25 | toast({
26 | status: "error",
27 | title: "Error",
28 | description: "Copying to clipboard is not supported in your browser 📵",
29 | duration: 3000,
30 | });
31 | }
32 | }
33 |
34 | return (
35 |
36 | {props.code}{" "}
37 |
43 |
45 |
46 | );
47 | }
48 |
--------------------------------------------------------------------------------
/src/contexts/ManifestsContext.tsx:
--------------------------------------------------------------------------------
1 | import React, { createContext, useEffect, useState } from "react";
2 | import Manifest from "../types/Manifest";
3 | import { useToast } from "@chakra-ui/react";
4 |
5 | const ManifestsContext = createContext([]);
6 | export const ManifestsConsumer = ManifestsContext.Consumer;
7 |
8 | export function ManifestsProvider(props: React.ComponentPropsWithRef) {
9 | const [manifests, setManifests] = useState([]);
10 | const toast = useToast();
11 |
12 | async function getManifests() {
13 | try {
14 | const response = await fetch(
15 | "https://mertd.github.io/shovel-data/manifests.json"
16 | );
17 | const json = await response.json();
18 | setManifests(json as Manifest[]);
19 | } catch (error) {
20 | toast({
21 | status: "error",
22 | title: "Error",
23 | description: "Couldn't fetch or parse manifests ⛔",
24 | duration: null, // don't hide as this error will render the app unusable
25 | });
26 | }
27 | }
28 |
29 | useEffect(() => {
30 | getManifests();
31 | // eslint-disable-next-line
32 | }, []);
33 |
34 | return (
35 |
36 | {props.children}
37 |
38 | );
39 | }
40 |
41 | export default ManifestsContext;
42 |
--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "./App.css";
3 | import { ChakraProvider } from "@chakra-ui/react";
4 | import Header from "./components/Header";
5 | import Footer from "./components/Footer";
6 | import Main from "./components/Main";
7 | import {
8 | BrowserRouter as Router,
9 | Route,
10 | Redirect,
11 | Switch,
12 | } from "react-router-dom";
13 | import { ManifestsProvider } from "./contexts/ManifestsContext";
14 | import Manifest from "./components/Manifest";
15 |
16 | function App() {
17 | return (
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
27 | (
30 |
37 |
39 |
40 |
41 |
42 |
43 |
44 |
45 | );
46 | }
47 |
48 | export default App;
49 |
--------------------------------------------------------------------------------
/src/components/Footer.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from "react";
2 | import A from "./A";
3 | import { Box, useToast } from "@chakra-ui/react";
4 | import { version } from "../../package.json";
5 |
6 | /**
7 | * Footer for any page
8 | */
9 | function Footer(props: React.ComponentPropsWithRef<"footer">) {
10 | const toast = useToast();
11 |
12 | useEffect(() => {
13 | toast({
14 | status: "warning",
15 | title: "Archival Warning",
16 | duration: 10000,
17 | description: (
18 | <>
19 | The Scoop community chose an official web search. Please use it at{" "}
20 |
21 |
22 | scoop.sh
23 |
24 |
25 | . Shovel will be archived and shut down after 2022. 🗄
26 |
27 | ),
28 | });
29 | // eslint-disable-next-line
30 | }, []);
31 |
32 | return (
33 |
34 |
35 | Shovel v{version} is{" "}
36 | open source . Your use of
37 | this app is governed by the{" "}
38 |
39 | MIT Licence
40 |
41 | .{props.children}
42 |
43 |
44 | );
45 | }
46 |
47 | export default Footer;
48 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "shovel",
3 | "version": "0.10.4",
4 | "private": true,
5 | "dependencies": {
6 | "@chakra-ui/react": "^1.0.0",
7 | "@emotion/react": "^11.0.0",
8 | "@emotion/styled": "^11.0.0",
9 | "@testing-library/jest-dom": "^4.2.4",
10 | "@testing-library/user-event": "^7.2.1",
11 | "framer-motion": "^4.0.0",
12 | "fuse.js": "^6.4.6",
13 | "react": "^17.0.2",
14 | "react-dom": "^17.0.2",
15 | "react-feather": "^2.0.9",
16 | "react-router-dom": "^5.2.0",
17 | "react-scripts": "^4.0.3"
18 | },
19 | "scripts": {
20 | "start": "react-scripts start",
21 | "build": "react-scripts build",
22 | "test": "react-scripts test",
23 | "eject": "react-scripts eject",
24 | "prepare": "husky install"
25 | },
26 | "eslintConfig": {
27 | "extends": "react-app"
28 | },
29 | "browserslist": {
30 | "production": [
31 | ">0.2%",
32 | "not dead",
33 | "not op_mini all"
34 | ],
35 | "development": [
36 | "last 1 chrome version",
37 | "last 1 firefox version",
38 | "last 1 safari version"
39 | ]
40 | },
41 | "devDependencies": {
42 | "@testing-library/react": "^12.1.2",
43 | "@types/jest": "^26.0.20",
44 | "@types/node": "^14.14.31",
45 | "@types/react": "^17.0.36",
46 | "@types/react-dom": "^17.0.1",
47 | "@types/react-router-dom": "^5.1.7",
48 | "husky": "^7.0.4",
49 | "lint-staged": "^12.1.1",
50 | "prettier": "^2.2.1",
51 | "typescript": "^4.2.3"
52 | },
53 | "husky": {
54 | "hooks": {
55 | "pre-commit": "lint-staged"
56 | }
57 | },
58 | "lint-staged": {
59 | "**/*": "prettier --write --ignore-unknown"
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Shovel
28 |
29 |
30 | You need to enable JavaScript to run this app.
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/src/components/Search/SearchResult.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {
3 | VStack,
4 | Tag,
5 | Divider,
6 | Heading,
7 | Icon,
8 | Text,
9 | BoxProps,
10 | } from "@chakra-ui/react";
11 | import A from "../A";
12 | import CopyCode from "../CopyCode";
13 | import Manifest from "../../types/Manifest";
14 | import { Link } from "react-router-dom";
15 | import { FileText, GitMerge, Link as LinkIcon } from "react-feather";
16 |
17 | interface SearchResultProps extends BoxProps {
18 | manifest: Manifest;
19 | }
20 |
21 | /**
22 | * Displays information for a single manifest
23 | */
24 | function SearchResult(props: SearchResultProps) {
25 | return (
26 |
34 |
35 |
41 | {" "}
43 |
44 | {" "}
46 | {props.manifest.checkver?.github && (
47 |
48 |
50 | )}
51 |
52 |
54 | {props.manifest.version} {props.manifest.bucket}
55 |
56 | {props.manifest.description}
57 |
58 |
60 |
61 |
63 | {props.children}
64 |
65 | );
66 | }
67 |
68 | export default SearchResult;
69 |
--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
7 |
8 |
--------------------------------------------------------------------------------
/src/components/Search/Search.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, useRef, useContext } from "react";
2 | import Fuse from "fuse.js";
3 | import { Spinner, Input, Stack, Box, Text } from "@chakra-ui/react";
4 | import SearchResult from "./SearchResult";
5 | import { useLocation, useHistory } from "react-router-dom";
6 | import Manifest from "../../types/Manifest";
7 | import ManifestsContext from "../../contexts/ManifestsContext";
8 |
9 | const fuseOptions = {
10 | threshold: 0.2,
11 | keys: ["name", "description"],
12 | };
13 |
14 | function useQuery() {
15 | return new URLSearchParams(useLocation().search);
16 | }
17 |
18 | /**
19 | * Renders a search input and responds to interaction with it by updating the url, executing the manifest search and displaying the results.
20 | */
21 | function Search(props: React.ComponentPropsWithRef<"div">) {
22 | const query = useQuery();
23 | const history = useHistory();
24 | const manifests = useContext(ManifestsContext);
25 | const [search, setSearch] = useState(query.get("q") || "");
26 | const [results, setResults] = useState[] | null>(
27 | null
28 | );
29 | const [fuse, setFuse] = useState(new Fuse(manifests, fuseOptions));
30 |
31 | const timer = useRef(null);
32 | const stopWatch = useRef([0, 0]);
33 | const input = useRef(null);
34 |
35 | useEffect(() => {
36 | if (manifests.length > 0) {
37 | setFuse(new Fuse(manifests, fuseOptions));
38 | input?.current?.focus();
39 | }
40 | //eslint-disable-next-line
41 | }, [manifests]);
42 |
43 | useEffect(() => {
44 | // trigger search when fuse is initialized
45 | if (search) {
46 | doSearch();
47 | }
48 | // eslint-disable-next-line
49 | }, [fuse]);
50 |
51 | function doSearch() {
52 | stopWatch.current[0] = performance.now();
53 | const results = fuse.search(search);
54 | stopWatch.current[1] = performance.now();
55 | setResults(results);
56 | }
57 |
58 | useEffect(() => {
59 | // skip search if there is no change, reset if there is no input
60 | if (search === query.get("q")) return;
61 | if (!search) return setResults(null);
62 | // set query parameter
63 | history.replace("/search?q=" + search);
64 | // use timeout to avoid unnecessary intermediate searches
65 | timer.current && clearTimeout(timer.current);
66 | const timeout = Math.max(2000 / search.length, 500);
67 | timer.current = setTimeout(doSearch, timeout);
68 | // eslint-disable-next-line
69 | }, [search]);
70 |
71 | if (!manifests.length) {
72 | return
81 |
82 |
94 | Searched {manifests.length} manifests in{" "}
95 | {stopWatchResult} ms and found {results.length} result
96 | {results.length === 1 || "s"}.
97 |
98 | )}
99 |
100 | {results?.map((result) => (
101 |
104 | {props.children}
105 |
106 |
107 | );
108 | }
109 |
110 | export default Search;
111 |
--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
1 | // This optional code is used to register a service worker.
2 | // register() is not called by default.
3 |
4 | // This lets the app load faster on subsequent visits in production, and gives
5 | // it offline capabilities. However, it also means that developers (and users)
6 | // will only see deployed updates on subsequent visits to a page, after all the
7 | // existing tabs open on the page have been closed, since previously cached
8 | // resources are updated in the background.
9 |
10 | // To learn more about the benefits of this model and instructions on how to
11 | // opt-in, read https://bit.ly/CRA-PWA
12 |
13 | const isLocalhost = Boolean(
14 | window.location.hostname === 'localhost' ||
15 | // [::1] is the IPv6 localhost address.
16 | window.location.hostname === '[::1]' ||
17 | // 127.0.0.0/8 are considered localhost for IPv4.
18 | window.location.hostname.match(
19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
20 | )
21 | );
22 |
23 | export function register(config) {
24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
25 | // The URL constructor is available in all browsers that support SW.
26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
27 | if (publicUrl.origin !== window.location.origin) {
28 | // Our service worker won't work if PUBLIC_URL is on a different origin
29 | // from what our page is served on. This might happen if a CDN is used to
30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
31 | return;
32 | }
33 |
34 | window.addEventListener('load', () => {
35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
36 |
37 | if (isLocalhost) {
38 | // This is running on localhost. Let's check if a service worker still exists or not.
39 | checkValidServiceWorker(swUrl, config);
40 |
41 | // Add some additional logging to localhost, pointing developers to the
42 | // service worker/PWA documentation.
43 | navigator.serviceWorker.ready.then(() => {
44 | console.log(
45 | 'This web app is being served cache-first by a service ' +
46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA'
47 | );
48 | });
49 | } else {
50 | // Is not localhost. Just register service worker
51 | registerValidSW(swUrl, config);
52 | }
53 | });
54 | }
55 | }
56 |
57 | function registerValidSW(swUrl, config) {
58 | navigator.serviceWorker
59 | .register(swUrl)
60 | .then(registration => {
61 | registration.onupdatefound = () => {
62 | const installingWorker = registration.installing;
63 | if (installingWorker == null) {
64 | return;
65 | }
66 | installingWorker.onstatechange = () => {
67 | if (installingWorker.state === 'installed') {
68 | if (navigator.serviceWorker.controller) {
69 | // At this point, the updated precached content has been fetched,
70 | // but the previous service worker will still serve the older
71 | // content until all client tabs are closed.
72 | console.log(
73 | 'New content is available and will be used when all ' +
74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
75 | );
76 |
77 | // Execute callback
78 | if (config && config.onUpdate) {
79 | config.onUpdate(registration);
80 | }
81 | } else {
82 | // At this point, everything has been precached.
83 | // It's the perfect time to display a
84 | // "Content is cached for offline use." message.
85 | console.log('Content is cached for offline use.');
86 |
87 | // Execute callback
88 | if (config && config.onSuccess) {
89 | config.onSuccess(registration);
90 | }
91 | }
92 | }
93 | };
94 | };
95 | })
96 | .catch(error => {
97 | console.error('Error during service worker registration:', error);
98 | });
99 | }
100 |
101 | function checkValidServiceWorker(swUrl, config) {
102 | // Check if the service worker can be found. If it can't reload the page.
103 | fetch(swUrl, {
104 | headers: { 'Service-Worker': 'script' },
105 | })
106 | .then(response => {
107 | // Ensure service worker exists, and that we really are getting a JS file.
108 | const contentType = response.headers.get('content-type');
109 | if (
110 | response.status === 404 ||
111 | (contentType != null && contentType.indexOf('javascript') === -1)
112 | ) {
113 | // No service worker found. Probably a different app. Reload the page.
114 | navigator.serviceWorker.ready.then(registration => {
115 | registration.unregister().then(() => {
116 | window.location.reload();
117 | });
118 | });
119 | } else {
120 | // Service worker found. Proceed as normal.
121 | registerValidSW(swUrl, config);
122 | }
123 | })
124 | .catch(() => {
125 | console.log(
126 | 'No internet connection found. App is running in offline mode.'
127 | );
128 | });
129 | }
130 |
131 | export function unregister() {
132 | if ('serviceWorker' in navigator) {
133 | navigator.serviceWorker.ready
134 | .then(registration => {
135 | registration.unregister();
136 | })
137 | .catch(error => {
138 | console.error(error.message);
139 | });
140 | }
141 | }
142 |
--------------------------------------------------------------------------------